<!-- 
    filename: CustomTransfer.vue
    author: liubin
    date: 2023-11-17 10:22:28
    description: 
-->

<template>
	<div class="custom-transfer">
		<CustomTransferBox
			key="left"
			class="left-ctb"
			title="设备列表"
			:candidate-list="candidateList"
			:selected-list="selectedList"
			@selected-list-change="handleChange" />
		<div
			class="btns"
			style="
				display: flex;
				flex-direction: column;
				gap: 12px;
				justify-content: center;
				align-items: center;
			">
			<el-button style="margin: 0">&gt;</el-button>
			<el-button style="margin: 0" disabled>&lt;</el-button>
		</div>
		<CustomTransferBox
			key="right"
			class="right-ctb"
			title="已选BOM"
			:candidate-list="[]"
			:selected-list="[]"
			@selected-list-change="handleChange" />
	</div>
</template>

<script>
import CustomTransferBox from './CustomTransferBox.vue';
export default {
	name: 'CustomTransfer',
	components: { CustomTransferBox },
	props: ['sectionId', 'selectedBoms'],
	data() {
		return {
			pageUrl: '',
			list: [],
			bomLoading: false,
			queryParams: {
				pageNo: 1,
				pageSize: 100,
			},
			candidate: [],
			selectedList: [],
		};
	},
	computed: {},
	methods: {
		http(url, method, payload) {
			return this.$axios({
				url,
				method,
				params: method === 'get' ? payload : null,
				data: method !== 'get' ? payload : null,
			});
		},
		// 获取设备列表
		async getList() {
			const res = await this.http.get(this.pageUrl, {
				workshopSectionId: this.sectionId,
				...this.queryParams,
			});
			if (res.code === 200) {
				// this.list = res.data;
				this.list = [
					{ equipmentId: 1, equipmentName: '设备1' },
					{ equipmentId: 2, equipmentName: '设备2' },
					{ equipmentId: 3, equipmentName: '设备3' },
				];
			}
		},
		// 点击设备时获取对应的参数bom和物料bom
		async getMaterialBom(eqId) {},
		async getParamBom(eqId) {},
		async handleEquipmentClick(eqItem) {
			this.bomLoading = true;
			eqItem.children = [];

			const { code: materialCode, data: materialData } =
				await this.getMaterialBom(eqItem.equipmentId);
			const { code: paramCode, data: paramData } = await this.getParamBom(
				eqItem.equipmentId
			);

			if (materialCode == 0) {
				eqItem.children.push(...materialData);
			}
			if (paramCode == 0) {
				eqItem.children.push(...paramData);
			}
			this.bomLoading = false;
		},
		//
		handleChange() {},
	},
};
</script>

<style scoped lang="scss">
.custom-transfer {
	background: '#cfc2';
	display: flex;
}

.btns {
	padding: 10px;
}

.left-ctb {
	flex: 1;
}

.right-ctb {
	flex: 1;
}
</style>
