<template>
	<!-- 详情 -->
	<view class="detail-container">
		<view class="info">
			<view class="title">
				<view>处理产品返线登记</view>
			</view>
			<!-- 主数据 -->
			<view class="dec">
<!-- 				<view class="dec-item" @click="selectType">
					<view>处理类型：</view>
					<view>{{handleType.label}}</view>
				</view> -->
				<view class="dec-item" @click="selectWorker" >
					<view>处理人员：</view>
					<view>{{handleWorker.label}}</view>
				</view>
				<view class="dec-item">
					<view>处理结果：</view>
					<view><u-input v-model="handleResult" placeholder="请输入结果" /></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="50%">
			<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="50%">
			<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 productBacklineApi from "@/api/mes/productBackline/productBacklineApi.ts"
	import * as productOfflineApi from "@/api/mes/productOffline/productOfflineApi.ts"
	import * as dictApi from "@/api/mes/dict/dictApi.ts"
	const { proxy } = getCurrentInstance()
	const params = ref({
		pageNo: 1,
		pageSize: 10,
	})
	const paramData = ref()
	const handleResult = ref()
	const loading = ref(false)
	
	const showWorker = ref(false)
	const showType = ref(false)
	const handleWorker = ref({})
	const workerList = ref([])
	const handleType = ref({})
	const typeList = ref([])
	
	// 获取类型字典函数
	async function getDictInfo(){
		await dictApi.getDict("basic_team_type").then((res) => {
			proxy.$modal.closeLoading()
			if (res) {
				console.log(typeList.value)
				typeList.value = res 
			} else {
			}
		}).catch(() => {
		})
	}
	//提交和驳回接口
	function submitData(){
		proxy.$modal.loading('加载中')
		loading.value = true
		productBacklineApi.changeStatus(paramData.value).then((res) => {
			proxy.$modal.closeLoading()
			if (res.data) {
				proxy.$modal.showToast('成功')
				setTimeout(() => {
					proxy.$tab.navigateBack()
					loading.value = false
				}, 1500)
			} else {
				proxy.$modal.showToast('失败')
				loading.value = false
			}
		}).catch(() => {
			proxy.$modal.closeLoading()
			loading.value = false
		})
	}
	
	// 打开选择人员弹窗
	function selectWorker() {
		showWorker.value = true
	}
	// 打开选择类型弹窗
	function selectType() {
		showType.value = true
	}
	// 选择人员回调函数
	function confirmSelectWorker(val){
		console.log(val)
		handleWorker.value = val[1]
	}
	// 选择类型回调函数
	function confirmSelectType(val){
		console.log(val)
		handleType.value = val[0]
	}
	// 提交处理请求函数
	function handleSubmit(){
		proxy.$modal.confirm('确定提交处理吗').then(() => {
			paramData.value.status = 2
			paramData.value.checkPersonCode = handleWorker.value.value
			paramData.value.handleResult = handleResult.value.value
			submitData()
		})
	}
	onLoad((option) => {
		if (option.obj) {
		    paramData.value = JSON.parse(decodeURIComponent(option.obj)); // 将字符串转换为对象并存入paramData
		}
		if (option.type) type.value = option.type;
		if (option.from) from.value = option.from;
		if (option.number) {
			number.value = option.number;
		}
	})
	onShow(() => {
		// getShowDetail()
		getDictInfo()
		getPageChildren()
	})
	// 获取选择人员函数
	function getPageChildren(){
		productOfflineApi.getPageChildren(params.value).then((res) => {
			console.log(res)
			if (res.data) {
				console.log(res.data)
				workerList.value = res.data
			} else {
			}
		}).catch(() => {
		})
	}
	
</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>