<!--
 * @Author: zwq
 * @Date: 2024-07-10 13:43:41
 * @LastEditors: zwq
 * @LastEditTime: 2024-07-15 16:00:36
 * @Description:
-->
<template>
	<el-form ref="form" :rules="rules" label-width="110px" :model="form">
		<el-row>
			<el-col :span="12">
				<el-form-item label="部门名称" prop="deptId">
					<el-select
						v-model="form.deptId"
						filterable
						clearable
						style="width: 100%"
						placeholder="请选择部门">
						<el-option
							v-for="item in deptArr"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="计划名称" prop="name">
					<el-input v-model="form.name" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="相关班组" prop="teamIdList">
					<el-select
						v-model="form.teamIdList"
						filterable
						clearable
						multiple
						style="width: 100%"
						placeholder="请选择班组">
						<el-option
							v-for="item in teamList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="相关班次" prop="classesIdList">
					<el-select
						v-model="form.classesIdList"
						filterable
						clearable
						multiple
						style="width: 100%"
						placeholder="请选择班次">
						<el-option
							v-for="item in classList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="是否生产班组" prop="isProduction">
					<el-radio-group v-model="form.isProduction">
						<el-radio :label="true">是</el-radio>
						<el-radio :label="false">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-show="form.isProduction">
				<tree-transfer
					:title="title"
					:from_data="fromData"
					:to_data="toData"
					@add-btn="add"
					@remove-btn="remove"
					pid="productionLineId"
					:defaultProps="{ label: 'name' }"
					height="450px"
					:mode="mode"
					filter
					openAll></tree-transfer>
			</el-col>
		</el-row>
	</el-form>
</template>
<script>
import {
	getGroupPlan,
	updateGroupPlan,
	createGroupPlan,
	getGroupPlanTree,
	createGroupPlanLine,
	updateGroupPlanLine,
	getGroupPlanLine,
	getLoginUserDeptId,
} from '@/api/base/groupSchedulingPlan';

import { listDept } from '@/api/system/dept';
import { listEnabled } from '@/api/base/groupTeam';
import { listClassesEnabled } from '@/api/base/groupClasses';
import treeTransfer from 'el-tree-transfer';

export default {
	components: { treeTransfer },
	name: '',
	data() {
		return {
			form: {
				id: '',
				name: '',
				deptId: '',
				teamIdList: [],
				classesIdList: [],
				remark: '',
				isProduction: false,
			},
			deptArr: [], //部门
			teamList: [], //班组
			classList: [], //班次
			rules: {
				name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
				deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
				teamIdList: [
					{ required: true, message: '请选择相关班组', trigger: 'change' },
				],
				classesIdList: [
					{ required: true, message: '请选择相关班次', trigger: 'change' },
				],
			},
			title: ['待选', '已选'], //标题 类型：Array 必填：false 默认：["源列表", "目标列表"]
			mode: 'transfer',
			fromData: [], //左边内容
			toData: [], //右边已选内容
		};
	},
	methods: {
		init(id) {
			this.form.id = id || undefined;
			this.fromData = [];
			this.toData = [];
			this.getArr();
			this.$nextTick(() => {
				this.$refs['form'].resetFields();
				if (this.form.id) {
					getGroupPlan(id).then((response) => {
						this.form = response.data;
						if (this.form.isProduction) {
							getGroupPlanLine(id).then((res) => {
								this.toData = res.data ? res.data.datas : [];
								this.getFilterLeftData(this.fromData, this.toData); //编辑时组件有bug，左边相同数据不消失
							});
						}
					});
				} else {
					getLoginUserDeptId().then((res) => {
						this.form.deptId = res.data;
					});
				}
			});
		},
		getArr() {
			listDept().then((response) => {
				this.deptArr = response.data;
			});
			listEnabled().then((res) => {
				this.teamList = res.data || [];
			});
			listClassesEnabled().then((res) => {
				this.classList = res.data || [];
			});
			getGroupPlanTree().then((res) => {
				this.fromData = res.data;
				this.fromData.forEach((item) => {
					item.productionLineId = 0;
				});
			});
		},
		// 监听穿梭框组件添加
		add(fromData, toData, obj) {
			console.log('fromData:', fromData);
			console.log('toData:', toData);
		},
		// 监听穿梭框组件移除
		remove(fromData, toData, obj) {
			console.log('fromData:', fromData);
			console.log('toData:', toData);
		},
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id) {
						//编辑
						updateGroupPlan({ ...this.form }).then((res) => {
							if (res.code === 0) {
								if (this.form.isProduction) {
									const params = {
										planId: this.form.id,
										list: this.toData,
									};
									updateGroupPlanLine(params).then((res) => {
										this.$modal.msgSuccess('操作成功');
										this.$emit('successSubmit');
									});
								}
							}
						});
					} else {
						createGroupPlan({ ...this.form }).then((res) => {
							if (res.code === 0) {
								if (this.form.isProduction) {
									const params = {
										planId: res.data,
										list: this.toData,
									};
									createGroupPlanLine(params).then((res) => {
										this.$modal.msgSuccess('操作成功');
										this.$emit('successSubmit');
									});
								}
							}
						});
					}
				} else {
					return false;
				}
			});
		},
		formClear() {
			this.$refs.form.resetFields();
		},

		/** 消除组件左边与右边选中数据相同项 */
		// 处理过滤数据
		getFilterLeftData(data, selData) {
			for (let i = data.length - 1; i >= 0; i--) {
				for (let j = selData.length - 1; j >= 0; j--) {
					if (data[i] && data[i].id === selData[j].id) {
						// 当id相等可以删除的情况 即：没有子级可以删除；
						if (!data[i].children) {
							data.splice(i, 1);
						} else {
							this.getFilterLeftData(data[i].children, selData[j].children);
						}
					}
				}
			}
		},
	},
};
</script>
