<template>
	<el-drawer
		v-model="visible"
		title="选择仓库"
		direction="rtl"
		size="400px"
		:close-on-click-modal="false"
	>
		<div class="warehouse-select-container">
			<div class="search-box">
				<el-input v-model="searchKeyword" placeholder="搜索仓库名称" clearable>
					<template #prefix>
						<el-icon><ele-Search /></el-icon>
					</template>
				</el-input>
			</div>
			
			<div class="select-all">
				<el-checkbox v-model="selectAll" :indeterminate="isIndeterminate" @change="handleSelectAll">
					全选
				</el-checkbox>
				<span class="selected-count">已选 {{ selectedIds.length }} 个</span>
			</div>
			
			<div class="warehouse-list" v-loading="loading">
				<el-checkbox-group v-model="selectedIds" @change="handleSelectionChange">
					<div v-for="item in filteredList" :key="item.id" class="warehouse-item">
						<el-checkbox :label="item.id">
							<div class="warehouse-info">
								<span class="warehouse-name">{{ item.warehouseName }}</span>
								<span class="warehouse-code">{{ item.warehouseCode }}</span>
							</div>
						</el-checkbox>
					</div>
				</el-checkbox-group>
				<el-empty v-if="filteredList.length === 0" description="暂无数据" />
			</div>
		</div>
		
		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
		</template>
	</el-drawer>
</template>

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

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

const visible = ref(false);
const loading = ref(false);
const searchKeyword = ref('');
const warehouseList = ref<any[]>([]);
const selectedIds = ref<string[]>([]);

// 过滤后的列表
const filteredList = computed(() => {
	if (!searchKeyword.value) return warehouseList.value;
	const keyword = searchKeyword.value.toLowerCase();
	return warehouseList.value.filter(item => 
		item.warehouseName?.toLowerCase().includes(keyword) ||
		item.warehouseCode?.toLowerCase().includes(keyword)
	);
});

// 全选状态
const selectAll = computed({
	get: () => selectedIds.value.length === warehouseList.value.length && warehouseList.value.length > 0,
	set: () => {}
});

// 半选状态
const isIndeterminate = computed(() => {
	return selectedIds.value.length > 0 && selectedIds.value.length < warehouseList.value.length;
});

// 加载仓库列表
const loadWarehouseList = async () => {
	loading.value = true;
	try {
		const res: any = await listWarehouses({ pageNum: 1, pageSize: 1000 });
		warehouseList.value = res.data?.list || [];
	} catch (error) {
		console.error('加载仓库列表失败:', error);
	} finally {
		loading.value = false;
	}
};

// 打开抽屉
const openDrawer = (ids: string[] = []) => {
	selectedIds.value = [...ids];
	loadWarehouseList();
	visible.value = true;
};

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

// 全选/取消全选
const handleSelectAll = (val: boolean) => {
	if (val) {
		selectedIds.value = warehouseList.value.map(item => item.id);
	} else {
		selectedIds.value = [];
	}
};

// 选择变化
const handleSelectionChange = () => {
	// 触发更新
};

// 确认选择
const handleConfirm = () => {
	const selectedItems = warehouseList.value.filter(item => selectedIds.value.includes(item.id));
	emit('confirm', selectedIds.value, selectedItems);
	handleClose();
};

// 获取选中的仓库名称
const getSelectedNames = () => {
	return warehouseList.value
		.filter(item => selectedIds.value.includes(item.id))
		.map(item => item.warehouseName)
		.join('、');
};

defineExpose({
	openDrawer,
	getSelectedNames,
});
</script>

<style scoped lang="scss">
.warehouse-select-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	
	.search-box {
		margin-bottom: 16px;
	}
	
	.select-all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #ebeef5;
		margin-bottom: 8px;
		
		.selected-count {
			color: #909399;
			font-size: 12px;
		}
	}
	
	.warehouse-list {
		flex: 1;
		overflow-y: auto;
		
		.warehouse-item {
			padding: 10px 0;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.warehouse-info {
				display: flex;
				flex-direction: column;
				
				.warehouse-name {
					font-size: 14px;
					color: #303133;
				}
				
				.warehouse-code {
					font-size: 12px;
					color: #909399;
					margin-top: 2px;
				}
			}
		}
	}
}
</style>
