<template>
	<!-- 详情 -->
	<view class="detail-container">
		<view class="info">
			<view class="title">
				<view>当前工序：{{saveData.processCode}}</view>
			</view>
			<!-- 主数据 -->
			<view class="dec">
				<view class="dec-item">
					<view>报工人员：</view>
					<view><u-input v-model="formData.reportPersonName" type="select" @click="showWorker = true"  placeholder="请选择人员"/></view>
				</view>
				<view class="dec-item">
					<view>报工数量：</view>
					<view><u-input v-model="formData.reportCount" type="number" @update:modelValue="calculatePass()" placeholder="请输入数量" /></view>
				</view>
				<view class="dec-item">
					<view>报工工时：</view>
					<view><u-input v-model="formData.workTerm" type="number" placeholder="请输入工时" /></view>
				</view>
				<view class="dec-item">
					<view>是否质检：</view>
					<view>
						<u-switch v-model="formData.checkFlag" style="width:47px" @change="changeStatus()"></u-switch>
						</view>
				</view>
				<view class="dec-item">
					<view>合格数量：</view>
					<view><u-input :disabled="!formData.checkFlag" v-model="formData.qualified" type="number" placeholder="请输入合格数量"   @update:modelValue="calculatePass()"   /></view>
				</view>
				<view class="dec-item">
					<view>不合格数量：</view>
					<view><u-input v-model="formData.unqualified" type="number" disabled="true"/></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<button class="sure" @click="handleSubmit" :loading='loading' :disabled='loading'>提交处理</button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
	</view>
	<u-popup v-model="showWorker" mode="bottom" border-radius="14" length="30%">
			<view>
				<u-select v-model="showWorker" mode="mutil-column-auto"  :list="workerList" @confirm="confirmSelectWorker"></u-select>
			</view>
		</u-popup>
	<u-popup v-model="showType" mode="bottom" border-radius="14" length="30%">
			<view>
				<u-select v-model="showType" :list="typeList" @confirm="confirmSelectType"></u-select>
			</view>
		</u-popup>
</template>

<script setup lang="ts">
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import * as workSchedulingListApi from '@/api/mes/workScheduling/index.ts'
	const { proxy } = getCurrentInstance()
	const paramData = ref()
	const showWorker = ref(false)
	const showType = ref(false)
	const workerList = ref([])
	const typeList = ref([{label:'是',value: '1'},{label:'否',value: '2'}])
	const nodeInfo = ref({
		planDayCode:'PO20240430-0011',
		processCode:'QD_CY_01'
	})
	const reportPersonList = ref([])
	const formData = ref({
		checkFlag:false,
		reportCount:'',
		qualified:'',
		unqualified:'',
		reportPerson:'',
		reportPersonName:'',
		workTerm:''
	})
	const saveData = ref({
		processCode:'',
		reportDate:'',
		schedulingCode:'',
		list:[]
	})
	
	function changeStatus(){
		if(formData.value.checkFlag){
		}
		else
		{
			formData.value.qualified = ''
			formData.value.unqualified = ''
		}
	}
	function calculatePass(){
		if(formData.value.checkFlag){
			formData.value.unqualified = formData.value.reportCount - formData.value.qualified
		}
	}
	
	//提交接口
	function submitData(){
		handleData()
		workSchedulingListApi.reportByProcess(saveData.value).then((res) => {
			proxy.$modal.closeLoading()
			if (res.code == 0) {
				proxy.$modal.showToast('成功')
				setTimeout(() => {
					proxy.$tab.navigateBack()
				}, 1500)
			} else {
				proxy.$modal.showToast('失败')
			}
		}).catch(() => {
			proxy.$modal.closeLoading()
		})
	}
	
	function handleData(){
		saveData.value.list = []
		reportPersonList.value.forEach(person => {
			const save = {
				checkFlag:formData.value.checkFlag,
				reportCount:formData.value.reportCount,
				qualified:formData.value.qualified,
				unqualified:formData.value.unqualified,
				reportPerson:person.reportPerson,
				workTerm:formData.value.workTerm
			}
			saveData.value.list.push(save)
		});
		// 获取当前日期和时间并格式化
		const currentDate = new Date();
		const formattedDate = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
		const formattedTime = currentDate.toTimeString().split(' ')[0]; // HH:mm:ss
		// 设置 reportDate 为当前日期和时间
		saveData.value.reportDate = `${formattedDate} ${formattedTime}`;
		console.log(saveData.value)
	}
	
	
	// 选择人员回调函数
	function confirmSelectWorker(val){
		const data = {
			reportPerson:val[0].value
		}
		const exists = reportPersonList.value.some(person => person.reportPerson === data.reportPerson);
		if (!exists){
			reportPersonList.value.push(data);
			if(formData.value.reportPersonName == ''){
				formData.value.reportPersonName =  val[0].label
			}else{
				formData.value.reportPersonName = formData.value.reportPersonName + ","+ val[0].label
			}
		}
	}
	
	// 提交处理请求函数
	function handleSubmit(){
		proxy.$modal.confirm('确定提交处理吗').then(() => {
			submitData()
		})
	}
	onLoad((option) => {
		if (option.obj) {
		    paramData.value = JSON.parse(decodeURIComponent(option.obj)); // 将字符串转换为对象并存入paramData
			nodeInfo.value.planDayCode = paramData.value.planNoDay
			nodeInfo.value.processCode = paramData.value.nodeCode
			saveData.value.processCode = paramData.value.nodeCode
			saveData.value.schedulingCode = paramData.value.schedulingCode
		}
	})
	onShow(() => {
		getPageChildren()
	})
	// 获取选择人员函数
	function getPageChildren(){
		workSchedulingListApi.getWorkerList(nodeInfo.value).then((res) => {
			if (res.data) {
				workerList.value = transList(res.data)
			} else {
			}
		}).catch(() => {
		})
	}
	//数据转换
	function transList(data) {
		console.log(data)
	    const list = data.map(item => {
	        return {
	            "label": item.workerName,
	            "value": item.workerCode
	        };
	    });
	    return list;
	}
	
