<template>
  <div class="app-container coupon-add">
    <br>
    <el-row>
      <el-col :span="23">
        <el-form ref="addItem" :model="addData" :rules="rules" label-width="160px">
          <el-form-item label="代金券名称:" prop="title">
            <el-input v-model="addData.title" placeholder="请输入代金券名称" :maxlength="32" show-word-limit />
          </el-form-item>
          <el-form-item label="使用场景:" prop="type">
            <el-radio-group v-model="addData.type">
              <el-radio :label="1">门店消费</el-radio>
              <el-radio :label="2">盲票购买</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="面值:" prop="discount">
            <el-input v-model.number="addData.discount" type="number" placeholder="请输入代金券面值">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="数量:" prop="quantity">
            <el-input v-model.number="addData.quantity" type="number" placeholder="请输入代金券数量">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="图片:" prop="picUrl">
            <Upload :value="addData.picUrl ? [{ fileName: addData.picUrl }] : []" @input="addData.picUrl = $event[0] ? $event[0].fileName : ''" :limit="1" />
          </el-form-item>
          <el-form-item label="门店默认承担比例:" prop="channelSharedRate">
            <el-input v-model.number="addData.channelSharedRate" type="number" placeholder="请输入面值">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="最低消费金额:" prop="minOrderAmt">
            <el-input v-model.number="addData.minOrderAmt" type="number" placeholder="请输入可使用的最低消费金额">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="有效期:" prop="dueDays">
            <el-input v-model.number="addData.dueDays" placeholder="请输入有效期">
              <template slot="prepend">领取之日起</template>
              <template slot="append">天有效</template>
            </el-input>
          </el-form-item>
          <el-form-item label="使用说明:" prop="description">
            <el-input type="textarea" rows="4" v-model="addData.description" placeholder="请输入使用说明 对用户可见"/>
          </el-form-item>
          <el-form-item label="使用范围:" prop="boxIds">
            <el-radio-group v-model="addData.boxIds">
              <el-radio :label="1">进票门店</el-radio>
              <el-radio :label="2">所有盲票</el-radio>
              <el-radio :label="3">制定盲票</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="23" style="text-align: right">
        <el-button type="info" @click="$router.go(-1)">取消</el-button>
        <el-button :loading="addIng" type="primary" @click="update()">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Upload from '@/components/ImageUpload'
import { getCouponDetail, addCoupon } from '@/api/business/coupon'
export default {
  name: 'CouponAdd',
  components: {
    Upload
  },
  data() {
    return {
      id: this.$route.query.id,
      addData: {},
      addIng: false,
      rules: {
        title: [{ required: true, message: '请输入代金券名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入代金券类型', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入代金券类型', trigger: 'blur' }],
        picUrl: [{ required: true, message: '请输入代金券类型', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入代金券面值', trigger: 'blur' }],
        channelSharedRate: [{ required: true, message: '请输入门店默认承担比例', trigger: 'blur' }],
        minOrderAmt: [{ required: true, message: '请输入最低消费金额', trigger: 'blur' }],
        dueDays: [{ required: true, message: '请输入有效期', trigger: 'blur' }],
        description: [{ required: true, message: '请输入使用说明', trigger: 'blur' }],
        boxIds: [{ required: true, message: '请选择使用范围', trigger: 'blur' }]
      }
    }
  },
  created() {
    if (this.id) {
      getCouponDetail(this.id).then(res => {
        this.addData = res.data
      })
    }
  },
  methods: {
    update() {
      this.$refs.addItem.validate((valid, items) => {
        if (valid) {
          this.addIng = true
          addCoupon(this.addData).then(res => {
            this.addIng = false
            if (res.code === 0) {
              this.$message({
                message: this.addData.id ? '修改成功!' : '添加成功!',
                type: 'success'
              })
              this.$router.go(-1)
            }
          }).catch(() => {
            this.addIng = false
          })
        } else {
          if (items && Object.keys(items).length > 0) {
            this.$message({
              message: items[Object.keys(items)[0]][0].message,
              type: 'warning'
            })
          }
        }
      })
    }
  }
}
</script>
