<template>
	<el-dialog
		v-model="visible"
		:title="dialogTitle"
		width="800px"
		:close-on-click-modal="false"
		@close="handleClose"
	>
		<!-- 搜索栏 -->
		<div class="search-bar">
			<el-input
				v-model="searchKeyword"
				placeholder="请输入关键词搜索"
				clearable
				style="width: 300px"
				@keyup.enter="handleSearch"
			>
				<template #append>
					<el-button @click="handleSearch">
						<el-icon><ele-Search /></el-icon>
					</el-button>
				</template>
			</el-input>
		</div>
		
		<!-- 数据表格 -->
		<el-table
			ref="tableRef"
			:data="tableData"
			v-loading="loading"
			border
			style="width: 100%; margin-top: 15px"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column type="index" label="序号" width="60" align="center" />
			<el-table-column prop="name" :label="getColumnLabel()" min-width="200" show-overflow-tooltip />
			<el-table-column prop="code" label="编码" width="150" show-overflow-tooltip v-if="scope <= 2" />
		</el-table>
		
		<!-- 分页 -->
		<div class="pagination-box">
			<el-pagination
				v-model:current-page="pageNum"
				v-model:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:total="total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		
		<!-- 已选项展示 -->
		<div class="selected-box" v-if="selectedItems.length > 0">
			<span class="selected-label">已选择 {{ selectedItems.length }} 项：</span>
			<el-tag
				v-for="item in selectedItems"
				:key="item.id"
				size="small"
				closable
				style="margin-right: 4px; margin-bottom: 4px"
				@close="removeSelected(item)"
			>
				{{ item.name }}
			</el-tag>
		</div>
		
		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { listWarehouses } from '/@/api/assets/warehouse';
import { listZones } from '/@/api/assets/zone';
import { listLocations } from '/@/api/assets/location';

const emit = defineEmits(['confirm']);

const visible = ref(false);
const loading = ref(false);
const scope = ref(1); // 1-仓库 2-库区 3-库位
const searchKeyword = ref('');
const tableData = ref<any[]>([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const tableRef = ref();

// 已选项
const selectedItems = ref<any[]>([]);

// 父级ID（库区需要仓库ID，库位需要库区ID）
const parentWarehouseIds = ref<string[]>([]);
const parentZoneIds = ref<string[]>([]);

// 弹窗标题
const dialogTitle = computed(() => {
	const titles: Record<number, string> = {
		1: '选择仓库',
		2: '选择库区',
		3: '选择库位',
	};
	return titles[scope.value] || '选择';
});

// 获取列标题
const getColumnLabel = () => {
	const labels: Record<number, string> = {
		1: '仓库名称',
		2: '库区名称',
		3: '库位名称',
	};
	return labels[scope.value] || '名称';
};

// 打开弹窗
const open = async (data: {
	scope: number;
	selectedIds: string[];
	selectedNames: string[];
	warehouseIds?: string[];
	zoneIds?: string[];
}) => {
	scope.value = data.scope;
	parentWarehouseIds.value = data.warehouseIds || [];
	parentZoneIds.value = data.zoneIds || [];
	
	// 恢复已选项
	selectedItems.value = data.selectedIds.map((id, idx) => ({
		id,
		name: data.selectedNames[idx] || id,
	}));
	
	searchKeyword.value = '';
	pageNum.value = 1;
	visible.value = true;
	
	await loadData();
};

// 加载数据
const loadData = async () => {
	loading.value = true;
	try {
		let res: any;
		const params = {
			keyword: searchKeyword.value,
			pageNum: pageNum.value,
			pageSize: pageSize.value,
		};
		
		if (scope.value === 1) {
			// 加载仓库
			res = await listWarehouses(params);
			const list = res.data?.list || [];
			tableData.value = list.map((item: any) => ({
				id: item.id,
				name: item.warehouseName || item.name,
				code: item.warehouseCode || item.code,
			}));
			total.value = res.data?.total || 0;
		} else if (scope.value === 2) {
			// 加载库区 - 使用warehouseIds数组一次性查询
			if (parentWarehouseIds.value.length === 0) {
				tableData.value = [];
				total.value = 0;
				return;
			}
			res = await listZones({ ...params, warehouseIds: parentWarehouseIds.value });
			const list = res.data?.list || res.data?.items || res.data || [];
			tableData.value = (Array.isArray(list) ? list : []).map((item: any) => ({
				id: item.id || item._id,
				name: item.zoneName || item.name,
				code: item.zoneCode || item.code,
			}));
			total.value = res.data?.total || tableData.value.length;
		} else if (scope.value === 3) {
			// 加载库位 - 使用zoneIds数组一次性查询
			if (parentZoneIds.value.length === 0) {
				tableData.value = [];
				total.value = 0;
				return;
			}
			res = await listLocations({ ...params, zoneIds: parentZoneIds.value });
			const list = res.data?.list || res.data?.items || res.data || [];
			tableData.value = (Array.isArray(list) ? list : []).map((item: any) => ({
				id: item.id || item._id,
				name: item.locationName || item.name,
				code: item.locationCode || item.code,
			}));
			total.value = res.data?.total || tableData.value.length;
		}
		
		// 恢复选中状态
		setTimeout(() => {
			tableData.value.forEach((row: any) => {
				if (selectedItems.value.some(item => item.id === row.id)) {
					tableRef.value?.toggleRowSelection(row, true);
				}
			});
		}, 0);
	} catch (error) {
		console.error('加载数据失败:', error);
	} finally {
		loading.value = false;
	}
};

// 搜索
const handleSearch = () => {
	pageNum.value = 1;
	loadData();
};

// 分页大小变化
const handleSizeChange = () => {
	pageNum.value = 1;
	loadData();
};

// 页码变化
const handleCurrentChange = () => {
	loadData();
};

// 选择变化
const handleSelectionChange = (selection: any[]) => {
	// 合并当前页选中和之前选中的（去除当前页取消选中的）
	const currentPageIds = tableData.value.map(item => item.id);
	
	// 移除当前页的旧选中
	const otherSelected = selectedItems.value.filter(item => !currentPageIds.includes(item.id));
	
	// 添加当前页新选中
	selectedItems.value = [...otherSelected, ...selection];
};

// 移除已选
const removeSelected = (item: any) => {
	const idx = selectedItems.value.findIndex(i => i.id === item.id);
	if (idx > -1) {
		selectedItems.value.splice(idx, 1);
		// 取消表格选中
		const row = tableData.value.find(r => r.id === item.id);
		if (row) {
			tableRef.value?.toggleRowSelection(row, false);
		}
	}
};

// 关闭弹窗
const handleClose = () => {
	visible.value = false;
};

// 确认选择
const handleConfirm = () => {
	emit('confirm', {
		selectedIds: selectedItems.value.map(item => item.id),
		selectedNames: selectedItems.value.map(item => item.name),
	});
	handleClose();
};

defineExpose({
	open,
});
</script>

<style scoped lang="scss">
.search-bar {
	display: flex;
	align-items: center;
}

.pagination-box {
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
}

.selected-box {
	margin-top: 15px;
	padding: 10px;
	background: #f5f7fa;
	border-radius: 4px;
	
	.selected-label {
		font-size: 14px;
		color: #606266;
		margin-right: 8px;
	}
}
</style>
