<template>
	<div class="pages-sidebar-layout dictionary-page">
		<!-- 左侧：字典类型列表 -->
		<div class="left-box">
			<div class="header">
				<a-input v-model:value="dictionaryKeyword" placeholder="搜索字典..." allow-clear @change="handleDictionarySearch">
					<template #prefix>
						<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
					</template>
				</a-input>
				<a-button type="primary" size="small" style="margin-top: 12px; width: 100%" @click="handleAddDictionary"> <PlusOutlined /> 新增字典 </a-button>
			</div>

			<div class="body">
				<!-- 字典列表 -->
				<div v-if="filteredDictionaries.length > 0" class="dictionary-list">
					<div v-for="item in filteredDictionaries" :key="item.id" :class="['dictionary-item', { active: selectedDictionaryId === item.id }]" @click="handleSelectDictionary(item)">
						<div class="item-main">
							<div class="item-name">{{ item.name }}</div>
							<div class="item-code">{{ item.code }}</div>
						</div>
						<div class="item-meta">
							<a-tag :color="item.status ? 'success' : 'default'" size="small">
								{{ item.status ? '启用' : '禁用' }}
							</a-tag>
							<span class="item-count">{{ item.items_count || 0 }} 项</span>
						</div>
						<div class="item-actions" @click.stop>
							<a-dropdown>
								<a-button type="text" size="small">
									<MoreOutlined />
								</a-button>
								<template #overlay>
									<a-menu>
										<a-menu-item @click="handleEditDictionary(item)"> <EditOutlined />编辑 </a-menu-item>
										<a-menu-item @click="handleDeleteDictionary(item)" danger> <DeleteOutlined />删除 </a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</div>
					</div>
				</div>

				<!-- 空状态 -->
				<a-empty v-else-if="!dictionaryLoading" description="暂无字典类型" :image-size="80">
					<a-button type="primary" @click="handleAddDictionary"> 创建第一个字典 </a-button>
				</a-empty>
			</div>
		</div>

		<!-- 右侧：字典项表格 -->
		<div class="right-box">
			<!-- 工具栏 -->
			<div class="tool-bar">
				<div class="left-panel">
					<a-space>
						<a-input v-model:value="searchForm.label" placeholder="标签名称" allow-clear style="width: 140px" />
						<a-input v-model:value="searchForm.value" placeholder="数据值" allow-clear style="width: 140px" />
						<a-select v-model:value="searchForm.status" placeholder="状态" allow-clear style="width: 100px">
							<a-select-option :value="true">启用</a-select-option>
							<a-select-option :value="false">禁用</a-select-option>
						</a-select>
						<a-button type="primary" @click="handleItemSearch">
							<template #icon><SearchOutlined /></template>
							搜索
						</a-button>
						<a-button @click="handleItemReset">
							<template #icon><RedoOutlined /></template>
							重置
						</a-button>
					</a-space>
				</div>

				<div class="right-panel">
					<a-dropdown :disabled="selectedRows.length === 0">
						<a-button :disabled="selectedRows.length === 0">
							批量操作
							<DownOutlined />
						</a-button>
						<template #overlay>
							<a-menu>
								<a-menu-item @click="handleBatchStatus"> <CheckCircleOutlined />批量启用/禁用 </a-menu-item>
								<a-menu-divider />
								<a-menu-item @click="handleBatchDelete" danger> <DeleteOutlined />批量删除 </a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
					<a-button type="primary" :disabled="!selectedDictionaryId" @click="handleAddItem">
						<template #icon><PlusOutlined /></template>
						新增
					</a-button>
				</div>
			</div>

			<!-- 表格内容 -->
			<div class="table-content">
				<!-- 空状态：未选择字典 -->
				<div v-if="!selectedDictionaryId" class="empty-state">
					<a-empty description="请选择左侧字典类型后操作" :image-size="120" />
				</div>

				<!-- 字典项表格 -->
				<scTable
					v-else
					ref="tableRef"
					:columns="columns"
					:data-source="tableData"
					:loading="loading"
					:pagination="pagination"
					:row-key="rowKey"
					:row-selection="rowSelection"
					@refresh="refreshTable"
					@paginationChange="handlePaginationChange"
					@select="handleSelectChange"
					@selectAll="handleSelectAll"
				>
					<template #color="{ record }">
						<span v-if="record.color" class="color-cell" :style="{ backgroundColor: record.color }"></span>
						<span v-else>-</span>
					</template>

					<template #is_default="{ record }">
						<a-tag v-if="record.is_default" color="orange"> <StarOutlined />默认 </a-tag>
						<span v-else>-</span>
					</template>

					<template #status="{ record }">
						<a-tag :color="record.status ? 'success' : 'error'">
							{{ record.status ? '启用' : '禁用' }}
						</a-tag>
					</template>

					<template #action="{ record }">
						<a-space>
							<a-button type="link" size="small" @click="handleEditItem(record)"> 编辑 </a-button>
							<a-popconfirm title="确定删除该字典项吗？" @confirm="handleDeleteItem(record)">
								<a-button type="link" size="small" danger>删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</scTable>
			</div>
		</div>
	</div>

	<!-- 字典类型弹窗 -->
	<DictionaryDialog v-if="dialog.dictionary" v-model:visible="dialog.dictionary" :record="currentDictionary" :dictionary-list="dictionaryList" @success="handleDictionarySuccess" />

	<!-- 字典项弹窗 -->
	<ItemDialog v-if="dialog.item" v-model:visible="dialog.item" :record="currentItem" :dictionary-id="selectedDictionaryId" :item-list="tableData" @success="handleItemSuccess" />
