<template>
  <el-dialog title="新增提醒类型" :visible="visible" width="600px" center :before-close="onClose">
    <el-form :model="formData" :disabled="isLoading" ref="formRef" :rules="formRules" label-width="120px">
      <el-form-item label="提醒类型：" prop="name">
        <el-input v-model.trim="formData.name" placeholder="请输入提醒类型" maxlength="10"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="isLoading" @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { saveReminderApi, modifyReminderApi } from '@/api/common/dictManage/reminder'
import { getClientId } from '@/utils/auth'
export default {
  name: 'AddDialog',
  data() {
    return {
      visible: false,
      formData: {
        name: ''
      },
      formRules: {
        name: [
          {
            required: true,
            message: '请输入提醒类型',
            trigger: ['blur', 'change']
          }
        ]
      },
      isLoading: false
    }
  },
  methods: {
    openDialog(initData) {
      if (initData) {
        const { id, name } = initData
        this.formData = {
          id,
          name
        }
      }
      this.visible = true
    },
    onClose() {
      this.formData = {
        name: ''
      }
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate()
      })

      console.log('formData=', this.formData)
      this.visible = false
    },
    onSubmit() {
      this.$refs.formRef.validate(async isValid => {
        if (!isValid) {
          return
        }
        const apiMethod = this.formData.id ? modifyReminderApi : saveReminderApi
        try {
          this.isLoading = true
          await apiMethod({
            ...this.formData,
            clientId: getClientId()
          })
          this.$message.success('操作成功')
          this.onClose()
          this.$emit('onOk')
        } catch (err) {
          console.log(err)
        } finally {
          this.isLoading = false
        }
      })
    }
  }
}
</script>
