<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 18:16:42
 * @Description: 系统字典-新增编辑字典
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <Drawer
    :drawer-visible="drawerVisible"
    width="480"
    :title="title"
    :loading="submitLoading"
    confirm-btn-text="保存"
    :cancel-btn="false"
    @confirm="handleConfirm"
    @close="close"
  >
    <t-form ref="formRef" label-align="top" class="login-form" :rules="rules" :data="formData">
      <t-form-item label="字典大类" name="categoryId">
        <t-select v-model="formData.categoryId" filterable clearable>
          <t-option v-for="v in dictCateItems" :key="v.categoryId" :label="v.categoryName" :value="v.categoryId" />
        </t-select>
      </t-form-item>
      <t-form-item label="字典名称" name="dictName">
        <t-input maxlength="20" v-model="formData.dictName" placeholder="请输入字典名称"> </t-input>
      </t-form-item>
      <t-form-item label="字典编码" name="dictCode">
        <t-input maxlength="50" v-model="formData.dictCode" placeholder="请输入字典编码"> </t-input>
      </t-form-item>
      <t-form-item label="字典属性">
        <div class="flex-col mt-[16px]">
          <div class="flex">
            <span class="mr-[24px] text-[var(--td-font-gray-1)]">编辑</span>
            <t-radio-group v-model="formData.isAllowEdit">
              <t-radio :value="1">允许编辑</t-radio>
              <t-radio :value="0">不允许编辑</t-radio>
            </t-radio-group>
          </div>
          <div class="flex my-[16px]">
            <span class="mr-[24px] text-[var(--td-font-gray-1)]">子集</span>
            <t-radio-group v-model="formData.isAllowAddsub">
              <t-radio :value="1">允许添加子集</t-radio>
              <t-radio :value="0">不允许添加子集</t-radio>
            </t-radio-group>
          </div>
          <div class="flex">
            <span class="mr-[24px] text-[var(--td-font-gray-1)]"> 删除</span>
            <t-radio-group v-model="formData.isAllowDelete">
              <t-radio :value="1">允许删除</t-radio>
              <t-radio :value="0">不允许删除</t-radio>
            </t-radio-group>
          </div>
        </div>
      </t-form-item>

      <t-form-item label="字典说明" name="remark">
        <t-textarea :maxlength="200" v-model="formData.remark" placeholder="请输入字典说明"> </t-textarea>
      </t-form-item>
    </t-form>
  </Drawer>
</template>

<script setup lang="ts" name="dictionary-edit">
import { FormProps, FormInstanceFunctions } from 'tdesign-vue-next'
import { ReqSaveDictionary, ResDictionary, ResDictionaryCategory } from '@/api/interface/dectionory'
import { postEditDictionary, postSaveDictionary, getGetDictCateItem } from '@/api/modules/dectionory'

const drawerVisible = ref(false)
const submitLoading = ref(false)

const formRef = useTemplateRef<FormInstanceFunctions>('formRef')
const formData = reactive<ReqSaveDictionary>({
  dictCode: '',
  dictId: '',
  remark: '',
  valueName: '',
  categoryId: '',
  dictName: '',
  isAllowAddsub: 1,
  isAllowDelete: 1,
  isAllowEdit: 1
})

const rules: FormProps['rules'] = {
  dictName: [
    {
      required: true,
      message: '请填写字典名称！',
      trigger: 'blur'
    }
  ],
  dictCode: [
    {
      required: true,
      message: '请填写字典编码！',
      trigger: 'blur'
    }
  ],
  categoryId: [
    {
      required: true,
      message: '请选择字典大类！',
      trigger: 'change'
    }
  ]
}

const title = ref('新增字典')
const open = (val: ResDictionary) => {
  drawerVisible.value = true
  if (val) {
    title.value = '编辑字典'
    for (const key in formData) {
      if (Object.prototype.hasOwnProperty.call(val, key)) {
        ;(formData as any)[key] = val[key] // 使用类型断言
      }

      if (key === 'isAllowAddsub' || key === 'isAllowDelete' || key === 'isAllowEdit') {
        formData[key] = val[key] ? 1 : 0
      }
    }
  } else {
    title.value = '新增字典'
  }
}
const close = () => {
  drawerVisible.value = false
  formData.dictId = ''
  formRef.value?.reset()
}

// 获取字典大类
const dictCateItems = ref<ResDictionaryCategory[]>()
const GetDictCateItem = () => {
  getGetDictCateItem().then(res => {
    dictCateItems.value = res.data
  })
}

// 保存
const handleConfirm = () => {
  formRef.value?.validate().then(val => {
    if (val === true) {
      submitLoading.value = true
      const sumit = formData.dictId ? postEditDictionary : postSaveDictionary
      sumit(formData)
        .then(() => {
          emit('success')
          close()
        })
        .finally(() => {
          submitLoading.value = false
        })
    }
  })
}

onMounted(() => {
  GetDictCateItem()
})

const emit = defineEmits<{
  success: []
}>()

defineExpose({
  open,
  close
})
</script>

<style lang="less" scoped>
:deep(.t-radio__label) {
  color: var(--td-font-gray-2);
}
</style>
