<template>
  <div class="data-dictionary-container">
    <el-row :gutter="20">
      <!-- Left Panel: Dict Types -->
      <el-col :span="10">
        <vab-card title="字典类型">
          <template #extra>
            <el-button type="primary" size="small" @click="handleAddType">
              <vab-icon icon="add-line" /> 新增
            </el-button>
          </template>
          
          <el-table
            v-loading="typeLoading"
            :data="typeList"
            border
            stripe
            highlight-current-row
            @current-change="handleTypeChange"
          >
            <el-table-column prop="name" label="字典名称" />
            <el-table-column prop="type" label="字典类型" show-overflow-tooltip />
            <el-table-column label="操作" width="120" align="center">
              <template #default="{ row }">
                <el-button type="text" @click.stop="handleEditType(row)">编辑</el-button>
                <el-button type="text" class="text-danger" @click.stop="handleDeleteType(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </vab-card>
      </el-col>

      <!-- Right Panel: Dict Data -->
      <el-col :span="14">
        <vab-card :title="currentType ? `[${currentType.name}] 数据列表` : '字典数据'">
          <template #extra>
            <el-button 
              type="primary" 
              size="small" 
              :disabled="!currentType"
              @click="handleAddData"
            >
              <vab-icon icon="add-line" /> 新增数据
            </el-button>
          </template>

          <el-table v-loading="dataLoading" :data="dataList" border stripe>
            <el-table-column prop="dictLabel" label="标签" />
            <el-table-column prop="dictValue" label="键值" />
            <el-table-column prop="dictSort" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                  {{ row.status === 1 ? '正常' : '停用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template #default="{ row }">
                <el-button type="text" @click="handleEditData(row)">编辑</el-button>
                <el-button type="text" class="text-danger" @click="handleDeleteData(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </vab-card>
      </el-col>
    </el-row>

    <dict-type-dialog ref="typeDialogRef" @success="handleTypeSuccess" />
    <dict-data-dialog ref="dataDialogRef" @success="handleDataSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DictTypeDialog from './components/DictTypeDialog.vue'
import DictDataDialog from './components/DictDataDialog.vue'

defineOptions({
  name: 'DataDictionary',
})

// --- State ---
const typeLoading = ref(false)
const typeList = ref<any[]>([])
const currentType = ref<any>(null)

const dataLoading = ref(false)
const dataList = ref<any[]>([])

const typeDialogRef = ref()
const dataDialogRef = ref()

// --- Mock Data ---
const mockTypes = [
  { id: 1, name: '用户性别', type: 'sys_user_sex', status: 1 },
  { id: 2, name: '菜单状态', type: 'sys_show_hide', status: 1 },
  { id: 3, name: '系统开关', type: 'sys_normal_disable', status: 1 },
  { id: 4, name: '房间类型', type: 'dorm_room_type', status: 1 },
  { id: 5, name: '请假类型', type: 'leave_type', status: 1 },
]

const mockDataMap: Record<string, any[]> = {
  'sys_user_sex': [
    { id: 1, dictLabel: '男', dictValue: '0', dictSort: 1, status: 1 },
    { id: 2, dictLabel: '女', dictValue: '1', dictSort: 2, status: 1 },
    { id: 3, dictLabel: '未知', dictValue: '2', dictSort: 3, status: 1 },
  ],
  'dorm_room_type': [
    { id: 4, dictLabel: '四人间', dictValue: '4', dictSort: 1, status: 1 },
    { id: 5, dictLabel: '二人间', dictValue: '2', dictSort: 2, status: 1 },
  ]
}

// --- Methods ---
const loadTypes = () => {
  typeLoading.value = true
  setTimeout(() => {
    typeList.value = mockTypes
    typeLoading.value = false
    if (typeList.value.length > 0 && !currentType.value) {
      handleTypeChange(typeList.value[0])
    }
  }, 300)
}

const loadData = (type: string) => {
  dataLoading.value = true
  setTimeout(() => {
    dataList.value = mockDataMap[type] || []
    dataLoading.value = false
  }, 300)
}

const handleTypeChange = (val: any) => {
  if (!val) return
  currentType.value = val
  loadData(val.type)
}

// Type Actions
const handleAddType = () => {
  typeDialogRef.value.open()
}
const handleEditType = (row: any) => {
  typeDialogRef.value.open(row)
}
const handleDeleteType = (row: any) => {
  ElMessageBox.confirm(`确认删除字典类型"${row.name}"吗？`, '警告', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    loadTypes()
  })
}
const handleTypeSuccess = () => {
  loadTypes()
}

// Data Actions
const handleAddData = () => {
  dataDialogRef.value.open(null, currentType.value?.type)
}
const handleEditData = (row: any) => {
  dataDialogRef.value.open(row, currentType.value?.type)
}
const handleDeleteData = (row: any) => {
  ElMessageBox.confirm(`确认删除数据"${row.dictLabel}"吗？`, '警告', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    if (currentType.value) loadData(currentType.value.type)
  })
}
const handleDataSuccess = () => {
  if (currentType.value) loadData(currentType.value.type)
}

// Init
loadTypes()

</script>

<style scoped>
.text-danger {
  color: var(--el-color-danger);
}
</style>
