<!-- 审批操作弹窗 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
const emits = defineEmits(['resetData'])
const dialogVisibleApprove = ref(false)
const form = reactive({
  radio: '',
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
})
// 重置
const resetData = () => {
  form.certificateNo = ''
  form.certificateName = ''
  form.certificateCompany = ''
  form.certificateDate = ''
  form.validDate = ''
}
const initDialog = (row: any) => {
  dialogVisibleApprove.value = true
}
defineExpose({ initDialog })

// 点击保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogVisibleApprove.value = false
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  formEl.resetFields()
  dialogVisibleApprove.value = false
}
</script>

<template>
  <el-dialog v-model="dialogVisibleApprove" title="审批操作" width="30%">
    <el-form
      ref="ruleFormRef" :model="form"
      :rules="rules"
    >
      <el-form-item label="审批意见">
        <!-- <el-input v-model="form.certificateNo" placeholder="证书号" /> -->
        <el-radio-group v-model="form.radio">
          <el-radio :label="1">
            同意
          </el-radio>
          <el-radio :label="2">
            拒绝
          </el-radio>
          <el-radio :label="3">
            驳回
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批结论">
        <el-input
          :rows="4"
          type="textarea"
        />
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label="审批人">
            <el-input disabled value="xxxx" />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="审批时间">
            <el-input disabled value="2020-12-12 00:00:00" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
        <el-button @click="resetForm(ruleFormRef)">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>