</script>

<style lang="scss" scoped>
	.detail-container {
		min-height: 100vh;
		background: white;
	}

	.line {
		background: #f5f5f5;
		height: 20rpx;
	}

	.info {
		background: white;
	}


	.tab {
		border-bottom: 1px solid #e4e4e4;

	}

	.title {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #e4e4e4;

		view {
			&:nth-child(1) {
				flex: 1;
				border-left: 10rpx solid #409eff;
				padding-left: 20rpx;
				font-weight: bold;
			}
		}
	}

	.dec {
		padding: 30rpx;

		.dec-item {
			padding-bottom: 30rpx;
			display: flex;

			view {
				&:nth-child(1) {
					width: 180rpx;
				}

				&:nth-child(2) {
					color: #888888;
					flex: 1;
					width: 0px;
					word-wrap: break-word;
				}
			}
		}
	}

	.dec2 {
		padding: 10rpx 30rpx;
		display: flex;

		view {
			&:nth-child(1) {
				width: 180rpx;
			}

			&:nth-child(2) {
				color: #888888;
				flex: 1;
				width: 0px;
				word-wrap: break-word;
			}
		}


	}

	.items {
		border-radius: 12rpx;
		background: #F5F5F5;
		padding-bottom: 20rpx;

		.items-name {
			padding: 20rpx;
			border-bottom: 1px solid #dedede;
		}

		.items-dec {
			padding: 0px 20rpx;
			margin-top: 20rpx;
		}
	}


	.list {
		padding: 20rpx;

		.item {
			display: flex;
			margin-bottom: 20rpx;

			.item-box {
				border-radius: 12rpx;
				border: 1px solid #dedede;
				border-radius: 12rpx;

				flex: 1;
				width: 0rpx;
			}

			.spare-title {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;
				display: flex;

				.title-txt {
					color: #409eff;
					font-size: 30rpx;
					font-weight: bold;
					flex: 1;
				}
			}

			.dec {
				color: #9c9c9c;
				padding: 0rpx 30rpx 20rpx;
			}

		}
	}

	.add-btn {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 22;
	}

	.btns {
		display: flex;


		button {
			flex: 1;
		}

		.sure {
			background: #409eff;
			color: white;
			border-radius: 0px;

			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}

		.reset {
			background: #ff7a45;
			border-radius: 0px;

			&::after {
				border-radius: 0px;
			}
		}
	}
</style>