<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle"
             v-bind="dialogSmall" @close="close">
    <div>
      <el-form :model="formContent" ref="dialogFormRef" :rules="rules">
        <el-form-item label="字典类型" :label-width="100">
          <el-input :value="dictTypeName" disabled/>
        </el-form-item>
        <el-form-item label="名称" :label-width="100" prop="name">
          <el-input v-model="formContent.name" placeholder="请输入" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="编码" :label-width="100" prop="code">
          <el-input v-model="formContent.code" placeholder="请输入" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="值" :label-width="100" prop="dictValue">
          <el-input v-model="formContent.dictValue" placeholder="请输入" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="事件等级" :label-width="100" prop="level">
          <el-select v-model.number="formContent.level">
            <el-option label="普通" :value="0"/>
            <el-option label="中等" :value="1"/>
            <el-option label="严重" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" :label-width="100">
          <el-input-number v-model="formContent.sort" :min='1' :max='999'/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="tsx" setup>
import {dialogSmall} from "@/utils/elementBind";
import {addDictData, updateDictData} from "@/api/system/dictionary/dictData";
import {Dict} from "@/api/system/dictionary/interface";
import {ElMessage, FormItemRule} from "element-plus";
import type {Ref} from "vue";

const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
  name: [{required: true, message: '类型名称必填！', trigger: 'blur'}],
  code: [{required: true, message: '类型编码必填！', trigger: 'blur'}],
})

const dialogFormRef = ref()
const {dialogVisible, titleType, formContent, dictTypeName} = useMetaInfo();

function useMetaInfo() {
  const dialogVisible = ref(false)
  const titleType = ref('add')
  const dictTypeName = ref('')

  const formContent = ref<Dict.ResDictData>({
    id: "",
    typeId: "",
    name: "",
    code: "",
    value: "",
    dictValue: "",
    level: 0,
    sort: 100,
    state: 1,
  })

  return {dialogVisible, titleType, formContent, dictTypeName};
}

let dialogTitle = computed(() => {
  return titleType.value === 'add' ? '新增字典数据' : '编辑字典数据'
})

const resetFormContent = () => {
  formContent.value = {
    id: "",
    typeId: "",
    name: "",
    code: "",
    value: "",
    dictValue: "",
    level: 0,
    sort: 100,
    state: 1,
  }
}

const close = () => {
  dialogVisible.value = false
  resetFormContent()
  dialogFormRef.value?.resetFields()
}
const open = (sign: string, typeId: string, name: string, data: Dict.ResDictData) => {
  resetFormContent()

  titleType.value = sign
  formContent.value.typeId = typeId
  dictTypeName.value = name
  dialogVisible.value = true
  if (data.id) {
    formContent.value = {...data}
    formContent.value.dictValue = data.value
  }
}

const save = () => {
  try {
    dialogFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        formContent.value.value = formContent.value.dictValue
        if (formContent.value.id) {
          await updateDictData(formContent.value)
        } else {
          await addDictData(formContent.value)
        }
        ElMessage.success({message: `${dialogTitle.value}成功！`})
        close()
        await props.refreshTable!()
      }
    })
  } catch (err) {
    console.error('验证过程中出现错误', err)
  }
}

// 对外映射
defineExpose({open})
const props = defineProps<{
  refreshTable: (() => Promise<void>) | undefined;
}>()
</script>