<template>
  <el-dialog v-model="showDialog" title="审核不通过" width="700" class="add-team-dialog" @close="clearData">
    <p style="margin: 15px 0">审核不通过的记录，需要填写驳回原因 </p>
    <el-form label-width="auto" :model="formData" ref="ruleFormRef" :rules="rules">
      <el-form-item label="" prop="refuseReason">
        <el-input
          v-model="formData.refuseReason"
          placeholder="请填写驳回审批原因"
          type="textarea"
          show-word-limit
          :rows="7"
          size="large"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
        <el-button @click="showDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import type { FormInstance, FormRules } from 'element-plus';

  const emit = defineEmits<{ (e: 'submit', formData: {}) }>();
  const submitLoading = ref(false);
  const showDialog = ref(false);
  const formData = reactive<any>({
    refuseReason: '',
  });
  const ruleFormRef = ref<FormInstance>();
  const rules = ref({
    refuseReason: [{ required: true, message: '请填写驳回审批原因' }],
  });

  function dialogShow() {
    showDialog.value = true;
  }
  function dialogHide() {
    showDialog.value = false;
  }
  function clearData() {
    ruleFormRef.value?.resetFields();
    Object.assign(formData, {
      refuseReason: '',
    });
  }

  async function submitForm() {
    await ruleFormRef.value!.validate((valid) => {
      if (valid) {
        emit('submit', formData);
        // showDialog.value = false;
      }
    });
  }

  defineExpose({
    submitLoading,
    dialogShow,
    dialogHide,
  });
</script>

<style scoped lang="scss"></style>
<style>
  .add-team-dialog {
    min-height: 0;
  }
</style>