</template>

<script setup>
import { ref, reactive, onMounted, h } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { SearchOutlined, RedoOutlined, PlusOutlined, DeleteOutlined, EditOutlined, MoreOutlined, CheckCircleOutlined, StarOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useTable } from '@/hooks/useTable'
import systemApi from '@/api/system'
import scTable from '@/components/scTable/index.vue'
import DictionaryDialog from './components/DictionaryDialog.vue'
import ItemDialog from './components/ItemDialog.vue'
import { useDictionaryStore } from '@/stores/modules/dictionary'

// ===== 字典列表相关 =====
const dictionaryList = ref([])
const filteredDictionaries = ref([])
const selectedDictionary = ref(null)
const selectedDictionaryId = ref(null)
const dictionaryKeyword = ref('')
const dictionaryLoading = ref(false)

// ===== 字典项相关（使用 useTable Hook）=====
const { tableRef, searchForm, tableData, loading, pagination, selectedRows, rowSelection, handleSearch, handleReset, handlePaginationChange, handleSelectChange, handleSelectAll, refreshTable } = useTable({
	api: systemApi.dictionaryItem.list.get,
	searchForm: {
		dictionary_id: null,
		label: '',
		value: '',
		status: undefined,
	},
	columns: [],
	needPagination: true,
	needSelection: true,
	immediateLoad: false, // 不自动加载，等待选择字典
})

// 表格列配置
const columns = [
	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80, align: 'center' },
	{
		title: '标签名称',
		dataIndex: 'label',
		key: 'label',
		width: 150,
		ellipsis: true,
	},
	{
		title: '数据值',
		dataIndex: 'value',
		key: 'value',
		width: 120,
		ellipsis: true,
	},
	{
		title: '颜色',
		dataIndex: 'color',
		key: 'color',
		width: 100,
		align: 'center',
		slot: 'color',
	},
	{
		title: '默认项',
		dataIndex: 'is_default',
		key: 'is_default',
		width: 100,
		align: 'center',
		slot: 'is_default',
	},
	{
		title: '排序',
		dataIndex: 'sort',
		key: 'sort',
		width: 80,
		align: 'center',
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		width: 100,
		align: 'center',
		slot: 'status',
	},
	{
		title: '描述',
		dataIndex: 'description',
		key: 'description',
		ellipsis: true,
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 150,
		align: 'center',
		fixed: 'right',
		slot: 'action',
	},
]

const rowKey = 'id'

// ===== 弹窗状态 =====
const dialog = reactive({
	dictionary: false,
	item: false,
})

// ===== 当前操作的数据 =====
const currentDictionary = ref(null)
const currentItem = ref(null)

// ===== 方法：加载字典列表 =====
const loadDictionaryList = async () => {
	try {
		dictionaryLoading.value = true
		const res = await systemApi.dictionary.all.get()
		if (res.code === 200) {
			dictionaryList.value = res.data || []
			filteredDictionaries.value = res.data || []
			// 建立字典ID到Code的映射
			dictionaryStore.buildIdToCodeMap(res.data || [])
		} else {
			message.error(res.message || '加载字典列表失败')
		}
	} catch (error) {
		console.error('加载字典列表失败:', error)
		message.error('加载字典列表失败')
	} finally {
		dictionaryLoading.value = false
	}
}

