<template>
	<view>
		<view class="form-area">
			<uni-forms
				:modelValue="allForm[0]"
				label-position="top"
				style="border: 1px solid #A9A9A9; box-sizing: border-box; padding: 30rpx; margin-bottom: 3vh;"
				v-show="formIndex >= 0"
			>
				<uni-forms-item
					label="维修数量"
					v-show="ifNo == 0"
				>
					<uni-easyinput type="number" placeholder="请输入" v-model="allForm[0].repairNum"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item
					label="选择配件"
				>
					<button @click="showTree(0)">{{ partBtn0 }}</button>
					<peng-tree
						v-model="allForm[0].partId"
						ref='tree0'
						:range="deptList"
						:multiple="false"
						@confirm="treeConfirm($event, 0)"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item
					label="配件数量"
				>
					<uni-number-box v-model="allForm[0].partNum"/>
				</uni-forms-item>
				<uni-forms-item
					label="维修人员"
				>
					<uni-data-select
					      v-model="allForm[0].repairer"
					      :localdata="repairerRange"
					    ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item
					label="维修内容"
				>
					<uni-easyinput type="textarea" placeholder="请输入内容" v-model="allForm[0].repairContent"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<uni-forms
				:modelValue="allForm[1]"
				label-position="top"
				style="border: 1px solid #A9A9A9; box-sizing: border-box; padding: 30rpx; margin-bottom: 3vh;"
				v-show="formIndex >= 1"
			>
				
				<uni-forms-item
					label="选择配件"
				>
					<button @click="showTree(1)">{{ partBtn1 }}</button>
					<peng-tree
						v-model="allForm[1].partId"
						ref='tree1'
						:range="deptList"
						:multiple="false"
						@confirm="treeConfirm($event, 1)"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item
					label="配件数量"
				>
					<uni-number-box v-model="allForm[1].partNum"/>
				</uni-forms-item>
				<uni-forms-item
					label="维修人员"
				>
					<uni-data-select
					      v-model="allForm[1].repairer"
					      :localdata="repairerRange"
					    ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item
					label="维修内容"
				>
					<uni-easyinput type="textarea" placeholder="请输入内容" v-model="allForm[1].repairContent"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<uni-forms
				:modelValue="allForm[2]"
				label-position="top"
				style="border: 1px solid #A9A9A9; box-sizing: border-box; padding: 30rpx; margin-bottom: 3vh;"
				v-show="formIndex >= 2"
			>
				
				<uni-forms-item
					label="选择配件"
				>
					<button @click="showTree(2)">{{ partBtn2 }}</button>
					<peng-tree
						v-model="allForm[2].partId"
						ref='tree2'
						:range="deptList"
						:multiple="false"
						@confirm="treeConfirm($event, 2)"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item
					label="配件数量"
				>
					<uni-number-box v-model="allForm[2].partNum"/>
				</uni-forms-item>
				<uni-forms-item
					label="维修人员"
				>
					<uni-data-select
					      v-model="allForm[2].repairer"
					      :localdata="repairerRange"
					    ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item
					label="维修内容"
				>
					<uni-easyinput type="textarea" placeholder="请输入内容" v-model="allForm[2].repairContent"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<uni-forms
				:modelValue="allForm[3]"
				label-position="top"
				style="border: 1px solid #A9A9A9; box-sizing: border-box; padding: 30rpx; margin-bottom: 3vh;"
				v-show="formIndex >= 3"
			>
				
				<uni-forms-item
					label="选择配件"
				>
					<button @click="showTree(3)">{{ partBtn3 }}</button>
					<peng-tree
						v-model="allForm[3].partId"
						ref='tree3'
						:range="deptList"
						:multiple="false"
						@confirm="treeConfirm($event, 3)"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item
					label="配件数量"
				>
					<uni-number-box v-model="allForm[3].partNum"/>
				</uni-forms-item>
				<uni-forms-item
					label="维修人员"
				>
					<uni-data-select
					      v-model="allForm[3].repairer"
					      :localdata="repairerRange"
					    ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item
					label="维修内容"
				>
					<uni-easyinput type="textarea" placeholder="请输入内容" v-model="allForm[3].repairContent"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<uni-forms
				:modelValue="allForm[4]"
				label-position="top"
				style="border: 1px solid #A9A9A9; box-sizing: border-box; padding: 30rpx; margin-bottom: 3vh;"
				v-show="formIndex >= 4"
			>
				
				<uni-forms-item
					label="选择配件"
				>
					<button @click="showTree(4)">{{ partBtn4 }}</button>
					<peng-tree
						v-model="allForm[4].partId"
						ref='tree4'
						:range="deptList"
						:multiple="false"
						@confirm="treeConfirm($event, 4)"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item
					label="配件数量"
				>
					<uni-number-box v-model="allForm[4].partNum"/>
				</uni-forms-item>
				<uni-forms-item
					label="维修人员"
				>
					<uni-data-select
					      v-model="allForm[4].repairer"
					      :localdata="repairerRange"
					    ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item
					label="维修内容"
				>
					<uni-easyinput type="textarea" placeholder="请输入内容" v-model="allForm[4].repairContent"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<uni-forms
				:modelValue="allForm[5]"
				label-position="top"
				style="border: 1px solid #A9A9A9; box-sizing: border-box; padding: 30rpx; margin-bottom: 3vh;"
				v-show="formIndex >= 5"
			>
				
				<uni-forms-item
					label="选择配件"
				>
					<button @click="showTree(5)">{{ partBtn5 }}</button>
					<peng-tree
						v-model="allForm[5].partId"
						ref='tree5'
						:range="deptList"
						:multiple="false"
						@confirm="treeConfirm($event, 5)"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item
					label="配件数量"
				>
					<uni-number-box v-model="allForm[5].partNum"/>
				</uni-forms-item>
				<uni-forms-item
					label="维修人员"
				>
					<uni-data-select
					      v-model="allForm[5].repairer"
					      :localdata="repairerRange"
					    ></uni-data-select>
				</uni-forms-item>
				<uni-forms-item
					label="维修内容"
				>
					<uni-easyinput type="textarea" placeholder="请输入内容" v-model="allForm[5].repairContent"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view class="btn-area">
				<view
					@click="addForm"
					style="background-color: #3788FF; color: #fff;"
				>
					添加配件
				</view>
				<view
					@click="subForm"
					style="border: 1px solid #EBEBEB;"
				>
					维修完成
				</view>
			</view>
		</view>
		<u-loading-page :loading="showLoading" color="#000" loading-text="表单提交中,请稍后..."></u-loading-page>
	</view>
