<template>
  <div class="container-box">
    <div class="header-bar">
      <h2>字典管理</h2>
      <div class="header-actions">
        <el-button @click="refresh">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>
    <el-divider></el-divider>

    <!-- 内容区域：根据当前视图切换 -->
    <div v-if="currentView === 'types'">
      <div class="tab-content">
          <div class="toolbar">
            <el-button type="primary" @click="handleAddType">
              <el-icon><Plus /></el-icon>
              添加字典类型
            </el-button>
            <div class="search-box">
              <el-input
                v-model="typeSearchKeyword"
                placeholder="搜索字典类型名称或编码"
                clearable
                style="width: 300px"
                @input="handleTypeSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </div>

          <el-table
            :data="dictTypes"
            stripe
            style="width: 100%"
            v-loading="typeLoading"
          >
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="dict_name" label="字典名称" min-width="150" align="center" />
            <el-table-column prop="dict_code" label="字典编码" min-width="150" align="center">
              <template #default="{ row }">
                <el-tag size="small">{{ row.dict_code }}</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="parent_id" label="父级ID" width="100" align="center">
              <template #default="{ row }">
                <span v-if="row.parent_id > 0">{{ row.parent_id }}</span>
                <span v-else style="color: #999">-</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
                  {{ row.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="is_global" label="全局展示" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="row.is_global === 1 ? 'success' : 'warning'" size="small">
                  {{ row.is_global === 1 ? '是' : '否' }}
                </el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="sort" label="排序" width="80" align="center" /> -->
            <!-- <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip /> -->
            <el-table-column prop="create_time" label="创建时间" width="180" align="center">
              <template #default="{ row }">
                {{ formatDate(row.create_time) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right" align="center">
              <template #default="{ row }">
                <el-button size="small" type="primary" link @click="handleEditType(row)">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
                <el-button size="small" type="primary" link @click="handleViewItems(row)">
                  <el-icon><List /></el-icon>
                  查看字典项
                </el-button>
                <el-button size="small" type="danger" link @click="handleDeleteType(row)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-bar">
            <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              :total="totalCount"
              @current-change="handlePageChange"
              layout="total, prev, pager, next"
            />
          </div>
      </div>
    </div>

    <div v-else-if="currentView === 'items'">
      <div class="tab-content">
        <div class="toolbar">
          <div>
            <el-button @click="goBackToTypes">
              返回
            </el-button>
          </div>
          <div class="search-box">
            <span v-if="selectedDictType">
              当前字典类型：{{ selectedDictType.dict_name }}（{{ selectedDictType.dict_code }}）
            </span>
          </div>
        </div>
        <DictItemList :selected-type-id="selectedDictTypeId || undefined" @refresh="refreshTypesSilently" />
      </div>
    </div>

    <!-- 字典类型编辑对话框 -->
    <DictTypeEdit
      v-model="typeDialogVisible"
      :dict-type="currentDictType"
      @success="handleTypeSuccess"
    />

    <!-- 字典项独立页面内操作通过 DictItemList 完成 -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Edit,
  Delete,
  Refresh,
  Search,
  List,
} from '@element-plus/icons-vue'
import {
  getDictTypes,
  deleteDictType,
} from '@/api/dict'
import DictTypeEdit from './components/DictTypeEdit.vue'
import DictItemList from './components/DictItemList.vue'

const currentView = ref<'types' | 'items'>('types')
const typeLoading = ref(false)

// 字典类型相关
const dictTypes = ref<any[]>([])
const typeSearchKeyword = ref('')
const typeDialogVisible = ref(false)
const currentDictType = ref<any>(null)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)

const selectedDictTypeId = ref<number | null>(null)
const selectedDictType = computed(() => {
  if (!selectedDictTypeId.value) {
    return null
  }
  return dictTypes.value.find((type) => type.id === selectedDictTypeId.value) || null
})

// 格式化日期
function formatDate(dateStr: string | null | undefined): string {
  if (!dateStr) return ''
  try {
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  } catch {
    return dateStr as string
  }
}

// 获取字典类型列表
async function fetchDictTypes() {
  typeLoading.value = true
  try {
    const res = await getDictTypes({
      page: currentPage.value,
      pageSize: pageSize.value,
      keyword: typeSearchKeyword.value
    })
    if (res.success === true && res.data) {
      dictTypes.value = Array.isArray(res.data.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
      totalCount.value = res.data.total || res.data.length || 0
    } else if (Array.isArray(res)) {
      dictTypes.value = res
      totalCount.value = res.length
    } else {
      dictTypes.value = []
      totalCount.value = 0
      ElMessage.error(res.message || '获取字典类型失败')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '获取字典类型失败')
    dictTypes.value = []
    totalCount.value = 0
  } finally {
    typeLoading.value = false
  }
}

// 字典类型搜索
function handleTypeSearch() {
  currentPage.value = 1
  fetchDictTypes()
}

// 分页切换
function handlePageChange(page: number) {
  currentPage.value = page
  fetchDictTypes()
}

// 添加字典类型
function handleAddType() {
  currentDictType.value = null
  typeDialogVisible.value = true
}

// 编辑字典类型
function handleEditType(row: any) {
  currentDictType.value = { ...row }
  typeDialogVisible.value = true
}

// 查看字典项
function handleViewItems(row: any) {
  selectedDictTypeId.value = row.id
  currentView.value = 'items'
}

// 删除字典类型
async function handleDeleteType(row: any) {
  try {
    await ElMessageBox.confirm(
      `确定要删除字典类型「${row.dict_name}」吗？删除后不可恢复。`,
      '警告',
      { type: 'warning' }
    )

    typeLoading.value = true
    try {
      const res = await deleteDictType(row.id)
      if (res.success === true) {
        ElMessage.success('删除成功')
        fetchDictTypes()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error: any) {
      ElMessage.error(error.message || '删除失败')
    } finally {
      typeLoading.value = false
    }
  } catch {
    // 取消删除
  }
}

// 字典类型操作成功回调
function handleTypeSuccess() {
  fetchDictTypes()
}

// 从字典项页返回
function goBackToTypes() {
  currentView.value = 'types'
}

// 子页面刷新后，静默刷新类型列表
function refreshTypesSilently() {
  fetchDictTypes()
}

// 刷新
async function refresh() {
  await fetchDictTypes()
  ElMessage.success('刷新成功')
}

onMounted(() => {
  fetchDictTypes()
})
</script>

<style scoped lang="less">
.container-box {
  padding: 20px;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }
}

.tab-content {
  padding: 20px 0;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .search-box {
    display: flex;
    align-items: center;
  }

  .filter-box {
    display: flex;
    align-items: center;
  }
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.color-display {
  display: flex;
  align-items: center;
  gap: 8px;

  .color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    display: inline-block;
  }
}
</style>