// ===== 方法：搜索过滤字典 =====
const handleDictionarySearch = (e) => {
	const keyword = e.target?.value || ''
	dictionaryKeyword.value = keyword

	if (!keyword) {
		filteredDictionaries.value = dictionaryList.value
		return
	}

	// 过滤字典列表（支持搜索名称和编码）
	filteredDictionaries.value = dictionaryList.value.filter((dict) => {
		return dict.name.toLowerCase().includes(keyword.toLowerCase()) || dict.code.toLowerCase().includes(keyword.toLowerCase())
	})
}

// ===== 方法：选择字典 =====
const handleSelectDictionary = (dictionary) => {
	selectedDictionary.value = dictionary
	selectedDictionaryId.value = dictionary.id

	// 重置右侧搜索条件
	searchForm.label = ''
	searchForm.value = ''
	searchForm.status = undefined

	// 更新 dictionary_id
	searchForm.dictionary_id = dictionary.id

	// 加载字典项列表
	handleItemSearch()
}

// ===== 方法：字典项搜索 =====
const handleItemSearch = () => {
	if (!selectedDictionaryId.value) {
		message.warning('请先选择字典类型')
		return
	}
	searchForm.dictionary_id = selectedDictionaryId.value
	handleSearch()
}

// ===== 方法：字典项重置 =====
const handleItemReset = () => {
	searchForm.label = ''
	searchForm.value = ''
	searchForm.status = undefined
	searchForm.dictionary_id = selectedDictionaryId.value
	handleSearch()
}

// ===== 方法：新增字典 =====
const handleAddDictionary = () => {
	currentDictionary.value = null
	dialog.dictionary = true
}

// ===== 方法：编辑字典 =====
const handleEditDictionary = (dictionary) => {
	currentDictionary.value = { ...dictionary }
	dialog.dictionary = true
}

// ===== 方法：删除字典 =====
const handleDeleteDictionary = (dictionary) => {
	const itemCount = dictionary.items_count || 0

	Modal.confirm({
		title: '确认删除',
		content: itemCount > 0 ? `确定删除字典类型"${dictionary.name}"吗？删除后该字典下的 ${itemCount} 个字典项也会被删除！` : `确定删除字典类型"${dictionary.name}"吗？`,
		okText: '删除',
		okType: 'danger',
		cancelText: '取消',
		icon: h(ExclamationCircleOutlined),
		onOk: async () => {
			try {
				const res = await systemApi.dictionary.delete.delete(dictionary.id)
				if (res.code === 200) {
					message.success('删除成功')

					// 如果删除的是当前选中的字典，清空右侧
					if (selectedDictionaryId.value === dictionary.id) {
						selectedDictionary.value = null
						selectedDictionaryId.value = null
						tableData.value = []
					}

					// 刷新字典列表
					await loadDictionaryList()
				} else {
					message.error(res.message || '删除失败')
				}
			} catch (error) {
				console.error('删除字典失败:', error)
				message.error('删除失败')
			}
		},
	})
}

// ===== 方法：新增字典项 =====
const handleAddItem = () => {
	if (!selectedDictionaryId.value) {
		message.warning('请先选择字典类型')
		return
	}

	currentItem.value = null
	dialog.item = true
}

// ===== 方法：编辑字典项 =====
const handleEditItem = (record) => {
	currentItem.value = { ...record }
	dialog.item = true
}

// ===== 方法：删除字典项 =====
const handleDeleteItem = async (record) => {
	try {
		const res = await systemApi.dictionaryItem.delete.delete(record.id)
		if (res.code === 200) {
			message.success('删除成功')
			// 清除字典缓存
			dictionaryStore.clearDictionary(selectedDictionaryId.value)
			refreshTable()
			// 刷新字典列表以更新项数量
			loadDictionaryList()
		} else {
			message.error(res.message || '删除失败')
		}
	} catch (error) {
		console.error('删除字典项失败:', error)
		message.error('删除失败')
	}
}

