<template>
  <div class="container">
    <!-- 填写信息 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-form ref="form" :model="form" :rules="rules" label-width="auto" class="form" size="medium">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input v-model.trim="form.couponName" placeholder="优惠券名称"></el-input>
          </el-form-item>
          <el-form-item label="优惠券数量" prop="couponNumber">
            <el-input-number v-model="form.couponNumber" :min="1" :precision="0" label="优惠券数量" style="width:100%"></el-input-number>
          </el-form-item>
          <el-form-item label="优惠方式" prop="couponType">
            <el-radio v-model="form.couponType" :label="0">代金券</el-radio>
            <el-radio v-model="form.couponType" :label="1">折扣券</el-radio>
            <el-radio v-model="form.couponType" :label="2">代扣券</el-radio>
          </el-form-item>
          <el-form-item label="优惠限制" prop="serviceConditions">
            <el-radio v-model="form.serviceConditions" :label="0">满减</el-radio>
            <el-radio v-model="form.serviceConditions" :label="1">没有限制</el-radio>
          </el-form-item>
          <el-form-item v-if="form.serviceConditions===0" prop="fullReductionMoney">
            <amount-input ref="fullReductionMoney" @amount="handleAmount" name="fullReductionMoney" placeholder="满减金额（满多少可以减）"></amount-input>
          </el-form-item>
          <el-form-item label="适用门店" prop="suitableStore">
            <el-radio v-model="form.suitableStore" :label="0">所有门店</el-radio>
            <el-radio v-model="form.suitableStore" :label="1">指定门店</el-radio>
          </el-form-item>
          <el-form-item v-if="form.suitableStore===1" prop="useStoreList">
            <el-button type="primary" size="mini">选择门店</el-button>
          </el-form-item>
          <el-form-item label="适用项目" prop="suitableProject">
            <el-radio v-model="form.suitableProject" :label="0">所有项目</el-radio>
            <el-radio v-model="form.suitableProject" :label="1">指定项目</el-radio>
          </el-form-item>
          <el-form-item v-if="form.suitableProject===1" prop="projectList">
            <el-button type="primary" size="mini">选择项目</el-button>
          </el-form-item>
          <el-form-item label="有效方式" prop="indateType">
            <el-radio v-model="form.indateType" :label="0">领取后多少天</el-radio>
            <el-radio v-model="form.indateType" :label="1">固定日期</el-radio>
          </el-form-item>
          <el-form-item v-if="form.indateType===0" prop="startDay">
            <el-input v-model.trim="form.startDay" placeholder="领取后多少天生效"></el-input>
          </el-form-item>
          <el-form-item v-if="form.indateType===0" prop="endDay">
            <el-input v-model.trim="form.endDay" placeholder="生效后多少天内有效"></el-input>
          </el-form-item>
          <el-form-item v-if="form.indateType===1" prop="startDate">
            <el-date-picker v-model="form.fixDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="截止日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="分享提成规则" prop="shareCommissionRules">
            <el-radio v-model="form.shareCommissionRules" :label="0">固定提成</el-radio>
            <el-radio v-model="form.shareCommissionRules" :label="1">单据金额抽成(%)</el-radio>
          </el-form-item>
          <el-form-item v-if="form.shareCommissionRules===0" prop="fixedAmount">
            <amount-input ref="fixedAmount" @amount="handleAmount" name="fixedAmount" placeholder="固定提成(元)"></amount-input>
          </el-form-item>
          <el-form-item v-if="form.shareCommissionRules===1" prop="orderCommission">
            <amount-input ref="orderCommission" @amount="handleAmount" name="orderCommission" placeholder="单据金额抽成(%)"></amount-input>
          </el-form-item>
          <el-form-item label="活动图片" prop="imageUrl">
            <active-img ref="activeImg" @active-img="handleImage"></active-img>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="box">
          <el-button type="warning" @click="handleNext" size="medium">下一步</el-button>
          <!-- <el-button type="primary" @click="handleNext" size="medium">提交</el-button> -->
          <el-button @click="resetForm" size="medium">重置</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AmountInput from '@/components/AmountInput/index'
import ActiveImg from './activeImg'
export default {
  name: 'Form',
  components: { AmountInput, ActiveImg },
  data() {
    return {
      form: {
        couponNumber: 1,
      },
      rules: {
        couponName: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
        ],
        couponNumber: [
          { required: true, message: '请输入优惠券数量', trigger: 'blur' },
        ],
        serviceConditions: [
          { required: true, message: '请选择优惠限制', trigger: ['blur', 'change'] },
        ],
        couponType: [
          { required: true, message: '请选择优惠方式', trigger: ['blur', 'change'] },
        ],
        fullReductionMoney: [
          { required: true, message: '请输入满减金额', trigger: 'blur' },
        ],
        suitableStore: [
          { required: true, message: '请选择适用门店', trigger: ['blur', 'change'] },
        ],
        suitableProject: [
          { required: true, message: '请选择适用项目', trigger: ['blur', 'change'] },
        ],
        indateType: [
          { required: true, message: '请选择有效方式', trigger: ['blur', 'change'] },
        ],
        startDay: [
          { required: true, message: '请输入多少天', trigger: 'blur' },
        ],
        endDay: [
          { required: true, message: '请输入多少天', trigger: 'blur' },
        ],
        shareCommissionRules: [
          { required: true, message: '请选择分享提成规则', trigger: ['blur', 'change'] },
        ],
        imageUrl: [{ required: true, message: '请上传活动图片', trigger: ['blur', 'change'] }],
      },
    }
  },
  methods: {
    // ============================== 操作 ============================== //
    // 下一步
    handleNext() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('next', 2, this.form)
        } else {
          return false
        }
      })
    },
    // 重置
    resetForm() {
      let form = Object.assign({}, this.form);
      if (form.serviceConditions === 0) {
        this.$refs.fullReductionMoney.reset()
      }
      if (shareCommissionRules === 0) {
        this.$refs.fixedAmount.reset()
      }
      if (shareCommissionRules === 1) {
        this.$refs.orderCommission.reset()
      }
      this.$refs.form.resetFields()
      this.$baseMessage('重置成功', 'success')
    },
    // ============================== 第三方插件方法 ============================== //
    // 选择图片后返回
    handleImage(file) {
      let form = Object.assign({}, this.form);
      form.multipartFile = file
      this.form = Object.assign({}, form);
    },
    // 金额自定义组件返回值
    handleAmount(name, amount) {
      let form = Object.assign({}, this.form)
      form[name] = amount
      this.form = Object.assign({}, form)
    },
    // 发布后清除选择的文件
    handleClear() {
      this.$refs.activeImg.handleClear()
    }
  },
}
</script>
<style scoped>
.container .form {
  width: 500px;
  /* // margin: 0 auto; */
}
.container .box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}
.form .el-form-item {
  margin-bottom: 15px;
}
</style>
