<template>
	<el-dialog title="选择仓库" v-model="isShowDialog" width="700px" :close-on-click-modal="false" @close="onCancel">
		<div class="search-box mb15">
			<el-input v-model="searchKeyword" placeholder="请输入关键词搜索" clearable style="width: 300px" @keyup.enter="onSearch">
				<template #append>
					<el-button :icon="Search" @click="onSearch" />
				</template>
			</el-input>
		</div>
		<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border highlight-current-row @current-change="onCurrentChange">
			<el-table-column type="index" label="序号" width="60" align="center" />
			<el-table-column prop="warehouseName" label="仓库名称" min-width="200" show-overflow-tooltip />
			<el-table-column prop="warehouseCode" label="编码" width="150" show-overflow-tooltip />
		</el-table>
		<div class="mt15" style="text-align: right">
			<el-pagination
				v-model:current-page="tableData.param.pageNum"
				v-model:page-size="tableData.param.pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:total="tableData.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="onSizeChange"
				@current-change="onPageChange"
			/>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取 消</el-button>
				<el-button type="primary" @click="onConfirm">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
export default {
	name: 'selectWarehouseDialog',
};
</script>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { listWarehouses } from '/@/api/assets/warehouse';

// 定义事件
const emit = defineEmits(['confirm']);

// 弹窗状态
const isShowDialog = ref(false);

// 搜索关键词
const searchKeyword = ref('');

// 当前选中的行
const currentRow = ref<any>(null);

// 表格数据
const tableData = reactive({
	data: [] as any[],
	total: 0,
	loading: false,
	param: {
		keyword: '',
		pageNum: 1,
		pageSize: 10,
	},
});

// 获取仓库列表
const getWarehouseList = async () => {
	tableData.loading = true;
	try {
		tableData.param.keyword = searchKeyword.value;
		const res: any = await listWarehouses(tableData.param);
		tableData.data = res.data?.list || [];
		tableData.total = res.data?.total || 0;
	} catch (error) {
		console.error('获取仓库列表失败:', error);
	} finally {
		tableData.loading = false;
	}
};

// 搜索
const onSearch = () => {
	tableData.param.pageNum = 1;
	getWarehouseList();
};

// 表格行选中
const onCurrentChange = (row: any) => {
	currentRow.value = row;
};

// 分页大小改变
const onSizeChange = (size: number) => {
	tableData.param.pageSize = size;
	getWarehouseList();
};

// 当前页改变
const onPageChange = (page: number) => {
	tableData.param.pageNum = page;
	getWarehouseList();
};

// 打开弹窗
const openDialog = () => {
	searchKeyword.value = '';
	currentRow.value = null;
	tableData.param.pageNum = 1;
	isShowDialog.value = true;
	getWarehouseList();
};

// 取消
const onCancel = () => {
	isShowDialog.value = false;
};

// 确定
const onConfirm = () => {
	if (currentRow.value) {
		emit('confirm', currentRow.value);
	}
	isShowDialog.value = false;
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>

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