// ===== 方法：批量删除字典项 =====
const handleBatchDelete = () => {
	if (selectedRows.value.length === 0) {
		message.warning('请选择要删除的字典项')
		return
	}

	Modal.confirm({
		title: '确认删除',
		content: `确定删除选中的 ${selectedRows.value.length} 个字典项吗？`,
		okText: '删除',
		okType: 'danger',
		cancelText: '取消',
		icon: h(ExclamationCircleOutlined),
		onOk: async () => {
			try {
				const ids = selectedRows.value.map((item) => item.id)
				const res = await systemApi.dictionaryItem.batchDelete.post({
					ids,
				})
				if (res.code === 200) {
					message.success('删除成功')
					// 清除字典缓存
					dictionaryStore.clearDictionary(selectedDictionaryId.value)
					selectedRows.value = []
					refreshTable()
					loadDictionaryList()
				} else {
					message.error(res.message || '删除失败')
				}
			} catch (error) {
				console.error('批量删除失败:', error)
				message.error('删除失败')
			}
		},
	})
}

// ===== 方法：批量启用/禁用字典项 =====
const handleBatchStatus = () => {
	if (selectedRows.value.length === 0) {
		message.warning('请选择要操作的字典项')
		return
	}

	const newStatus = selectedRows.value[0].status ? false : true
	const statusText = newStatus === 1 ? '启用' : '禁用'

	Modal.confirm({
		title: `确认${statusText}`,
		content: `确定要${statusText}选中的 ${selectedRows.value.length} 个字典项吗？`,
		okText: '确定',
		cancelText: '取消',
		onOk: async () => {
			try {
				const ids = selectedRows.value.map((item) => item.id)
				const res = await systemApi.dictionaryItem.batchStatus.post({
					ids,
					status: newStatus,
				})
				if (res.code === 200) {
					message.success(`${statusText}成功`)
					// 清除字典缓存
					dictionaryStore.clearDictionary(selectedDictionaryId.value)
					selectedRows.value = []
					refreshTable()
				} else {
					message.error(res.message || '操作失败')
				}
			} catch (error) {
				console.error('批量操作失败:', error)
				message.error('操作失败')
			}
		},
	})
}

// 初始化字典 store
const dictionaryStore = useDictionaryStore()

// ===== 方法：字典操作成功回调 =====
const handleDictionarySuccess = () => {
	dialog.dictionary = false
	// 清理字典缓存
	dictionaryStore.clearCache()
	loadDictionaryList()
}

// ===== 方法：字典项操作成功回调 =====
const handleItemSuccess = () => {
	dialog.item = false
	// 清理字典缓存
	dictionaryStore.clearDictionary(selectedDictionaryId.value)
	refreshTable()
	loadDictionaryList()
}

// ===== 生命周期 =====
onMounted(() => {
	// 加载字典列表
	loadDictionaryList()
})
</script>

<style scoped lang="scss">
.dictionary-page {
	// 左侧字典列表样式
	.left-box {
		.body {
			padding: 16px;
			position: relative;

			.dictionary-list {
				.dictionary-item {
					display: flex;
					align-items: center;
					padding: 12px;
					margin-bottom: 8px;
					border-radius: 6px;
					cursor: pointer;
					transition: all 0.2s;
					border: 1px solid #f0f0f0;
					background: #fff;

					&:hover {
						background-color: #fafafa;
						border-color: #d9d9d9;

						.item-actions {
							opacity: 1;
						}
					}

					&.active {
						background-color: #e6f7ff;
						border-color: #1890ff;
					}

					.item-main {
						flex: 1;
						min-width: 0;

						.item-name {
							font-size: 14px;
							font-weight: 500;
							color: #262626;
							margin-bottom: 4px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.item-code {
							font-size: 12px;
							color: #8c8c8c;
							font-family: 'Consolas', 'Monaco', monospace;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.item-meta {
						display: flex;
						align-items: center;
						gap: 8px;
						font-size: 12px;
						color: #8c8c8c;
						margin-right: 8px;

						.item-count {
							font-size: 12px;
						}
					}

					.item-actions {
						opacity: 0;
						transition: opacity 0.2s;
					}
				}
			}
		}
	}

	// 右侧空状态
	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: #fff;
		border-radius: 4px;
	}
}

// 表格自定义列样式
:deep(.sc-table) {
	.color-cell {
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 2px;
		border: 1px solid #d9d9d9;
		vertical-align: middle;
	}
}
</style>
