<template>
  <admin-modal
    width="40%"
    :title="type"
    :visible.sync="voidVisible"
    :loading="voidLoading"
    @on-cancel="handleVoidCancel"
    @on-confirm="handleVoidConfirm"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      <a-form-model-item v-if="type === '作废原因'" prop="workDeleteReason">
        <a-textarea
          v-model="form.workDeleteReason"
          :auto-size="{ minRows: 2, maxRows: 6 }"
          :placeholder="`请输入${type}`"
        />
      </a-form-model-item>

      <a-form-model-item v-else-if="type === '撤销原因'" prop="workCancelReason">
        <a-textarea
          v-model="form.workCancelReason"
          :auto-size="{ minRows: 2, maxRows: 6 }"
          :placeholder="`请输入${type}`"
        />
      </a-form-model-item>

      <a-form-model-item v-else prop="workRejectReason">
        <a-textarea
          v-model="form.workRejectReason"
          :auto-size="{ minRows: 2, maxRows: 6 }"
          :placeholder="`请输入${type}`"
        />
      </a-form-model-item>
    </a-form-model>
  </admin-modal>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      voidLoading: false,
      voidVisible: false,
      form: {},
      rules: {
        workDeleteReason: [{ required: true, message: `请输入${this.type}`, trigger: 'blur' }],
        workCancelReason: [{ required: true, message: `请输入${this.type}`, trigger: 'blur' }],
        workRejectReason: [{ required: true, message: `请输入${this.type}`, trigger: 'blur' }]
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 函数方法 - 点击等操作执行的方法
  methods: {
    openModal(id) {
      this.voidVisible = true
      this.$set(this.form, 'id', id)
      switch (this.type) {
        case '作废原因':
          this.$set(this.form, 'workDeleteReason', '')
          break
        case '撤销原因':
          this.$set(this.form, 'workCancelReason', '')
          break
        case '拒绝原因':
          this.$set(this.form, 'workRejectReason', '')
          break
      }
    },
    handleVoidCancel() {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
      this.voidVisible = false
    },
    handleVoidConfirm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('confirm', this.form)
          this.voidVisible = false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
::v-deep .ant-form-item {
  margin-bottom: 0 !important;
}
</style>
