<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item label="提醒类型" prop="remindType">
        <a-select
          placeholder="请选择提醒类型"
          v-model="remindType"
          style="width: 100%"
          @change="changeType"
          :disabled="formType == 3 || formType == 2"
        >
          <a-select-option v-for="(d, index) in remindTypeOptions" :key="index" :value="d.value">{{
            d.label
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否启用提醒" prop="enabled">
        <a-select placeholder="请选择是否启用提醒" v-model="form.enabled" :disabled="formType == 3">
          <a-select-option v-for="(d, index) in enabledOptions" :key="index" :value="d.value">{{
            d.label
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="label" prop="threshold">
        <a-input v-model="form.threshold" placeholder="请输入阈值" :disabled="formType == 3" />
      </a-form-model-item>
      <a-form-model-item label="备注" prop="remark">
        <a-input v-model="form.remark" placeholder="请输入内容" type="textarea" allow-clear :disabled="formType == 3" />
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="submitForm" v-if="formType != 3"> 保存 </a-button>
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getRemind, addRemind, updateRemind } from '@/api/clw/remind'
import OpenCabinet from '../../KeyCase/modules/OpenCabinet.vue'

export default {
  name: 'CreateForm',
  props: {
    remindTypeOptions: {
      type: Array,
      required: true,
    },
    enabledOptions: {
      type: Array,
      required: true,
    },
    title: Object,
  },
  components: {},
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        remindType: null,
        remindId: null,
        enabled: null,

        remark: null,

        threshold: null,
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        remindType: [
          {
            required: true,
            message: '请选择提醒类型',
            trigger: 'change',
          },
        ],
        enabled: [{ required: true, message: '是否启用提醒不能为空', trigger: 'change' }],

        threshold: [{ required: true, message: '阈值不能为空', trigger: 'blur' }],
      },
      remindType: '',
      label: '提前提醒时间（天）',
    }
  },
  filters: {},
  created() {},
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    onClose() {
      this.open = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.formType = 1
      this.form = {
        remindType: null,

        enabled: null,

        remark: null,

        threshold: null,
        remindId: null,
      }
      this.remindType = null
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.formType = 1
      this.open = true
      this.formTitle = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate(row, ids) {
      this.reset()
      this.formType = 2
      const remindType = row ? row.remindId : ids
      getRemind(remindType).then((response) => {
        this.form = response.data
        this.remindType = response.data.remindType
        this.open = true
        this.formTitle = '修改'
      })
    },
    handleInfo(row, ids) {
      this.formType = 3
      const remindType = row ? row.remindId : ids
      getRemind(remindType).then((response) => {
        this.form = response.data
        this.remindType = response.data.remindType
        this.open = true
        this.formTitle = '详情'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.formType === 2) {
            updateRemind(this.form)
              .then((response) => {
                this.$message.success('修改成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          } else if (this.formType === 1) {
            addRemind(this.form)
              .then((response) => {
                this.$message.success('新增成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          }
        } else {
          return false
        }
      })
    },
    changeType(val) {
      this.label = this.title[val]
      // if (val == 'INSURANCE' || val == 'DRIVER_LICENSE' || val == 'CHECK_YEAR') {
      //   this.label = '提前提醒时间（天）'
      // }
      // if (val == 'GAS_CARD') {
      //   this.label = '提前提醒余额（元）'
      // }
      this.form.remindType = val
    },
  },
}
</script>
