<!-- 审批操作弹窗 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
const emits = defineEmits(['resetData'])
const userInfo = useUserStore()
const dialogVisibleApprove = ref(false)
const form = reactive({
  radio: '1',
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
})
// 重置
const resetData = () => {
  form.certificateNo = ''
  form.certificateName = ''
  form.certificateCompany = ''
  form.certificateDate = ''
  form.validDate = ''
}
const approvetime = ref('') // 审批时间
const initDialog = (row: any) => {
  dialogVisibleApprove.value = true
  approvetime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  form.radio = row.radio
}
defineExpose({ initDialog })

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

<template>
  <el-dialog v-model="dialogVisibleApprove" title="审批操作" width="50%">
    <el-form
      ref="ruleFormRef" :model="form"
      :rules="rules" label-width="110px"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="审批意见">
            <el-radio-group v-model="form.radio" style="width: 100%;">
              <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-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="审批结论">
            <el-input
              :rows="4"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="审批人">
            <el-input disabled :value="userInfo.$state.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批时间">
            <el-input disabled :value="approvetime" />
          </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>