<template>
	<!-- 详情 update用-->
	<view class="detail-container" v-if="show1">
		<view class="popup" >
				<u-form :model="form1" label-width="160rpx">
					<u-form-item label="工单编号" prop="number" required>
						<u-input v-model="form1.number"  :disabled=true/>
					</u-form-item>
					<u-form-item label="巡检项名称" prop="name" required>
						<u-input v-model="form1.name"  :disabled=true/>
					</u-form-item>
					<u-form-item label="巡检内容" prop="content" required>
						<u-input v-model="form1.content"  :disabled=true/>
					</u-form-item>
					<u-form-item label="结果" prop="resultStr"  required>
						<u-input v-model="form1.resultStr" placeholder="请选择" :disabled=true />
						<u-select v-model="show" mode ='single-column' :list="list"  @confirm="confirm"></u-select>
						<u-button type="primary"  @click="show = true">选择</u-button>
					</u-form-item>
					<u-form-item label="未完成原因" :required="causeFlag" >
						<u-input v-model="form1.uncompletedCause" placeholder="请输入未完成原因" :disabled="causeDisabled" />
					</u-form-item>
				</u-form>	
		</view>	
		<div class="line"></div>
		<view class="footer">
			<view class="btns" >
				<u-button type="primary" @click="submitForm1()" :loading='loading' :disabled='loading'>提交</u-button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<!-- 验证完结-->
		<u-popup v-model="isVerifyShowSuccess" mode="center" border-radius="14">
			<view class="popup-title">意见</view>
			<view class="popup">
				<textarea v-model="data.applyContent" placeholder="请输入内容"></textarea>
			</view>
			<view class="popup-footer">
				<view class="sure" @click="apply('APPROVEPASS')">通过</view>
				<view class="reject" @click="apply('APPROVEREJECTED')" style="color: red;">驳回</view>
			</view>
		</u-popup>

		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
	</view>
	<!-- 详情 create用-->
	<view class="detail-container" v-if="show2">
		<view class="popup" >
			<!-- 表单 -->
			<u-form :model="form2"  label-width="160rpx">
				<u-form-item label="工单编号" prop="number" required>
					<u-input v-model="form2.number"  :disabled=true/>
				</u-form-item>
				<u-form-item label="巡检项" prop="chargePeoples" required>
					<view class="select" @click="addItem()">
						<view class="input" v-if='form2.name'>
							{{form2.name}}
						</view>
						<view class="placeholder" v-else>
							请选择非必选巡检项
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
				</u-form-item>
			</u-form>
			<!-- 弹出非必选巡检项 -->
			<u-popup v-model="isShowItem" mode="center" border-radius="14">
				<view class="popup-title">非必选巡检项</view>
				<view class="popup">
					<u-checkbox-group @change="checkboxItemChange">
						<u-checkbox v-model="item.checked" v-for="(item, index) in itemList" :key="index"
							:name="item.itemName">{{item.itemName}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="popup-footer">
					<view @click="isShowItem = false">取消</view>
					<view class="sure" @click="chooseItem">确认</view>
				</view>
			</u-popup>
			<view class="footer">
				<view class="btns" >
					<u-button type="primary" @click="submitForm2()" :loading='loading' :disabled='loading'>提交</u-button>
				</view>
				<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
			</view>
		</view>	
	</view>	

</template>

<script setup lang="ts">
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	
	import * as inspectionOrderApi from "@/api/eam/inspection"

	const { proxy } = getCurrentInstance()
	const subList = ref([])
	const data = ref({})
	const loading = ref(false)
	const number = ref('')
	const show = ref(false)
	
	const show1 = ref(false)
	const show2 = ref(false)
	const isShowItem = ref(false)
	const itemList = ref([])//查询非必选巡检项List
	const chooseItemList = ref([])//选中非必选巡检项List
	
	
	
	
	const current = ref(0)
	const id = ref('')
	const type = ref('')//设备类型  设备/工装
	const causeFlag = ref(false)
	const causeDisabled = ref(false)
	
	const list = ref([{
			label: '完成',
			value: '0'
		}, {
			label: '未完成',
			value: '1'
	}])
	
	const form1 = ref({
		id:"",
		masterId:"",
		number: "",
		result:"",
		resultStr:"",
		uncompletedCause: "",
		content:"",
	})
	
	const form2 = ref({
		id:"",
		masterId:"",
		number: "",
		name:"",
	})
	
	function addItem(){
		isShowItem.value = true
	}
	
	function checkboxItemChange(e) {
		chooseItemList.value = e
	}
	
	function chooseItem() {
		form2.value.name = chooseItemList.value.join(',')
		isShowItem.value = false
	}
	
	
	function submitForm1(){
		// 校验
		if (form1.value.resultStr.length == 0) {
			proxy.$modal.alert('请选择结果')
			return;
		}
		if(form1.value.resultStr == '未完成' && form1.value.uncompletedCause.length == 0)  {
			proxy.$modal.alert('请输入未完成原因')
			return;
		}
		
		proxy.$modal.confirm("是否确认提交").then(()=>{
			proxy.$modal.loading('加载中')
			inspectionOrderApi.inspectionOrderItemUpdate(form1.value).then((res) => {
				proxy.$modal.closeLoading()
				if(res.data){
					proxy.$modal.showToast('成功')
					setTimeout(() => {
						proxy.$tab.navigateBack()
						loading.value = false
						proxy.$modal.closeLoading()
					}, 1000)
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})	
		})
	}
	
	function submitForm2(){
		// 校验
		if (form2.value.name.length == 0) {
			proxy.$modal.alert('请选择非必须巡检项')
			return;
		}
		proxy.$modal.confirm("是否确认提交").then(()=>{
			proxy.$modal.loading('加载中')
			inspectionOrderApi.inspectionOrderItemCreate(form2.value).then((res) => {
				proxy.$modal.closeLoading()
				console.log(res)
				if(res.code == 0){
					proxy.$modal.showToast('成功')
					setTimeout(() => {
						proxy.$tab.navigateBack()
						loading.value = false
						proxy.$modal.closeLoading()
					}, 1000)
				}else{
					proxy.$modal.showToast(res.msg)
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})
		
		})
	}
	
	const confirm =(e)=>{
		if(e[0].value == '0'){
			form1.value.result = '0'
			form1.value.resultStr = '完成'
			form1.value.uncompletedCause = ''
			causeFlag.value = false
			causeDisabled.value = true
		}
		if(e[0].value == '1'){
			form1.value.result = '1'
			form1.value.resultStr = '未完成'
			causeFlag.value = true
			causeDisabled.value = false
		}
	}
	onLoad(async (option) => {
		if (option.data && option.type == 'update') {
			show1.value = true
			show2.value = false
			data.value = JSON.parse(decodeURIComponent(option.data))
			console.log(data.value)
			form1.value.id = data.value.id
			form1.value.masterId = data.value.masterId
			form1.value.number = data.value.number
			form1.value.name = data.value.name
			form1.value.content = data.value.content
			if(data.value.result == '0'){
				form1.value.resultStr = '完成'
			}else if(data.value.result == '1'){
				form1.value.resultStr = '未完成'
			}else{
				form1.value.resultStr = ''
			}
			form1.value.uncompletedCause = data.value.uncompletedCause
		}else if(option.data && option.type == 'create'){
			show1.value = false
			show2.value = true
			data.value = JSON.parse(decodeURIComponent(option.data))
			console.log(data.value)
			form2.value.masterId = data.value.id
			form2.value.number = data.value.number
			//查询非必选巡检项
			const paras1 = {
				planNumber: data.value.planNumber,
				available: 'TRUE',
				isSelectd: 'false'
			}
			inspectionOrderApi.inspectionPlanItemList(paras1).then((res) => {
				if (res.data) {
					itemList.value = res.data
				}
			})
			
		}
		if (option.type) type.value = option.type;
	})
</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: 160rpx;
				}

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

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

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

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


	}

	.items {
		margin: 20rpx 30rpx;
		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;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #409eff;
		padding: 30rpx
	}

	.popup {
		width: 600rpx;
		padding: 0rpx 60rpx 0rpx;

	}

	.popup-footer {
		display: flex;
		border-top: 1px solid #e4e4e4;

		view {
			line-height: 100rpx;
			flex: 1;
			text-align: center;

			&.sure {
				color: #409eff;
			}
		}
	}

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

	.btns {
		display: flex;

		padding: 20rpx;
		box-shadow: 0px -2rpx 20rpx rgba(0, 0, 0, 0.1);


		button {
			flex: 1;
			margin: 0px 10rpx;
		}

		.sure {
			background: #409eff;
			color: white;
			border-radius: 8rpx;

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

	.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;
	}

	::v-deep .u-radio-group {
		display: grid !important;
		padding-bottom: 20rpx;
	}

	.images {
		display: flex;
		width: 100%;

		image {
			width: 30%;
			margin-right: 20rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	.select {
		display: flex;
		align-items: center;
		height: 72rpx;
		width: 100%;

		.input {
			flex: 1;
			font-size: 28rpx;
			color: #000000;
		}

		.placeholder {
			flex: 1;
			font-size: 28rpx;
			color: rgb(192, 196, 204);

		}
	}
</style>