<template>
	<div class="pages-base-layout city-page">
		<div class="tool-bar">
			<div class="left-panel">
				<a-space>
					<a-input v-model:value="searchForm.keyword" placeholder="城市名称/编码" allow-clear style="width: 180px" />
					<a-button type="primary" @click="handleSearch">
						<template #icon><search-outlined /></template>
						搜索
					</a-button>
					<a-button @click="handleReset">
						<template #icon><redo-outlined /></template>
						重置
					</a-button>
				</a-space>
			</div>
			<div class="right-panel">
				<a-button type="primary" @click="handleAdd">
					<template #icon><plus-outlined /></template>
					新增
				</a-button>
				<a-dropdown>
					<a-button>
						更多
						<down-outlined />
					</a-button>
					<template #overlay>
						<a-menu>
							<a-menu-item @click="handleRefresh">
								<reload-outlined />
								刷新
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>
		</div>

		<div class="table-content">
			<scTable :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey" @refresh="refreshTable" @paginationChange="handlePaginationChange">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'title'">
						<a-tag color="blue">{{ record.title }}</a-tag>
					</template>
					<template v-else-if="column.key === 'code'">
						{{ record.code }}
					</template>
					<template v-else-if="column.key === 'parent_code'">
						<a-tag v-if="record.parent_code" color="purple">{{ record.parent_code }}</a-tag>
						<span v-else class="text-gray-400">-</span>
					</template>
					<template v-else-if="column.key === 'has_children'">
						<a-tag v-if="hasChildren(record)" color="orange">有</a-tag>
						<span v-else class="text-gray-400">无</span>
					</template>
					<template v-else-if="column.key === 'action'">
						<a-space>
							<a-button type="link" size="small" @click="handleEdit(record)"> 编辑 </a-button>
							<a-popconfirm title="确定要删除该城市吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)">
								<a-button type="link" size="small" danger>删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</template>
			</scTable>
		</div>

		<!-- 新增/编辑弹窗 -->
		<SaveDialog v-model:visible="saveDialogVisible" :city-data="currentCity" :mode="saveMode" @success="handleSaveSuccess" />
	</div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import { useTable } from '@/hooks/useTable'
import api from '@/api/system'
import scTable from '@/components/scTable/index.vue'
import SaveDialog from './components/SaveDialog.vue'

// 搜索表单
const searchForm = reactive({
	keyword: '',
})

// 使用 useTable Hook
const {
	tableRef,
	searchForm: hookSearchForm,
	tableData,
	loading,
	pagination,
	handleSearch,
	handleReset,
	handlePaginationChange,
	refreshTable,
} = useTable({
	api: api.city.list.get,
	searchForm: {
		keyword: '',
	},
	columns: [],
	needPagination: true,
})

// 新增/编辑弹窗
const saveDialogVisible = ref(false)
const saveMode = ref('add')
const currentCity = ref(null)

// 表格列配置
const columns = [
	{
		title: '城市名称',
		key: 'title',
		width: 200,
	},
	{
		title: '城市编码',
		key: 'code',
		width: 180,
	},
	{
		title: '父级编码',
		key: 'parent_code',
		width: 180,
	},
	{
		title: '子级数量',
		key: 'has_children',
		width: 120,
		align: 'center',
	},
	{
		title: '操作',
		key: 'action',
		width: 150,
		fixed: 'right',
	},
]

const rowKey = (record) => record.id

// 判断是否有子级
const hasChildren = (record) => {
	return record.has_children > 0
}

// 刷新
const handleRefresh = () => {
	refreshTable()
}

// 新增
const handleAdd = () => {
	saveMode.value = 'add'
	currentCity.value = {
		title: '',
		code: '',
		parent_code: null,
	}
	saveDialogVisible.value = true
}

// 编辑
const handleEdit = (record) => {
	saveMode.value = 'edit'
	currentCity.value = {
		id: record.id,
		title: record.title,
		code: record.code,
		parent_code: record.parent_code,
	}
	saveDialogVisible.value = true
}

// 删除
const handleDelete = async (id) => {
	try {
		const res = await api.city.delete.delete(id)
		if (res.code === 200) {
			message.success('删除成功')
			refreshTable()
		}
	} catch (error) {
		message.error(error.message || '删除失败')
	}
}

// 保存成功
const handleSaveSuccess = () => {
	refreshTable()
}

// 将外部 searchForm 同步到 hookSearchForm
watch(
	searchForm,
	(newVal) => {
		Object.assign(hookSearchForm, newVal)
	},
	{ deep: true },
)
</script>

<style scoped lang="scss">
.city-page {
	.text-gray-400 {
		color: #999;
	}
}
</style>
