<template>
  <div class="app-container">
    <el-form label-width="120px" class="form1">
      <div class="form-title">工作室兑换时间设置</div>
      <template v-if="is_set">
        <div style="width: 100% !important">
          <el-form-item label="选择活动:">
            <el-select
              v-model="setParams.activity_id"
              style="width: 200px !important"
            >
              <el-option
                v-for="item in activitys"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="开始兑换时间:">
          <el-date-picker
            v-model="setParams.start_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="结束兑换时间:">
          <el-date-picker
            v-model="setParams.end_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item style="margin-top:50px;">
          <el-button type="primary" @click="toSetTime">设置</el-button>
          <el-button @click="is_set = false">取消</el-button>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="活动名称:">
          <el-select v-model="getParams.activity_id" style="width: 400px">
            <el-option
              v-for="item in activitys"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:">
          {{ getParams.start_time || "暂未设置" }}
        </el-form-item>
        <el-form-item label="结束时间:">
          {{ getParams.end_time || "暂未设置" }}
        </el-form-item>
        <el-form-item style="margin-top:50px;">
          <el-button type="primary" @click="is_set = true">{{
            getParams.start_time ? "修改" : "设置"
          }}</el-button>
        </el-form-item>
      </template>
    </el-form>
    <el-form label-width="120px" class="form2">
      <div class="form-title">工作室兑换比例设置</div>
      <!-- <template>
        <div class="stepBorder">
          <div class="step">第一阶段</div>
          <el-form-item label="兑换金额:" class="input-text">
            <el-input
              v-model="proportion.studio_first_reward_money"
              placeholder="请输入兑换金额"
              class="input-text"
              :readonly="change"
            />
          </el-form-item>
          <div class="danwei">万</div>
          <div class="tips">输入的兑换金额不能大于{{proportion.studio_first_reward_money}}万</div>
        </div>
        <div class="stepBorder">
          <el-form-item label="兑换比例:" class="input-text input-text1">
            <el-input
              v-model="proportion.studio_first_reward_scale"
              placeholder="请输入兑换比例"
              class="input-text"
              :readonly="change"
            />
          </el-form-item>
          <div class="danwei">%</div>
        </div>
        <div class="stepBorder">
          <div class="step">第二阶段</div>
          <el-form-item label="兑换金额:" class="input-text">
            <el-input
              v-model="proportion.studio_second_reward_money"
              placeholder="请输入兑换金额"
              class="input-text"
              :readonly="change"
            />
          </el-form-item>
          <div class="danwei">万</div>
          <div class="tips">输入的兑换金额须大于{{proportion.studio_first_reward_money}}万小于{{proportion.studio_third_reward_money}}万</div>
        </div>
        <div class="stepBorder">
          <el-form-item label="兑换比例:" class="input-text input-text1">
            <el-input
              v-model="proportion.studio_second_reward_scale"
              placeholder="请输入兑换比例"
              class="input-text"
              :readonly="change"
            />
          </el-form-item>
          <div class="danwei">%</div>
        </div>
        <div class="stepBorder">
          <div class="step">第三阶段</div>
          <el-form-item label="兑换金额:" class="input-text">
            <el-input
              v-model="proportion.studio_third_reward_money"
              placeholder="请输入兑换金额"
              class="input-text"
              :readonly="change"
            />
          </el-form-item>
          <div class="danwei">万</div>
          <div class="tips">输入的兑换金额须大于{{proportion.studio_third_reward_money}}万</div>
        </div>
        <div class="stepBorder">
          <el-form-item label="兑换比例:" class="input-text input-text1">
            <el-input
              v-model="proportion.studio_third_reward_scale"
              placeholder="请输入兑换比例"
              class="input-text"
              :readonly="change"
            />
          </el-form-item>
          <div class="danwei">%</div>
        </div>
        <el-form-item style="margin-top:30px;">
          <el-button type="primary" @click="SetStudioSystem">{{
            change ? "修改" : "设置"
          }}</el-button>
          <el-button
            v-if="change == false"
            @click="change = true"
          >取消</el-button>
        </el-form-item>
      </template> -->
      <div class="block">
        <el-timeline>
          <el-timeline-item placement="top" color="#0bbd87">
            <el-card>
              <h4>第一阶段</h4>
              <el-form-item label="订单金额小于:">
                <el-input
                  v-model="proportion.studio_first_reward_money"
                  placeholder="请输入兑换金额"
                  :readonly="change"
                  style="width:60px"
                />
                <span>万</span>
              </el-form-item>
              <el-form-item label="兑换比例:" class="input-text input-text1">
                <el-input
                  v-model="proportion.studio_first_reward_scale"
                  placeholder="请输入兑换比例"
                  class="input-text"
                  :readonly="change"
                />
              </el-form-item>
              <div class="danwei">%</div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item placement="top" color="#F27C0A">
            <el-card>
              <h4>第二阶段</h4>
              <el-form-item label="订单金额： ">
                <el-input
                  v-model="proportion.studio_second_reward_money"
                  placeholder="请输入兑换金额"
                  style="width:60px"
                  :readonly="change"
                />
                <span>万</span>
                <span>(大于等于{{ proportion.studio_first_reward_money }}万，小于{{ proportion.studio_third_reward_money }}万)</span>
              </el-form-item>
              <el-form-item label="兑换比例:" class="input-text input-text1">
                <el-input
                  v-model="proportion.studio_second_reward_scale"
                  placeholder="请输入兑换比例"
                  class="input-text"
                  :readonly="change"
                />
              </el-form-item>
              <div class="danwei">%</div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item placement="top" color="#69BEFC">
            <el-card>
              <h4>第三阶段</h4>
              <el-form-item label="订单金额:">
                <el-input
                  v-model="proportion.studio_third_reward_money"
                  placeholder="请输入兑换金额"
                  :readonly="change"
                  style="width:60px"
                />
                <span>万（大于等于{{ proportion.studio_second_reward_money }}万）</span>
              </el-form-item>
              <el-form-item label="兑换比例:" class="input-text input-text1">
                <el-input
                  v-model="proportion.studio_third_reward_scale"
                  placeholder="请输入兑换比例"
                  class="input-text"
                  :readonly="change"
                />
              </el-form-item>
              <div class="danwei">%</div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-form-item style="margin-top:30px;">
          <el-button type="primary" @click="SetStudioSystem">{{
            change ? "修改" : "设置"
          }}</el-button>
          <el-button
            v-if="change == false"
            @click="change = true"
          >取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import {
  setTiem,
  getTiem,
  GetStudioSystem,
  SetStudioSystem
} from '@/api/studio/time'
import { activityList } from '@/api/giftB'
export default {
  data() {
    return {
      activitys: [],
      is_set: false,
      getParams: {
        activity_id: '',
        start_time: '',
        end_time: ''
      },
      proportion: {
        studio_first_reward_money: '',
        studio_first_reward_scale: '',
        studio_second_reward_money: '',
        studio_second_reward_scale: '',
        studio_third_reward_money: '',
        studio_third_reward_scale: ''
      },
      setParams: {
        start_time: '',
        end_time: '',
        activity_id: ''
      },
      change: true
    }
  },
  watch: {
    'getParams.activity_id'() {
      this.toGetTime()
    }
  },
  mounted() {
    this.activityList(this.toGetTime)
    this.GetStudioSystem()
  },
  methods: {
    async GetStudioSystem() {
      GetStudioSystem().then((res) => {
        console.log(res)
        this.proportion = {
          studio_first_reward_money: res.data.studio_first_reward.money,
          studio_first_reward_scale: res.data.studio_first_reward.scale,
          studio_second_reward_money: res.data.studio_second_reward.money,
          studio_second_reward_scale: res.data.studio_second_reward.scale,
          studio_third_reward_money: res.data.studio_third_reward.money,
          studio_third_reward_scale: res.data.studio_third_reward.scale
        }
      })
    },
    // 设置兑换比例
    SetStudioSystem() {
      this.change = !this.change
      console.log(this.change)
      if (this.change === true) {
        this.$confirm('此操作将修工作室兑换比例, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const params = this.proportion
            SetStudioSystem(params).then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
              } else {
                this.$message.error(res.message || '兑换比例设置失败')
              }
            })
          })
          .catch(() => {
            this.change = true
            this.$message({
              type: 'info',
              message: '操作取消'
            })
          })
      }
    },
    async activityList(cb) {
      this.loadingFull = true
      await activityList()
        .then((res) => {
          this.loadingFull = false
          if (res.code === 200) {
            this.activitys = res.data
            res.data.map((item) => {
              if (item.is_ing === 1) {
                this.getParams.activity_id = item.id
              }
            })
          }
          cb && cb()
        })
        .catch((e) => {
          this.loadingFull = false
          cb && cb()
        })
    },
    toGetTime() {
      const loading = this.$loading()
      getTiem({ activity_id: this.getParams.activity_id })
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            this.getParams.start_time = res.data.start_time
            this.getParams.end_time = res.data.end_time
          } else {
            this.$message.error(res.message || '获取时间设置失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('获取时间设置失败')
        })
    },
    toSetTime() {
      if (!this.setParams.activity_id) {
        this.$message.error('请选择活动')
        return false
      }
      if (!this.setParams.start_time || !this.setParams.end_time) {
        this.$message.error('请设置完整')
        return false
      }
      if (
        new Date(this.setParams.start_time).getTime() >
        new Date(this.setParams.end_time).getTime()
      ) {
        this.$message.error('结束兑换时间必须大于开始兑换时间')
        return false
      }
      const loading = this.$loading()
      setTiem(this.setParams)
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            this.$confirm('此操作将修工作室兑换时间, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.is_set = !this.is_set
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.toGetTime()
            })
          } else {
            this.$message.error(res.message || '时间设置失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('时间设置失败')
        })
    }
  }
}
</script>
<style>
.tips{
  font-size: 10px;
  color: #F56C6C;
  margin-left: 230px;
  margin-bottom: 10px;
}
.form-title {
  height: 50px;
  line-height: 50px;
  font-weight: 550;
  margin: 30px;
  font-size: 24px;
  margin-left: 30px;
}
.form1 {
  width: 30% !important;
  display: inline-block;
  vertical-align: top;
  margin-right: 10%;
}
.form2 {
  display: inline-block;
  width: 55% !important;
  vertical-align: top;
}
.el-form-item__label {
  font-weight: 400 !important;
}
.step {
  display: inline-block;
  vertical-align: middle;
  margin-left: 45px;
  font-weight: 550;
}
.input-text {
  width: 100px !important;
}
.danwei {
  display: inline-block;
  vertical-align: middle;
  line-height: 36px;
}
.input-text {
  display: inline-block;
  vertical-align: top;
  margin-right: 120px;
}
.el-form-item__label {
  font-size: 14px !important;
}
/* .el-select {
  width:300 !important;
} */
.stepBorder {
  display: inline-block;
  vertical-align: top;
}
@media screen and (max-width: 1500px) {
  .input-text1 {
    margin-left: 113px;
  }
  .stepBorder {
    display: block;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100% !important;
  }
  .el-select {
  width:200px !important;
}
}
@media screen and (max-width: 940px) {
  .form1 {
    width: 100% !important;
    display: block;
  }
  .form2 {
    display: block;
    width: 100% !important;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 200px !important;
  }
  .el-select {
    width: 300px !important;
  }
  .el-input {
    max-width: 300 !important;
  }
}
</style>
