<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle"
             v-bind="dialogSmall">
    <div>
      <el-form :model="formContent" ref="dialogFormRef" :rules="rules">
        <el-form-item label="字典类型编码" :label-width="100">
          <el-input :value="dictTypeCode" 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">
          <el-input-number v-model="formContent.sort"/>
        </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 {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'}],
  dictValue: [{required: true, message: '类型值必填！', trigger: 'blur'}],
})

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

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

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

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

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

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

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

  titleType.value = sign
  formContent.value.typeId = typeId
  dictTypeCode.value = code
  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
        console.log(formContent.value)
        if (formContent.value.id) {
          await updateDictData(formContent.value)
        } else {
          await addDictData(formContent.value)
        }
        ElMessage.success({message: `${dialogTitle.value}成功！`})
        close()
        await props.refreshTable!()
      } else {
        ElMessage.error('表单验证失败！')
      }
    })
  } catch (err) {
    console.error('验证过程中出现错误', err)
  }
}

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