<template>
	<div class="system-area">
		<a-card :bordered="false">
			<template #title>
				<div class="page-title">
					<EnvironmentOutlined />
					<span>{{ $t('common.areaManage') }}</span>
				</div>
			</template>

			<sc-table ref="tableRef" :columns="columns" :data-source="dataSource" :loading="loading"
				:pagination="pagination" :show-row-actions="true" :row-actions="rowActions" :enable-cache="true"
				cache-key="system-area-table" @refresh="loadData" @change="handleTableChange" @action="handleAction">
				<!-- 工具栏左侧 -->
				<template #toolbar-left>
					<a-button type="primary" @click="handleAdd">
						<template #icon>
							<PlusOutlined />
						</template>
						{{ $t('common.add') }}
					</a-button>
					<a-button danger @click="handleBatchDelete" :disabled="!selectedRowKeys.length">
						<template #icon>
							<DeleteOutlined />
						</template>
						{{ $t('common.batchDelete') }}
					</a-button>
				</template>

				<!-- 状态列自定义 -->
				<template #status="{ text }">
					<a-tag :color="text === 1 ? 'green' : 'red'">
						{{ text === 1 ? $t('common.enabled') : $t('common.disabled') }}
					</a-tag>
				</template>

				<!-- 级别列自定义 -->
				<template #level="{ text }">
					<a-tag color="blue">{{ getLevelText(text) }}</a-tag>
				</template>
			</sc-table>
		</a-card>

		<!-- 添加/编辑弹窗 -->
		<AreaModal v-model:visible="modalVisible" :is-edit="isEdit" :initial-data="currentData"
			@confirm="handleModalConfirm" />
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { EnvironmentOutlined, PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import systemApi from '@/api/system'
import ScTable from '@/components/scTable/index.vue'
import AreaModal from './components/AreaModal.vue'

// 定义组件名称
defineOptions({
	name: 'SystemArea',
})

const { t } = useI18n()
const tableRef = ref(null)

// 数据源
const dataSource = ref([])
const loading = ref(false)

// 分页
const pagination = reactive({
	current: 1,
	pageSize: 10,
	total: 0,
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => `共 ${total} 条`,
	pageSizeOptions: ['10', '20', '50', '100'],
})

// 选中的行
const selectedRowKeys = ref([])

// 弹窗相关
const modalVisible = ref(false)
const isEdit = ref(false)
const currentData = ref({})

// 行操作配置
const rowActions = ref([])

// 获取级别文本
const getLevelText = (level) => {
	const levelMap = {
		1: t('common.province'),
		2: t('common.city'),
		3: t('common.district'),
		4: t('common.street'),
	}
	return levelMap[level] || t('common.unknown')
}

// 列配置
const columns = ref([
	{
		title: 'ID',
		dataIndex: 'id',
		key: 'id',
		width: 80,
		fixed: 'left',
		sorter: true,
	},
	{
		title: t('common.areaName'),
		dataIndex: 'title',
		key: 'title',
		width: 200,
	},
	{
		title: t('common.areaCode'),
		dataIndex: 'code',
		key: 'code',
		width: 150,
	},
	{
		title: t('common.areaLevel'),
		dataIndex: 'level',
		key: 'level',
		width: 100,
		slot: 'level',
	},
	{
		title: t('common.parentArea'),
		dataIndex: 'parent_code',
		key: 'parent_code',
		width: 150,
	},
	{
		title: t('common.status'),
		dataIndex: 'status',
		key: 'status',
		width: 100,
		slot: 'status',
	},
	{
		title: t('common.createTime'),
		dataIndex: 'created_at',
		key: 'created_at',
		width: 180,
	},
	{
		title: t('common.action'),
		key: 'action',
		width: 150,
		fixed: 'right',
	},
])

// 加载数据
const loadData = async () => {
	try {
		loading.value = true
		const params = {
			page: pagination.current,
			pageSize: pagination.pageSize,
		}
		const res = await systemApi.area.list.get(params)
		if (res.code === 1) {
			dataSource.value = res.data.list || res.data || []
			pagination.total = res.data.total || 0
		}
	} catch (error) {
		message.error(t('common.fetchDataFailed'))
		console.error('获取地区列表失败:', error)
	} finally {
		loading.value = false
	}
}

// 表格变化处理
const handleTableChange = (params) => {
	const { pagination: pag } = params
	pagination.current = pag.current
	pagination.pageSize = pag.pageSize
	loadData()
}

// 行操作处理
const handleAction = (key, record) => {
	if (key === 'edit') {
		handleEdit(record)
	} else if (key === 'delete') {
		handleDelete(record)
	}
}

// 添加
const handleAdd = () => {
	isEdit.value = false
	currentData.value = {}
	modalVisible.value = true
}

// 编辑
const handleEdit = (record) => {
	isEdit.value = true
	currentData.value = { ...record }
	modalVisible.value = true
}

// 删除
const handleDelete = (record) => {
	Modal.confirm({
		title: t('common.confirmDelete'),
		content: `${t('common.deleteConfirm')}: ${record.title}?`,
		okText: t('common.confirm'),
		cancelText: t('common.cancel'),
		onOk: async () => {
			try {
				// 注意：API 中没有删除接口，这里模拟删除成功
				// 如果后端有删除接口，请取消注释以下代码
				// const res = await systemApi.area.delete.post({ id: record.id })
				// if (res.code === 200) {
				message.success(t('common.deleteSuccess'))
				loadData()
				// }
			} catch (error) {
				message.error(t('common.deleteFailed'))
				console.error('删除地区失败:', error)
			}
		},
	})
}

// 初始化行操作配置（必须在 handleEdit 和 handleDelete 定义之后）
rowActions.value = [
	{
		key: 'edit',
		label: t('common.edit'),
		handler: handleEdit,
	},
	{
		key: 'delete',
		label: t('common.delete'),
		danger: true,
		handler: handleDelete,
	},
]

// 批量删除
const handleBatchDelete = () => {
	if (selectedRowKeys.value.length === 0) {
		message.warning(t('common.selectDataFirst'))
		return
	}

	Modal.confirm({
		title: t('common.confirmBatchDelete'),
		content: `${t('common.batchDeleteConfirm')}: ${selectedRowKeys.value.length} ${t('common.items')}?`,
		okText: t('common.confirm'),
		cancelText: t('common.cancel'),
		onOk: async () => {
			try {
				// 注意：API 中没有批量删除接口，这里模拟删除成功
				message.success(t('common.deleteSuccess'))
				selectedRowKeys.value = []
				loadData()
			} catch (error) {
				message.error(t('common.deleteFailed'))
				console.error('批量删除失败:', error)
			}
		},
	})
}

// 弹窗确认
const handleModalConfirm = async (values) => {
	try {
		let res
		if (isEdit.value) {
			// 编辑
			res = await systemApi.area.edit.post(values)
			if (res.code === 1) {
				message.success(t('common.editSuccess'))
				modalVisible.value = false
				loadData()
			}
		} else {
			// 添加
			res = await systemApi.area.add.post(values)
			if (res.code === 1) {
				message.success(t('common.addSuccess'))
				modalVisible.value = false
				loadData()
			}
		}
	} catch (error) {
		if (error.errorFields) {
			return // 表单验证错误
		}
		message.error(isEdit.value ? t('common.editFailed') : t('common.addFailed'))
		console.error(isEdit.value ? '编辑地区失败:' : '添加地区失败:', error)
	}
}

// 初始化加载数据
onMounted(() => {
	loadData()
})
</script>

<style scoped lang="scss">
.system-area {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 16px;
	overflow: hidden;

	:deep(.ant-card) {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	:deep(.ant-card-head) {
		flex-shrink: 0;
		min-height: auto;
		padding: 12px 24px;
	}

	:deep(.ant-card-head-title) {
		padding: 0;
	}

	:deep(.ant-card-body) {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 16px;
	}

	:deep(.sc-table) {
		flex: 1;
		height: 0;
		min-height: 0;

		:deep(.ant-table-wrapper) {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		:deep(.ant-spin-nested-loading) {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		:deep(.ant-spin-container) {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		:deep(.ant-table) {
			flex: 1;
		}

		:deep(.ant-table-container) {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		:deep(.ant-table-body) {
			flex: 1;
			overflow-y: auto !important;
		}

		:deep(.ant-pagination) {
			flex-shrink: 0;
			margin-top: 16px;
		}
	}
}
</style>
