<!-- 
    filename: ProcessBomList.vue
    author: liubin
    date: 2023-10-20 15:00:58
    description: 
-->

<template>
	<section class="process-bom">
		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />

		<div
			class="btns"
			style="
				text-align: right;
				position: absolute;
				top: 20px;
				right: 20px;
				display: flex;
			">
			<el-button
				type="primary"
				plain
				:disabled="currentDet == null"
				class="btn-create"
				@click="handleAddEquipment"
				icon="el-icon-plus">
				分配设备
			</el-button>
			<el-input
				icon="el-icon-search"
				placeholder="搜索"
				v-model="searchText"
				:disabled="currentDet == null"
				@change="handleSearchTextChange"
				clearable
				style="margin-left: 20px">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-data="list"
			@emitFun="handleEmitFun">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				label="操作"
				:width="120"
				:method-list="tableBtn"
				@clickBtn="handleTableBtnClick" />
		</base-table>

		<!-- 分页组件 -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<base-dialog
			dialogTitle="选择设备"
			:dialogVisible="open"
			width="45%"
			@close="cancel"
			@cancel="cancel"
			@confirm="submitForm">
			<!-- <CustomTransfer /> -->
			<BomSelector
				ref="bomSelector"
				v-if="open"
				:bom-list="bomList"
				:value="selectedBoms"
				@update="selectedBoms = $event" />
		</base-dialog>
	</section>
</template>

<script>
import BomSelector from './BomSelector.vue';

export default {
	name: 'ProcessBom',
	components: { BomSelector },
	props: {
		currentDet: {
			type: Object,
			default: null,
		},
	},
	data() {
		return {
			open: false,
			eqList: [],
			bomList: [],
			finalList: [],
			choosedEquipments: [],
			searchBarFormConfig: [{ label: '工序下设备' }],
			tableProps: [
				{ prop: 'equName', label: '设备名称' },
				{ prop: 'materialName', label: '物料BOM' },
				{ prop: 'valueName', label: '参数BOM' },
			],
			list: [],
			total: 0,
			tableBtn: [],
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				equipmentName: '',
			},
			searchText: '',
			selectedBoms: [],
			timer: null,
		};
	},
	watch: {
		currentDet: {
			handler(val) {
				console.log('currentDet', val);
				if (val != null) {
					this.getList(val);
				} else {
					this.clearList();
				}
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		handleEmitFun() {},

		handleTableBtnClick() {},

		handleSearchTextChange(val) {
			if (this.timer) clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				console.log('geting list.......');
				this.queryParams.equipmentName = val;
				this.$nextTick(() => {
					this.getList(this.currentDet);
				});
			}, 300);
		},

		put(payload) {
			return this.http(this.updateUrl, 'put', payload);
		},
		post(payload) {
			return this.http(this.addUrl, 'post', payload);
		},
		recv(payload) {
			return this.http(this.pageUrl, 'get', payload);
		},
		info(payload) {
			return this.http(this.infoUrl, 'get', payload);
		},
		http(url, method, payload) {
			return this.$axios({
				url,
				method,
				params: method === 'get' ? payload : null,
				data: method !== 'get' ? payload : null,
			});
		},
		submitForm() {
			// 现将子组件的修改提交更新至本组件
			this.$refs.bomSelector.commit();
			// 再提交至后端
			this.$nextTick(async () => {
				console.log('selectedBoms', this.selectedBoms);
				if (this.selectedBoms.length) {
					const { code, data } = await this.http(
						'/extend/process-flow-det-equipment/createList',
						'post',
						this.selectedBoms.map((item) => ({
							...item,
							flowDetId: this.currentDet.detId,
						}))
					);
					if (code == 0) {
						this.$message.success('操作成功');
						this.getList(this.currentDet);
						this.cancel();
					} else {
						this.$message.error('操作失败');
					}
				} else {
					this.$message.info('请选择设备');
				}
			});
		},
		async getList({
			detId,
			detName,
			detDesc,
			flowId,
			sectionName,
			sectionId,
		} = {}) {
			console.log('get list', detId, detName, flowId);
			const { data, code } = await this.http(
				'/extend/process-flow-det-equipment/page',
				'get',
				{ flowDetId: detId, ...this.queryParams }
			);
			if (code == 0) {
				this.list = data.list;
				this.total = data.total;
			} else {
				this.list.splice(0);
				this.total = 0;
			}

			// 获取设备及bom列表
			this.http('/extend/process-flow-det/getEquipmentDetBySectionId', 'post', {
				sectionId,
				flowDetId: detId,
			}).then(({ code, data }) => {
				if (code == 0) {
					this.bomList = data.map((eq) => {
						eq.materialsBom = eq.materialsBom || [];
						eq.valuesBom = eq.valuesBom || [];
						// 设置选中状态
						eq.materialsBom.chosen = eq.materialsBomChoseId ?? null;
						eq.valuesBom.chosen = eq.valuesBomChoseId ?? null;
						if (eq.equChose || eq.materialsBom.chosen || eq.valuesBom.chosen) {
							this.selectedBoms.push({
								equipmentId: eq.id,
								equMaterialBomId: eq.materialsBom.chosen,
								equValueBomId: eq.valuesBom.chosen,
							});
						}
						// 设置设备id
						eq.materialsBom.equipmentId = eq.id;
						eq.valuesBom.equipmentId = eq.id;
						return eq;
					});
				} else {
					this.bomList.splice(0);
				}
			});
		},
		async handleAddEquipment() {
			this.open = true;
		},
		cancel() {
			this.open = false;
		},
		clearList() {
			this.list = [];
		},
	},
};
</script>

<style scoped lang="scss">
.process-bom {
	position: relative;
	flex: 1;
	padding: 12px 20px;
	background: #fff;
	border-radius: 8px;
}
</style>
