<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="rules" size="small" label-width="auto">
      <el-form-item label="优惠券标题" prop="couponTitle" class="form-common-input" required>
        <el-input v-model="formData.couponTitle" placeholder="请输入优惠券标题" disabled />
      </el-form-item>
      <el-form-item label="优惠券类型" prop="couponType" class="form-common-input" required>
        <el-select v-model="formData.couponType" placeholder="请选择优惠券类型" disabled>
          <el-option v-for="(item, index) in dict.type.coupon_type2" :key="index" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券分类" prop="categoryName" class="form-common-input" required>
        <el-input v-model="formData.categoryName" placeholder="请输入优惠券分类" disabled />
      </el-form-item>
      <el-form-item label="有效期" style="margin-bottom: 0;">
        <el-row style="width: 688px;">
          <el-col :span="4">
            <el-form-item prop="validityType">
              <el-radio v-model="formData.validityType" label="1">固定日期</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="validityDate" :rules="{
              required: formData.validityType === '1', message: '请选择日期', trigger: ['change', 'blur']
            }">
              <el-date-picker v-model="formData.validityDate" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 400px;" value-format="yyyy-MM-dd"
                :disabled="formData.validityType === '2'">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 688px;">
          <el-col :span="5">
            <el-form-item props="validityType">
              <el-radio v-model="formData.validityType" label="2">领取后当天生效</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="validityNum" :rules="{
              required: formData.validityType === '2', message: '请输入天数', trigger: ['change', 'blur']
            }">
              有效期
              <el-input type="number" v-model.number="formData.validityNum" placeholder="请输入天数" style="width: 200px;"
                :disabled="formData.validityType === '1'" />
              天
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="库存" prop="issued" class="form-common-input" :rules="{
        required: true, message: '请输入库存数', trigger: ['change', 'blur']
      }">
        <el-input type="number" v-model.number="formData.issued" placeholder="请输入库存数" />
      </el-form-item>
      <el-form-item label="领券限制" style="margin-bottom: 0;">
        <el-row style="width: 688px;">
          <el-col :span="12">
            <el-form-item prop="receiveTotalNum" :rules="{
              required: !receiveTotalChecked, message: '请输入', trigger: ['change', 'blur']
            }">
              总共可领取
              <el-input type="number" v-model.number="formData.receiveTotalNum" placeholder="请输入" style="width: 200px;"
                :disabled="receiveTotalChecked" />
              张
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-checkbox v-model="receiveTotalChecked">不限制</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 688px;">
          <el-col :span="12">
            <el-form-item prop="receiveDayNum" :rules="{
              required: !receiveDayChecked, message: '请输入', trigger: ['change', 'blur']
            }">
              每日可领取
              <el-input type="number" v-model.number="formData.receiveDayNum" placeholder="请输入" style="width: 200px;"
                :disabled="receiveDayChecked" />
              张
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-checkbox v-model="receiveDayChecked">不限制</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="适用门店">
        {{ formData.storeName }}
      </el-form-item>
      <el-form-item label="优惠券图片" class="image-url">
        <el-radio-group v-model="formData.url">
          <el-radio
            label="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-1.png">
            <ImagePreview
              src="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-1.png"
              :src-list="['https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-1.png']" />
          </el-radio>
          <el-radio
            label="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-2.png">
            <ImagePreview
              src="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-2.png"
              :src-list="['https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-2.png']" />
          </el-radio>
          <el-radio
            label="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-3.png">
            <ImagePreview
              src="https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-3.png"
              :src-list="['https://scrm-kp-event.crb.cn/links-software-web-file/integralMall/snow-guizhou/1_couponStyle-3.png']" />
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用须知" prop="remarks" class="form-common-input" :rules="{
        required: true, message: '请输入', trigger: ['change', 'blur']
      }">
        <el-input type="textarea" rows="6" v-model="formData.remarks" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="每日发放限制">
        <el-row style="width: 688px;">
          <el-col :span="8">
            <el-form-item prop="grantNum" :rules="{
              required: !grantChecked, message: '请输入', trigger: ['change', 'blur']
            }">
              <el-input type="number" v-model.number="formData.grantNum" placeholder="请输入" style="width: 200px;"
                :disabled="grantChecked" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item>
              <el-checkbox v-model="grantChecked">不限制</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="状态" prop="couponStatus">
        <el-radio-group v-model="formData.couponStatus">
          <el-radio :label="'0'">正常</el-radio>
          <el-radio :label="'1'">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item size="medium">
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { couponDetail, editCoupon } from '@/api/coupon/list.js'
import { deepClone } from '@/utils';

export default {
  name: "CouponEdit",
  dicts: ["coupon_type2"],
  data() {
    return {
      receiveTotalChecked: false,
      receiveDayChecked: false,
      grantChecked: false,
      formData: {},
      rules: {}
    };
  },
  mounted() {
    this.getDetail();
  },
  watch: {
    "formData.validityType": {
      handler(o, v) {
        // if (v === '1') {
        //   this.formData.validityDate = []
        // } else {
        //   this.formData.validityNum = undefined
        // }
      }
    }
  },
  methods: {
    getDetail() {
      couponDetail(this.$route.query.id).then(res => {
        const formData = Object.assign({}, res.data);
        if (formData.validityType === "1") {
          formData.validityDate = [
            formData.validityStartDate,
            formData.validityEndDate
          ];
        }
        else {
          formData.validityDate = [];
        }
        // 总共可领取
        if (formData.receiveTotal === -1) {
          this.receiveTotalChecked = true;
        }
        else {
          this.receiveTotalChecked = false;
          formData.receiveTotalNum = formData.receiveTotal;
        }
        // 每日可领取
        if (formData.receiveDay === -1) {
          this.receiveDayChecked = true;
        }
        else {
          this.receiveDayChecked = false;
          formData.receiveDayNum = formData.receiveDay;
        }
        // 每日发放
        if (formData.grant === -1) {
          this.grantChecked = true;
        }
        else {
          this.grantChecked = false;
          formData.grantNum = formData.grant;
        }
        this.formData = formData;
      });
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {

          const pp = deepClone(this.formData)

          if (pp.validityType === "1") {
            pp.validityStartDate = pp.validityDate[0]
            pp.validityEndDate = pp.validityDate[1]
          }

          if (this.receiveTotalChecked) {
            pp.receiveTotal = -1
          } else {
            pp.receiveTotal = pp.receiveTotalNum
          }

          if (this.receiveDayChecked) {
            pp.receiveDay = -1
          } else {
            pp.receiveDay = pp.receiveDayNum
          }

          if (this.grantChecked) {
            pp.grant = -1
          } else {
            pp.grant = pp.grantNum
          }

          editCoupon(pp).then(res => {
            this.$modal.msgSuccess('优惠券编辑成功')
            this.$tab.closeOpenPage()
            this.$router.push({
              name: 'CouponList',
              params: {
                refreshTable: true
              }
            })
          })
        }
      });

    },
    cancel() {
      this.$tab.closeOpenPage();
      this.$router.push({ name: "CouponList" });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}

.image-url {
  ::v-deep .el-radio__input {
    vertical-align: top;
  }
}
</style>
