<template>
  <i-modal v-model="visiable" :loading="posting" :title="allreadonly ? '查看优惠券' : '创建/编辑优惠券'" @on-ok="onOk" width="600">
    <i-spin v-if="loading"></i-spin>
    <i-form v-else ref="formCoupon" :rules="ruleValidate" :model="formData" :label-width="80">

      <i-form-item class="form-group" label="基本信息"></i-form-item>
      <i-form-item label="Token">
        {{formData.couponToken}}
      </i-form-item>
      <i-form-item label="名称" prop="couponName">
        <i-input placeholder="名称建议30字以内" v-model="formData.couponName" :disabled="true" style="width: 200px"></i-input>
      </i-form-item>
      <i-form-item label="使用期限" prop="time">
        <i-date-picker type="datetimerange" prop='startTimeStr' v-model="formData.time" placeholder="使用期限" format="yyyy-MM-dd HH:mm:ss" style="width: 200px"></i-date-picker>
        <!-- <row>
          <i-col span="11">
            <i-date-picker type="datetime" prop='endTimeStr' v-model="formData.startTimeStr" :disabled="true" placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss" style="width: 200px"></i-date-picker>
          </i-col>
          <i-col span="2">——</i-col>
          <i-col span="11">
          <i-date-picker type="datetime" v-model="formData.endTimeStr" placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss" style="width: 200px"></i-date-picker>
          </i-col>
        </row> -->
      </i-form-item>


      <i-form-item label="优惠券说明" prop="remark">
        <i-input type="textarea" placeholder="优惠券使用条件简介" :disabled="true" v-model="formData.remark"></i-input>
      </i-form-item>
    </i-form>
  </i-modal>
</template>

<script>
  import Api from 'api/api';
  import dayjs from 'dayjs';

  const api = new Api();

  export default {
    components: {},
    name: 'ModalCreateCoupon',
    data() {
      return {
        readonly: false,
        allreadonly: false,
        visiable: false,
        loading: false,
        posting: true,
        uploadTxt: '',
        couponToken: '',
        formData: {
          uid: 0,
          couponToken: '',
          couponId: '',
          couponCode: '',
          couponName: '',
          time: ['', ''],
          remark: ''
        },
        ruleValidate: {
          time: {required: true, validator: (rule, value, callback) => {
              if (value.some(v => !v)) {
                callback(new Error('请选择使用期限'));
              } else {
                callback();
              }
            }},
        }
      };
    },
    methods: {
      async show(item) {
        // console.log('console.log(item)')
        // console.log(item)
        this.posting = this.visiable = true;
        this.$refs.formCoupon.resetFields();
        let initData = {
          uid: item.uid,
          couponToken: item.couponToken,
          couponId: item.couponId,
          couponCode: item.couponCode,
          couponName: item.couponName,
          time: [dayjs.unix(item.startTime).format('YYYY-MM-DD HH:mm:ss'), dayjs.unix(item.endTime).format('YYYY-MM-DD HH:mm:ss')],
          remark: item.remark,
          startTimeStr: dayjs.unix(item.startTime).format('YYYY-MM-DD HH:mm:ss'),
          endTimeStr: dayjs.unix(item.endTime).format('YYYY-MM-DD HH:mm:ss')
        };
        // console.log("initData")
        // console.log(initData)

        this.formData = initData;
      },
      onOk() {
        this.$refs.formCoupon.validate(valid => {
          if (!valid) {
            this.posting = false;
            this.$nextTick(() => {
              this.posting = true;
            });
          } else {
            this.saveData(this.formData);
          }
        });
      },
      getCheckBox() { // checkbox勾选取消的监测
        let arr = [];
        for (let i = 0; i < this.formData.skupAllowTypeLabel.length; i++) {
          let allowType = this.formData.skupAllowTypeLabel[i];
          // console.log(allowType);
          arr.push(allowTypeMap[allowType]);
        }

        // console.log(arr);
        this.formData.skupAllowType = arr.join(',');
      },
      getChannelCheckBox(){
        let arr = [];
        for (let i = 0; i < this.formData.businessClientLabel.length; i++) {
          let businessClientType = this.formData.businessClientLabel[i];
          // console.log(businessClientType);
          arr.push(businessClientTypeMap[businessClientType]);
        }

        // console.log(arr);
        this.formData.businessClient = arr.join(',');
      },
      async saveData(params) {
        if (this.allreadonly) {
          this.visiable = false;
          return;
        }

        const result = await api._post('/ufoPlatform/coupon/updateUserCoupon', {
          uid:params.uid || void 0,
          couponId: params.couponId || void 0,
          couponCode: params.couponCode,
          endTime: params.time[1] ? dayjs(params.time[1]).unix() : void 0,
        });

        if (result.code === 200) {
          this.$Message.success('保存成功');
          this.visiable = false;
          this.$emit('on-created');
        } else {
          result.message && this.$Message.warning(result.message);
          this.posting = false;
          this.$nextTick(() => {
            this.posting = true;
          });
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .form-group {
    width: 100%;
    height: 30px;
    background-color: #f5f7f9;
  }

  .ivu-form-item-label {
    width: 90px !important;
  }

</style>