<template>
	<el-dialog v-model="visible" title="选择设备" width="800px" :close-on-click-modal="false" @close="onCancel">
		<div style="margin-bottom: 12px">
			<el-input v-model="search" placeholder="输入关键字搜索" style="width: 240px; margin-right: 8px" @keyup.enter="fetchData(true)" />
			<el-button type="primary" @click="fetchData(true)">搜索</el-button>
		</div>
		<el-table :data="tableData" border style="width: 100%" @selection-change="onSelectionChange" ref="tableRef">
			<el-table-column type="selection" width="50" />
			<el-table-column type="index" label="序号" width="60" />
			<el-table-column prop="category_name" label="设备分类" />
			<el-table-column prop="warehouse" label="存放仓库" />
		</el-table>
		<el-pagination
			style="margin-top: 12px; text-align: right"
			:current-page="page"
			:page-size="pageSize"
			:total="total"
			@current-change="onPageChange"
		/>
		<template #footer>
			<el-button @click="onCancel">取消</el-button>
			<el-button type="primary" @click="onConfirm">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
import * as deviceApi from '../../../../device/api';
import * as storeapi from '../../../../storelist/api';

const props = defineProps<{ visible: boolean }>();
const emit = defineEmits(['update:visible', 'confirm']);

const visible = ref(props.visible);
watch(
	() => props.visible,
	(v) => (visible.value = v)
);

const search = ref('');
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
const selectedRows = ref([]);
const warehouseMap = ref<Record<number, string>>({});


function fetchWarehouseMap() {
    storeapi.GetPermission().then((res) => {
        const map: Record<number, string> = {};
        res.data.forEach((item) => {
            map[item.id] = item.name;
        });
        warehouseMap.value = map;
    });
}


async function fetchData(resetPage = false) {
	if (resetPage) page.value = 1;
	await fetchWarehouseMap(); 
	deviceApi.GetList({ page: page.value, limit: pageSize.value, category_name: search.value })
	.then((res) => {
		const devices = res.data
		.filter(device => device.available_quantity > 0)
		.map((device) => ({
            ...device,
            warehouse: `${warehouseMap.value[device.warehouse] || `ID:${device.warehouse}`} (${device.available_quantity})`
        }));
		tableData.value = devices;
		// tableData.value = [...res.data];
		total.value = res.total;
	});
}
function onSelectionChange(val) {
	selectedRows.value = val;
}
function onPageChange(val) {
	page.value = val;
	fetchData();
}
function onConfirm() {
	emit('confirm', selectedRows.value);
	emit('update:visible', false);
}
function onCancel() {
	emit('update:visible', false);
}
watch([visible, page], (v) => {
	if (visible.value) fetchData();
});
</script>
