<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="优惠券类型" prop="couponType">
        <i-select style="width: 100px;" v-model="formData.couponType" :disabled="readonly">
          <i-option :value="0">请选择</i-option>
          <i-option :value="100">活动券</i-option>
          <i-option :value="110">运费券</i-option>
        </i-select>
      </i-form-item>

      <i-form-item class="form-group" label="基本信息"></i-form-item>
      <i-form-item label="Token" v-if="couponToken">
        {{couponToken}}
      </i-form-item>
      <i-form-item label="名称" prop="couponName">
        <i-input placeholder="名称建议30字以内" v-model="formData.couponName" :disabled="allreadonly" style="width: 200px"></i-input>
      </i-form-item>
      <i-form-item label="数量" prop="couponNum">
        <i-input-number placeholder="数量" v-model="formData.couponNum" :disabled="allreadonly" style="width: 100px;"></i-input-number>
      </i-form-item>
      <i-form-item label="使用次数" prop="useNum">
        <i-input placeholder="使用次数" v-model="formData.useNum" disabled style="width: 100px;"></i-input>
      </i-form-item>
      <i-form-item label="使用期限" prop="time">
        <i-date-picker type="datetimerange" v-model="formData.time" :disabled="readonly" placeholder="使用期限" format="yyyy-MM-dd HH:mm:ss" style="width: 250px"></i-date-picker>
      </i-form-item>
      <i-form-item label="优惠券说明" prop="remark">
        <i-input type="textarea" placeholder="优惠券使用条件简介" :disabled="allreadonly" v-model="formData.remark"></i-input>
      </i-form-item>
      <i-form-item class="form-group" label="使用条件"></i-form-item>
      <i-form-item label="优惠条件" prop="useLimitType" style="display: inline-block; width: 100%">
        <i-select style="width: 100px" :disabled="readonly" v-model="formData.useLimitType">
          <i-option :value="0">无限制</i-option>
          <i-option :value="2">金额</i-option>
        </i-select>
        <div style="display: inline-block" v-if="formData.useLimitType === 2">
          &nbsp;
          金额满：
          <i-input-number style="width: 100px" :disabled="readonly" placeholder="限制金额" v-model="formData.useLimitValue">
          </i-input-number>
        </div>
      </i-form-item>
      <i-form-item label="优惠金额" prop="couponAmount">
        <i-input-number placeholder="优惠金额" :disabled="readonly" v-model="formData.couponAmount" style="width: 100px">
        </i-input-number>
      </i-form-item>

      <i-form-item label="适用范围" prop="productLimitType">
        <i-select style="width: 100px;" v-model="formData.productLimitType" :disabled="readonly">
          <i-option :value="1">指定商品</i-option>
          <i-option :value="2">全部商品</i-option>
          <i-option :value="3">排除商品</i-option>
        </i-select>
      </i-form-item>

      <i-form-item prop="productLimitValue" v-if="formData.productLimitType === 1 || formData.productLimitType === 3">
        <i-input type="textarea" :disabled="readonly" placeholder="填写商品编码，多个商品编码用英文逗号分隔" v-model="formData.productLimitValue"></i-input>
        <i-poptip trigger="hover">
          <div slot="content">
            <p>1.上传文件必须是xlsx文件</p>
            <p>2.第一行标题栏：商品编码</p>
            <p>3.<a href="javascript:;" @click="onExample">下载样例</a></p>
          </div>
          <i-upload action="" :format="['xlsx']" :max-size="1024" :before-upload="onBeforeUpload">
            <i-button type="success" size="small" :disabled="readonly">导入</i-button>
            <p>{{uploadTxt}}</p>
          </i-upload>
        </i-poptip>
      </i-form-item>
      <!--<i-form-item label="禁用商品类型">
        <checkbox-group v-model="formData.skupForbidTypeLable" @on-change="getCheckBox">
          <checkbox label="现货" :disabled="readonly"></checkbox>
          <checkbox label="预售" :disabled="readonly"></checkbox>
          <checkbox label="二手" :disabled="readonly"></checkbox>
          <checkbox label="全新瑕疵" :disabled="readonly"></checkbox>
          <checkbox label="闪购" :disabled="readonly"></checkbox>
        </checkbox-group>
      </i-form-item>-->
      <i-form-item label="可用商品类型">
        <checkbox-group v-model="formData.skupAllowTypeLabel" @on-change="getCheckBox">
          <!--          <checkbox label="线下店订单" :disabled="readonly"></checkbox>-->
          <checkbox label="极速发货" :disabled="readonly"></checkbox>
          <checkbox label="极速寄存" :disabled="readonly"></checkbox>
          <checkbox label="预售" :disabled="readonly"></checkbox>
          <checkbox label="瑕疵" :disabled="readonly"></checkbox>
          <checkbox label="二手" :disabled="readonly"></checkbox>
          <!--          <checkbox label="鉴定" :disabled="readonly"></checkbox>-->
          <checkbox label="海外直邮" :disabled="readonly"></checkbox>
          <checkbox label="现货发货" :disabled="readonly"></checkbox>
          <checkbox label="现货寄存" :disabled="readonly"></checkbox>
          <checkbox label="闪购发货" :disabled="readonly"></checkbox>
          <checkbox label="闪购寄存" :disabled="readonly"></checkbox>
        </checkbox-group>
      </i-form-item>

      <i-form-item label="购买渠道" prop="useLimitType">
        <checkbox-group v-model="formData.businessClientLabel" @on-change="getChannelCheckBox">
          <checkbox label="UFO" :disabled="readonly"></checkbox>
          <checkbox label="闲鱼" :disabled="readonly"></checkbox>
        </checkbox-group>
      </i-form-item>
    </i-form>
  </i-modal>
