<template>
    <el-dialog
      :title="isEditing ? '编辑字典项' : '添加字典项'"
      v-model="visible"
      width="600px"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form
        :model="dictItemForm"
        :rules="formRules"
        ref="dictItemFormRef"
        label-width="100px"
      >
        <el-form-item label="字典类型" prop="dict_type_id">
          <el-input
            :value="dictTypeDisplayName"
            disabled
            style="width: 100%"
          />
          <div class="form-tip">当前字典类型：{{ dictTypeDisplayName }}</div>
        </el-form-item>
        <el-form-item label="字典标签" prop="dict_label">
          <el-input
            v-model="dictItemForm.dict_label"
            placeholder="请输入字典标签（显示值）"
          />
        </el-form-item>
        <el-form-item label="字典值" prop="dict_value">
          <el-input
            v-model="dictItemForm.dict_value"
            placeholder="请输入字典值（存储值）"
          />
        </el-form-item>
        <el-form-item label="父级字典项" prop="parent_id">
          <el-select
            v-model="dictItemForm.parent_id"
            placeholder="选择父级字典项（可选）"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="item in parentDictItems"
              :key="item.id"
              :label="item.dict_label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dictItemForm.status">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="dictItemForm.sort"
            :min="0"
            style="width: 100%"
            placeholder="数字越小越靠前"
          />
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-input
            v-model="dictItemForm.color"
            placeholder="请输入颜色值（如：#FF0000 或 red）"
          >
            <template #append>
              <el-color-picker
                v-model="dictItemForm.color"
                :predefine="predefineColors"
              />
            </template>
          </el-input>
          <div class="form-tip">支持十六进制颜色值（如：#FF0000）或颜色名称（如：red）</div>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input
            v-model="dictItemForm.icon"
            placeholder="请输入图标（如：✓、✗、⭐）"
          />
          <div class="form-tip">支持emoji或图标字符</div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="dictItemForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          保存
        </el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, watch, computed } from 'vue';
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
  import { addDictItem, updateDictItem, getDictItems } from '@/api/dict';
  
  interface Props {
    modelValue: boolean;
    dictItem?: any;
    dictTypeId?: number;
    dictTypeName?: string;
  }
  
  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    dictItem: null,
    dictTypeId: undefined,
    dictTypeName: '',
  });
  
  const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    success: [];
  }>();
  
  const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
  });
  
  const submitting = ref(false);
  const dictItemFormRef = ref<FormInstance>();
  const parentDictItems = ref<any[]>([]);
  
  // 预定义颜色
  const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    '#ff0000',
    '#00ff00',
    '#0000ff',
  ];
  
  // 判断是否为编辑模式
  const isEditing = computed(() => {
    return !!(props.dictItem && props.dictItem.id);
  });
  
  // 表单数据
  const dictItemForm = reactive({
    id: null as number | null,
    dict_type_id: 0,
    dict_label: '',
    dict_value: '',
    parent_id: 0,
    status: 1,
    sort: 0,
    color: '',
    icon: '',
    remark: '',
  });
  
  // 表单验证规则
  const formRules: FormRules = {
    dict_label: [
      { required: true, message: '请输入字典标签', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' },
    ],
    dict_value: [
      { required: true, message: '请输入字典值', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' },
    ],
    sort: [
      { required: true, message: '请输入排序', trigger: 'blur' },
      { type: 'number', min: 0, message: '排序必须大于等于 0', trigger: 'blur' },
    ],
    color: [
      { max: 20, message: '颜色值长度不能超过 20 个字符', trigger: 'blur' },
    ],
    icon: [
      { max: 50, message: '图标长度不能超过 50 个字符', trigger: 'blur' },
    ],
    remark: [
      { max: 500, message: '备注长度不能超过 500 个字符', trigger: 'blur' },
    ],
  };
  
  // 获取父级字典项列表（排除自己）
  async function fetchParentDictItems() {
    if (!props.dictTypeId) return;
    try {
      const res = await getDictItems({ dict_type_id: props.dictTypeId });
      if (res.success && res.data) {
        // 如果是编辑模式，排除当前字典项
        if (isEditing.value && props.dictItem) {
          parentDictItems.value = res.data.filter(
            (item: any) => item.id !== props.dictItem.id
          );
        } else {
          parentDictItems.value = res.data;
        }
      }
    } catch (error) {
      console.error('获取父级字典项失败:', error);
    }
  }
  
  // 计算字典类型显示名称
  const dictTypeDisplayName = computed(() => {
    if (props.dictTypeName) {
      return props.dictTypeName;
    }
    if (props.dictTypeId) {
      return `字典类型 ID: ${props.dictTypeId}`;
    }
    return '未知字典类型';
  });
  
  // 监听 dictItem 变化，填充表单数据
  watch(
    () => props.dictItem,
    (newDictItem) => {
      if (newDictItem) {
        dictItemForm.id = newDictItem.id || null;
        dictItemForm.dict_type_id = newDictItem.dict_type_id || props.dictTypeId || 0;
        dictItemForm.dict_label = newDictItem.dict_label || '';
        dictItemForm.dict_value = newDictItem.dict_value || '';
        dictItemForm.parent_id = newDictItem.parent_id || 0;
        dictItemForm.status = newDictItem.status !== undefined ? newDictItem.status : 1;
        dictItemForm.sort = newDictItem.sort || 0;
        dictItemForm.color = newDictItem.color || '';
        dictItemForm.icon = newDictItem.icon || '';
        dictItemForm.remark = newDictItem.remark || '';
      } else {
        resetForm();
      }
    },
    { immediate: true }
  );
  
  // 监听弹窗打开，获取父级字典项
  watch(visible, (val) => {
    if (val) {
      if (props.dictTypeId) {
        dictItemForm.dict_type_id = props.dictTypeId;
      }
      fetchParentDictItems();
    }
  });
  
  // 重置表单
  function resetForm() {
    dictItemForm.id = null;
    dictItemForm.dict_type_id = props.dictTypeId || 0;
    dictItemForm.dict_label = '';
    dictItemForm.dict_value = '';
    dictItemForm.parent_id = 0;
    dictItemForm.status = 1;
    dictItemForm.sort = 0;
    dictItemForm.color = '';
    dictItemForm.icon = '';
    dictItemForm.remark = '';
    dictItemFormRef.value?.clearValidate();
  }
  
  // 关闭对话框
  function handleClose() {
    visible.value = false;
    resetForm();
  }
  
  // 提交表单
  async function handleSubmit() {
    if (!dictItemFormRef.value) return;
  
    try {
      await dictItemFormRef.value.validate();
    } catch (error) {
      return;
    }
  
    if (!dictItemForm.dict_type_id) {
      ElMessage.error('字典类型ID不能为空');
      return;
    }
  
    submitting.value = true;
    try {
      const submitData: any = {
        dict_type_id: dictItemForm.dict_type_id,
        dict_label: dictItemForm.dict_label,
        dict_value: dictItemForm.dict_value,
        parent_id: dictItemForm.parent_id || 0,
        status: dictItemForm.status,
        sort: dictItemForm.sort,
        color: dictItemForm.color || '',
        icon: dictItemForm.icon || '',
        remark: dictItemForm.remark || '',
      };
  
      if (isEditing.value) {
        await updateDictItem(dictItemForm.id!, submitData);
        ElMessage.success('字典项更新成功');
      } else {
        await addDictItem(submitData);
        ElMessage.success('字典项添加成功');
      }
  
      emit('success');
      handleClose();
    } catch (error: any) {
      ElMessage.error(error.message || '操作失败，请重试');
    } finally {
      submitting.value = false;
    }
  }
  </script>
  
  <style scoped lang="less">
  .form-tip {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    margin-top: 4px;
    line-height: 1.4;
  }
  </style>
  
  