<!-- 用户导入弹窗 -->
<template>
  <ele-modal
    width="520px"
    title="发送优惠券"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="线索编号:" prop="title">
        <el-input
          :maxlength="60"
          v-model="form.sid"
          placeholder=""
          readonly
        />
      </el-form-item>
      <el-form-item label="用户手机号:" prop="title">
        <el-input
          :maxlength="60"
          v-model="form.mobile"
          placeholder=""
          readonly
        />
      </el-form-item>
      <el-form-item label="品牌:">
        <brand-select
          v-model="brands"
          type="provinceCity"
          :props="{ multiple: false }"
        />
      </el-form-item>
      <el-form-item label="优惠券:" prop="couponId">
        <el-select v-model="form.couponId" filterable clearable>
          <el-option
            v-for="item in couponList"
            :key="item.id"
            :value="item.id"
            :label="item.title"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import { pageCouponList } from '@/api/car/product'
import { sendCoupon } from '@/api/receiver/clues'

import BrandSelect from '@/components/BrandSelect/index.vue'

export default {
  components: { BrandSelect },
  props: {
    // 是否打开弹窗
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    const defaultForm = {
      id: null,
      cityId: '',
      sid: '',
      mobile: '',
      couponId: ''
    }
    return {
      defaultForm,
      editVersion: false,
      form: { ...defaultForm },
      // 表单验证规则
      rules: {
        couponId: [
          {
            required: true,
            message: '请选择优惠券',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      brands: [],
      couponList: [],
    }
  },
  methods: {
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.loading = true
        sendCoupon(this.form).then((msg) => {
          this.$message.success(msg)
          this.updateVisible(false);
        }).catch((e) => {
          this.$message.error(e.message)
        }).finally(() => {
          this.loading = false
        })
      })

    },
    //加载优惠券
    loadCouponList() {
      this.couponList = []
      this.form.couponId = ''
      if (this.brands && this.brands.length > 0) {
        pageCouponList({ brands: this.brands, cityId: this.form.cityId }).then((data) => {
          this.couponList = data
        }).catch((e) => {
          this.$message.error(e.message)
        })
      }
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  },
  watch: {
    visible(visible) {
      this.editVersion = false
      if (visible) {
        this.editVersion = true
        if (this.data) {
          this.$util.assignObject(this.form, {
            ...this.data
          })
        }
      } else {
        this.$refs.form.clearValidate()
        this.form = { ...this.defaultForm }
      }
    },
    brands() {
      this.loadCouponList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