</template>

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

  const api = new Api();
  const forbidenTypeMap = {
    '现货': 1,
    '预售': 4,
    '二手': 6,
    '全新瑕疵': 5,
    '闪购': 3
  };
  const forbidenLabelMap = {
    1: '现货',
    4: '预售',
    6: '二手',
    5: '全新瑕疵',
    3: '闪购'
  };

  const allowTypeMap = {
    // '线下店订单': '2',
    '极速发货': '9-N',
    '极速寄存': '9-Y',
    '预售': '4',
    '瑕疵': '5',
    '二手' : '6',
    // '鉴定': '8',
    '海外直邮': '17',
    '现货发货': '1-N',
    '现货寄存': '1-Y',
    '闪购发货': '3-N',
    '闪购寄存': '3-Y'
  };
  const allowLabelMap = {
    // '2': '线下店订单',
    '9-N': '极速发货',
    '9-Y': '极速寄存',
    '4': '预售',
    '5': '瑕疵',
    '6': '二手',
    // '8': '鉴定',
    '17': '海外直邮',
    '1-N': '现货发货',
    '1-Y': '现货寄存',
    '3-N': '闪购发货',
    '3-Y':'闪购寄存'
  };
const businessClientTypeMap = {
    'UFO': 'ufo',
    '闲鱼': 'h5/xianyu'
  };
  const businessClientLabelMap = {
    'ufo': 'UFO',
    'h5/xianyu': '闲鱼',
  };

  export default {
    components: {},
    name: 'ModalCreateCoupon',
    data() {
      return {
        readonly: false,
        allreadonly: false,
        visiable: false,
        loading: false,
        posting: true,
        uploadTxt: '',
        couponToken: '',
        formData: {
          id: 0,
          couponName: '',
          couponType: 0,
          couponNum: 0,
          useNum: 1,
          couponAmount: 0,
          useLimitType: 0,
          remark: '',
          productLimitType: 2,
          productLimitValue: '',
          useLimitValue: 0,
          time: ['', ''],
//        skupForbidTypeLable:[],
//        skupForbidType: ''
          skupAllowTypeLabel: [],
          skupAllowType: '',
          businessClient: ''
        },
        ruleValidate: {
          couponType: {required: true, validator: (rule, value, callback) => {
              if (value === 0 || value === '0') {
                callback(new Error('请选择优惠券类型'));
              } else {
                callback();
              }
            }},
          couponName: {required: true, max: 30, message: '请输入名称'},
          couponNum: {type: 'number', required: true, min: 1, message: '请输入数量'},
          couponAmount: {type: 'number', required: true, min: 1, message: '请输入优惠金额'},
          time: {required: true, validator: (rule, value, callback) => {
              if (value.some(v => !v)) {
                callback(new Error('请选择使用期限'));
              } else {
                callback();
              }
            }},
          remark: {required: true, message: '请输入优惠券说明'},
          useLimitType: {required: true, validator: (rule, value, callback) => {
              if (value >= 0) {
                if (value === 2) {
                  if (parseInt(this.formData.useLimitValue) > 0) {
                    callback();
                  } else {
                    callback(new Error('请输入限制金额'));
                  }
                } else {
                  callback();
                }
              } else {
                callback(new Error('请选择优惠条件'));
              }
            }},
          productLimitValue: {required: false, validator: (rule, value, callback) => {
              const ids = (value || '').split(',');

              if (!value || !ids.length) {
                callback(new Error('请输入适用范围'));
              } else if(ids.some(id => id ? !parseInt(id) : false)) {
                callback(new Error('适用范围格式错误'));
              } else {
                callback();
              }
            }},
          productLimitType: {required: true, validator: (rule, value, callback) => {
              if (value === 1 || value === 2 || value === 3) {
                callback();
              } else {
                callback(new Error('请选择类型'));
              }
            }}
        }
      };
    },
    methods: {
      async show(id, readonly, allreadonly) {
        this.readonly = readonly;
        this.allreadonly = allreadonly;
        this.posting = this.visiable = true;
        this.$refs.formCoupon.resetFields();
        this.couponToken = '';
        let initData = {
          id: 0,
          couponName: '',
          couponNum: 0,
          couponType: 0,
          useNum: 1,
          couponAmount: 0,
          useLimitType: 0,
          remark: '',
          productLimitValue: '',
          productLimitType: 2,
          useLimitValue: 0,
          time: ['', ''],
          skupAllowTypeLabel: [],
          skupAllowType: '',
          businessClientLabel: [],
          businessClient: ''
//        skupForbidTypeLable:[],
//        skupForbidType: ''
        };

        if (id) {
          this.loading = true;
          const result = await api._get('/ufoPlatform/coupon/getCouponInfo', {
            id
          });

          // console.log(result);

          this.loading = false;

          if (result.code === 200) {
            const coupon = result.data.coupon;
            const productLimits = result.data.productLimits;

            this.couponToken = coupon.couponToken;
            let skupAllowTypeLabel = [];
            if (coupon.skupAllowType) {
              let arr = coupon.skupAllowType.split(',');
              for(let i = 0; i < arr.length; i++) {
                skupAllowTypeLabel.push(allowLabelMap[arr[i]]);
              }
            }

            let businessClientTypeLabel = [];
            if (coupon.businessClient) {
              let arr = coupon.businessClient.split(',');
              for(let i = 0; i < arr.length; i++) {
                businessClientTypeLabel.push(businessClientLabelMap[arr[i]]);
              }
            }
            initData = {
              id,
              couponName: coupon.couponName,
              couponNum: coupon.couponNum,
              couponType: coupon.couponType || 0,
              useNum: coupon.useNum,
              couponAmount: coupon.couponAmount,
              useLimitType: coupon.useLimitType,
              remark: coupon.remark,
              productLimitType: coupon.productLimitType,
              productLimitValue: (productLimits || []).map(i => i.productId).join(','),
              useLimitValue: coupon.useLimitValue,
              time: [dayjs.unix(coupon.startTime).format('YYYY-MM-DD HH:mm:ss'), dayjs.unix(coupon.endTime).format('YYYY-MM-DD HH:mm:ss')],
              skupAllowTypeLabel: skupAllowTypeLabel,
              skupAllowType: coupon.skupAllowType,
              businessClientLabel: businessClientTypeLabel,
              businessClient: coupon.businessClient  //购买渠道
            };
          } else {
            result.message && this.$Message.warning(result.message);
          }
        }
        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/saveOrUpdateCoupon', {
          id: params.id || void 0,
          couponName: params.couponName,
          couponAmount: params.couponAmount,
          couponNum: params.couponNum,
          couponType: params.couponType,
          useNum: params.useNum,
          useLimitValue: params.useLimitValue,
          productLimitType: params.productLimitType,
          productLimitValue: params.productLimitValue,
          remark: params.remark,
          useLimitType: parseInt(params.useLimitType) >= 0 ? params.useLimitType : void 0,
          startTime: params.time[0] ? dayjs(params.time[0]).unix() : void 0,
          endTime: params.time[1] ? dayjs(params.time[1]).unix() : void 0,
          skupAllowType: params.skupAllowType,
          businessClient: params.businessClient,
        });

        console.log('result=', result);

        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;
          });
        }
      },
      onBeforeUpload(file) {
        const fileExt = file.name.split('.').pop().toLocaleLowerCase();
        console.log(fileExt)
        if (fileExt !== 'xlsx') {
          this.$Message.warning('文件格式错误');
          return false;
        }
        if (file.size > 1024 * 1024) {
          this.$Message.warning('文件大小超过1M');
          return false;
        }
        const reader = new FileReader();

        reader.readAsArrayBuffer(file);
        reader.onloadstart = () => {
          this.uploadTxt = '开始读取';
        };
        reader.onprogress = e => {
          this.uploadTxt = `进度：${Math.round(e.loaded / e.total * 100)}...`;
        };
        reader.onerror = () => {
          this.uploadTxt = '文件读取出错';
        };
        reader.onload = e => {
          this.uploadTxt = '';
          try {
            const data = e.target.result;
            const workbook = XLSX.read(data, { type: 'array' });
            const firstSheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheetName];
            const results = XLSX.utils.sheet_to_json(worksheet);

            this.formData.productLimitValue = results.map(r => r['商品编码']).filter(r => r).join(',');

          } catch (error) {
            this.uploadTxt = '文件解析失败，请按照格式上传';
          }


        };
        return false;
      },
      onExample() {
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.json_to_sheet([{
          '商品编码': '123456'
        }]);
        XLSX.utils.book_append_sheet(wb, ws, '优惠券适用范围示例');
        XLSX.writeFile(wb, '优惠券适用范围示例.xlsx');
      }
    }
  };
</script>

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

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

</style>