<script lang="ts" setup name="DeptDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { getDictByCode } from '@/api/system/dict'
import { editDept } from '@/api/home/result/dept'
// ----------------------- 以下是字段定义 emits props ---------------------
const emits = defineEmits(['closeRefresh'])
const dialogVisible = ref(false)
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
}
const recoRatingList = ref<{ id: string; value: string; name: string }[]>()
// 获取字典
const fetchSelectList = () => {
  getDictByCode('level_code').then((res) => {
    recoRatingList.value = res.data
  })
}
fetchSelectList()
const rowData = ref({})
const defaultFormData = {
  id: '',
  recoRating: '',
}
// 表单数据对象
const formData = reactive({ ...defaultFormData })

// ---------------表单提交--------------------------------
// 表单对象
const dataFormRef = ref<FormInstance>()
// 校验规则
const rules: FormRules = reactive({
  recoRating: [{ required: true, message: '考核等级评定不可为空', trigger: ['blur', 'change'] }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      editDept(formData).then((res) => {
        ElMessage.success('提交成功')
        dialogVisible.value = false
        resetForm()
        emits('closeRefresh')
      })
    }
  })
}
// 重置表单
function resetForm() {
  const form = formData
  const keys = Object.keys(formData)
  keys.forEach((key) => {
    form[key] = defaultFormData[key]
  })
  Object.assign(formData, form)
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}
// ----------初始化、关闭对话框相关-----------------
function initDialog(row: any) {
  dialogVisible.value = true
  resetForm()
  formData.id = row.id
}

// 关闭弹窗
function dialogClose() {
  resetForm()
  dialogVisible.value = false
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑"
    width="50%"
    :before-close="dialogClose"
    append-to-body
    :open-delay="0"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
      size="default" @submit.prevent
    >
      <el-row :gutter="24">
        <el-col :span="24" class="grid-cell">
          <el-form-item label="考核等级评定" prop="recoRating" class="required">
            <el-select v-model.trim="formData.recoRating" placeholder="必选">
              <el-option v-for="item in recoRatingList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(dataFormRef)">
          保存
        </el-button>
        <el-button @click="dialogClose">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-container {
  width: 100%;

  .full-width-input {
    width: 100%;
  }
}
</style>