</template>

<script>
import { basePath } from '../../public'
import form from '../../uni_modules/uview-ui/libs/config/props/form';
	export default {
		data() {
			return {
				formIndex: 0,
				ifNo: '',
				showLoading: false,
				allForm: [
					{
						repairNum: 1,
						partId: '',
						partNum: '',
						repairer: '',
						repairContent: ''
					},
					{
						partId: '',
						partNum: '',
						repairer: '',
						repairContent: ''
					},
					{
						partId: '',
						partNum: '',
						repairer: '',
						repairContent: ''
					},
					{
						partId: '',
						partNum: '',
						repairer: '',
						repairContent: ''
					},
					{
						partId: '',
						partNum: '',
						repairer: '',
						repairContent: ''
					},
					{
						partId: '',
						partNum: '',
						repairer: '',
						repairContent: ''
					}
				],
				repairerRange: [
					
				],
				deptList: [],
				partBtn0: '请选择配件',
				partBtn1: '请选择配件',
				partBtn2: '请选择配件',
				partBtn3: '请选择配件',
				partBtn4: '请选择配件',
				partBtn5: '请选择配件',
				submitForm: [],
				totalSub: {},
				id: '',
				taskId: '',
				maId: '',
				typeId: ''
			}
		},
		methods: {
			showTree (index) {
				switch (index) {
					case 0:
						this.$refs.tree0._show()
						break;
					case 1:
						this.$refs.tree1._show()
						break;
					case 2:
						this.$refs.tree2._show()
						break;
					case 3:
						this.$refs.tree3._show()
						break;
					case 4:
						this.$refs.tree4._show()
						break;
					case 5:
						this.$refs.tree5._show()
						break;
				}
			},
			treeConfirm (e, index) {
				console.log(e, index);
				switch (index) {
					case 0:
						this.partBtn0 = e[0].name
						this.allForm[0].partId = e[0].id
						break;
					case 1:
						this.partBtn1 = e[0].name
						this.allForm[1].partId = e[0].id
						break;
					case 2:
						this.partBtn2 = e[0].name
						this.allForm[2].partId = e[0].id
						break;
					case 3:
						this.partBtn3 = e[0].name
						this.allForm[3].partId = e[0].id
						break;
					case 4:
						this.partBtn4 = e[0].name
						this.allForm[4].partId = e[0].id
						break;
					case 5:
						this.partBtn5 = e[0].name
						this.allForm[5].partId = e[0].id
						break;
				}
			},
			addForm () {
				this.formIndex++
				if (this.formIndex >= 6) {
					uni.showToast({
						icon: 'none',
						title: '无法再添加！'
					})
				}
			},
			subForm () {
				let that = this
				this.submitForm = this.allForm.slice(0, this.formIndex + 1)
				console.log(this.submitForm);
				this.totalSub.partStrList = JSON.stringify(this.submitForm) 
				this.totalSub.id = this.id
				this.totalSub.taskId = this.taskId
				this.totalSub.maId = this.maId
				this.totalSub.typeId = this.typeId
				this.totalSub.companyId = uni.getStorageSync('userInfo').sysUser.companyId
				this.totalSub.userId = uni.getStorageSync('userInfo').userid
				this.totalSub.repairType = 1
				console.log(this.totalSub);
				this.showLoading = true
				that.$api.fix.submitFix(that.totalSub).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							success: () => {
								that.showLoading = false
								uni.switchTab({
									url: '/pages/workSpace/workSpace'
								})
							}
						})
					} else {
						that.showLoading = false
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			handleTree (data, id, parentId, children) {
			  let config = {
			    id: id || 'id',
			    parentId: parentId || 'parentId',
			    childrenList: children || 'children'
			  };
			
			  var childrenListMap = {};
			  var nodeIds = {};
			  var tree = [];
			
			  for (let d of data) {
			    let parentId = d[config.parentId];
			    if (childrenListMap[parentId] == null) {
			      childrenListMap[parentId] = [];
			    }
			    nodeIds[d[config.id]] = d;
			    childrenListMap[parentId].push(d);
			  }
			
			  for (let d of data) {
			    let parentId = d[config.parentId];
			    if (nodeIds[parentId] == null) {
			      tree.push(d);
			    }
			  }
			
			  for (let t of tree) {
			    adaptToChildrenList(t);
			  }
			
			  function adaptToChildrenList(o) {
			    if (childrenListMap[o[config.id]] !== null) {
			      o[config.childrenList] = childrenListMap[o[config.id]];
			    }
			    if (o[config.childrenList]) {
			      for (let c of o[config.childrenList]) {
			        adaptToChildrenList(c);
			      }
			    }
			  }
			  return tree;
			},
			veri (data) {
				let that = this
				if (!data || data.length <= 0) {
					return null;
				}
				return data.map(x => {
					/* let model
					if (x.id.includes('u')) {
						model = {
							name: x.name,
							id: x.userId,
						};
					} else {
						model = {
							name: x.name,
							id: x.id
						};
					} */
					const model = {
						name: x.paName,
						id: x.paId
					}
				    
				    const children = that.veri(x.children);
						
				    if (children) { 
					    model.children = children;
				    }
					
					return model;
				});
			}
		},
		onShow() {
			let that = this
			// 获取维修人员
			that.$api.fix.fixCrew().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.repairerRange = res.data.data.map((item) => {
						return {
							text: item['nickName'],
							value: item['userId']
						}
					})
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取配件树
			that.$api.fix.maList().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.deptList = that.veri(that.handleTree(res.data.data, 'paId')) 
				}
				console.log(that.deptList);
			}).catch(err => {
				console.log(err);
			})
		},
		onLoad(params) {
			console.log(params);
			this.id = params.id
			this.taskId = params.taskId
			this.maId = params.maId
			this.typeId = params.typeId
			this.ifNo = params.ifNo
		}
	}
</script>

<style lang="scss">
	.form-area{
		width: 90%;
		margin: 2vh auto;
		.btn-area{
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 3vh auto;
			view{
				box-sizing: border-box;
				padding: 15rpx 40rpx;
				border-radius: 15rpx;
				font-size: 14px;
			}
		}
	}
</style>
