<script setup lang="ts">
	import { onMounted, ref, watch } from 'vue';
	import { formatDate } from '../../utils/date';
	import { onLoad } from '@dcloudio/uni-app';
	import { getAction, putAction } from '../../common/http';
	import { showConfirmDialog, showToast } from 'vant';

	const form = ref({} as any)
	const showPicker = ref(false)
	const show = ref(false)
	const popuList = ref([] as any[])
	const list = ref([] as any[])
	const listData = ref([] as any[])
	const testItems = ref([] as any[])
	const showDialog = ref(false)
	const blemlist = ref([] as any[])
	// 定义 props
	defineProps<{
		item ?: string;
	}>();
	onLoad(async (option : any) => {
		form.value = JSON.parse(option.item)
		form.value.testTime = formatDate(new Date())
		for (let i = 0; i < form.value.ps; i++) {
			listData.value.push({})
		}
		if (form.value.status) {
			listData.value = form.value.mlxqs
			testItems.value = form.value.testItems
		} else {
			getAction('/testItem').then((res : any) => {
				if (res.code === 200) {
					testItems.value = res.data.payload
					// 获取默认选项
					testItems.value.forEach((l : any) => {
						if (l.type === 'Select') {
							l.options.forEach((m : any) => {
								if (m.default) {
									l.value = m.name
								}
							})
						}
					})
				}
			})
		}
		getAction('/tracking/getDetail?id=' + form.value.trackingLogId).then((res : any) => {
			if (res.code === 200) {
				list.value = res.data.details.list
			}
		})
	})
	onMounted(() => {
		const info = JSON.parse(localStorage.getItem('info'))
		form.value.jyy = info.userName
		//获取瑕疵项
		getAction('/blemish').then((res : any) => {
			if (res.code === 200) {
				blemlist.value = res.data
			}
		})
	})

	const chooseDate = () => {
		show.value = true
	}
	const onConfirmDate = (val : any) => {
		form.value.testTime = formatDate(val)
		show.value = false
	}

	const indexData = ref()
	//选择框事件
	const choosePic = (type : any, index : any) => {
		if (type) {
			indexData.value = index
			popuList.value = type.options.map((l : any) => ({ value: l.name, text: l.name }))
		} else {
			indexData.value = -1
			popuList.value = [{ value: '普通纸管', text: '普通纸管' }, { value: '抗皱纸管', text: '抗皱纸管' }]
		}
		showPicker.value = true
	}
	//选择框确认
	const pickerConfirm = (val : any) => {
		if (indexData.value >= 0) {
			testItems.value[indexData.value].value = val.selectedValues[0]
		} else {
			form.value.wrapper = val.selectedValues[0]
		}
		showPickerCancel()
	}
	//取消
	const showPickerCancel = () => {
		showPicker.value = false
	}
	//弹窗开启事件
	const handleOpen = () => {

	}
	const onClickLeft = () => {
		history.back()
	}

	const h5ScanCode = ref(false);
	function scanCode(index : any) {
		indexData.value = index
		// #ifdef H5
		h5ScanCode.value = true;
		// #endif
		// #ifndef H5
		uni.scanCode({
			success: (res) => {
				uni.showToast({
					icon: "none",
					title: res.result,
				});
			},
			faile: (err) => {
				console.log("err", err);
			},
		});
		// #endif
	}
	function handleSuccess(res : any) {
		h5ScanCode.value = false;
		listData.value[indexData.value].code = res
	}
	function handleFail(err : any) {
		uni.showModal({
			title: err.errName,
			content: err.errMsg,
			complete: () => {
				h5ScanCode.value = false;
			},
		});
	}

	function handleClose() {
		h5ScanCode.value = false;
	}
	// 验布分数
	const ifReturn = ref(false)
	const ms = ref()
	const zfs = ref()
	const yjksms = ref()
	const dialogList = ref([] as any[])
	const openDialog = (index : any) => {
		if (!form.value.width) return showToast('请先填写门幅！')
		showDialog.value = true
		indexData.value = index
		ms.value = listData.value[indexData.value].ms
		zfs.value = listData.value[indexData.value].zfs
		yjksms.value = listData.value[indexData.value].yjksms
		ifReturn.value = listData.value[indexData.value].ifReturn
		dialogList.value = listData.value[indexData.value].dialogList ? listData.value[indexData.value].dialogList : []
	}
	const dialogCancel = () => {
		ms.value = ''
		zfs.value = ''
		yjksms.value = ''
		ifReturn.value = false
		dialogList.value = []
		showDialog.value = false
	}
	const dialogSubmit = () => {
		listData.value[indexData.value] = { ms: ms.value, zfs: zfs.value, yjksms: yjksms.value, ifReturn: ifReturn.value, dialogList: dialogList.value }
		if (ifReturn.value) {
			listData.value[indexData.value].code = '回修'
		}
		showDialog.value = false
		ms.value = ''
		zfs.value = ''
		yjksms.value = ''
		ifReturn.value = false
		dialogList.value = []
	}
	const showPop = ref(false)
	const chooseItem = ref()
	const indexType = ref()
	const openPopup = (index : any) => {
		showPop.value = true
		indexType.value = index
		chooseItem.value = dialogList.value[index]
	}
	const popupNext = () => {
		indexType.value++
		if (indexType.value >= dialogList.value.length) {
			dialogList.value.push({})
		}
		chooseItem.value = dialogList.value[indexType.value]
	}
	const popupSubmit = () => {
		if (!chooseItem.value.wz || !chooseItem.value.kfs || !chooseItem.value.xc) return showToast('请填写完整信息！')
		let fs = 100
		dialogList.value.forEach((l : any) => {
			fs = fs - l.kfs
		})
		zfs.value = fs
		if (form.value.width >= 120) {
			if (fs <= 89) {
				yjksms.value = (89 - fs) * 0.25
			} else {
				yjksms.value = 0
			}
		} else if (form.value.width < 120) {
			if (fs <= 91) {
				yjksms.value = (91 - fs) * 0.25
			} else {
				yjksms.value = 0
			}
		}
		showPop.value = false
	}

	//提交
	const onSubmit = () => {
		let tj = false
		listData.value.forEach((l : any) => {
			if ((!l.ms || !l.code || !l.gcsh) && !l.ifReturn) {
				tj = true
			}
		})
		if (tj) return showToast('请填写完整信息！')
		showConfirmDialog({
			message: '本批面料是否暂存？',
			confirmButtonText: '质检完成',
			cancelButtonText: '暂存',
		})
			.then(() => {
				let data = []
				listData.value.forEach((l : any, j : any) => {
					if (l.code == '回修') {
						data.push({
							...form.value,
							id: form.value.ids[j],
							mlxq: l,
							testItems: testItems.value,
							status: '回修',
						})
					} else {
						data.push({
							...form.value,
							id: form.value.ids[j],
							mlxq: l,
							testItems: testItems.value,
							status: '质检完成',
						})
					}
				})
				putAction('/testing/check', data).then((res : any) => {
					if (res.code === 200) {
						uni.navigateBack()
					}
				})
			})
			.catch(() => {
				let data = []
				listData.value.forEach((l : any, j : any) => {
					if (l.code == '回修') {
						data.push({
							...form.value,
							id: form.value.ids[j],
							mlxq: l,
							testItems: testItems.value,
							status: '回修',
						})
					} else {
						data.push({
							...form.value,
							id: form.value.ids[j],
							mlxq: l,
							testItems: testItems.value,
							status: '暂存',
						})
					}
				})
				putAction('/testing/check', data).then((res : any) => {
					if (res.code === 200) {
						uni.navigateBack()
					}
				})
			});
	}
	//保存
	const save = () => {
		let data = []
		listData.value.forEach((l : any, j : any) => {
			data.push({
				...form.value,
				id: form.value.ids[j],
				mlxq: l,
				testItems: testItems.value,
				status: '保存',
			})
		})
		putAction('/testing/check', data).then((res : any) => {
			if (res.code === 200) {
				uni.navigateBack()
			}
		})
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="色胚质检" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="content">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field class="bor" label="验布日期" label-width="5em" colon v-model="form.testTime" readonly
						:rules="[{ required: true, message: '请填写' }]" @click="chooseDate()" />
					<van-field label="检验员" label-width="5em" colon v-model="form.jyy" readonly />
					<van-field label="面料名称" label-width="5em" colon v-model="form.fabric" readonly />
					<van-field label="面料颜色" label-width="5em" colon v-model="form.color" readonly />
					<van-field label="工厂" label-width="5em" colon v-model="form.rc" readonly />
					<van-field label="工艺" label-width="5em" colon v-model="form.craft" readonly />
					<van-field label="工艺要求" label-width="5em" colon v-model="form.craftCmt.name" readonly />
					<van-field class="bor" label="纸管" label-width="5em" colon v-model="form.wrapper" readonly
						:rules="[{ required: true, message: '请填写' }]" @click="choosePic()" />
					<van-field class="line" label="姆米" label-width="5em" colon v-model="form.momme" type="number"
						@input="form.momme=form.momme.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')"
						:rules="[{ required: true, message: '请填写' }]" />
					<van-field class="line" label="门幅" label-width="5em" colon v-model="form.width" type="number"
						@input="form.width=form.width.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')"
						:rules="[{ required: true, message: '请填写' }]" />
					<view class="grid-container">
						<view class="grid-item" v-for="(item,index) in testItems" :key="index">
							<van-field :class="item.type=='Text'?'line':'bor'" :label="item.name" label-width="auto"
								colon v-model="item.value" :readonly="item.type!='Text'"
								:rules="item.necessary?[{ required: true, message: '请填写' }]:[]"
								@click="item.type=='Select'?choosePic(item,index):''" />
						</view>
					</view>
				</van-cell-group>
				<p>跟单检测项：</p>
				<view v-for="(item,index) in list" :key="index">
					<van-field :label="item.name" label-width="auto" colon v-model="item.value" readonly />
				</view>
				<view>
					<view class="grid-container1">
						<view class="grid-item">序号</view>
						<view class="grid-item">分数</view>
						<view class="grid-item">总米数<br>预计扣损米数</view>
						<view class="grid-item">缸差色号</view>
						<view class="grid-item">操作</view>
					</view>
					<view class="grid-container1" v-for="(item,index) in listData" :key="index">
						<view class="grid-item">{{index+1}}</view>
						<view class="grid-item" @click="openDialog(index)">{{item.zfs}}</view>
						<view class="grid-item">{{item.ms}}/{{item.yjksms}}</view>
						<view class="grid-item">
							<van-field class="line" v-model="item.gcsh" type="digit"
								@input="item.gcsh=item.gcsh.replace(/^\d{3}$/)" />
						</view>
						<view class="grid-item">
							<p v-if="item.code">{{item.code}} <van-icon name="cross" @click="item.code=''"></van-icon>
							</p>
							<van-button v-if="!item.code" type="primary" @click="scanCode(index)">
								扫一扫
							</van-button>
						</view>
					</view>
				</view>
				<van-field class="line" label="备注" label-width="2.5em" colon v-model="form.comment" />
				<view style="display: flex;align-items: center;justify-content: space-around;">
					<van-button block style="margin: 10rpx;" @click="save">
						保存
					</van-button>
					<van-button block type="primary" native-type="submit" style="margin: 10rpx;">
						提交
					</van-button>
				</view>
			</van-form>
		</view>
	</view>

	<van-dialog v-model:show="showDialog" :show-confirm-button="false">
		<van-form @submit="dialogSubmit">
			<van-field label="是否回修" label-width="6.5em" colon label-align="right">
				<template #input>
					<van-switch v-model="ifReturn" />
				</template>
			</van-field>
			<van-field label="米数" label-width="6.5em" colon label-align="right" v-model="ms"
				:rules="ifReturn?[]:[{ required: true, message: '请填写' }]" class="line">
				<template #button>米</template>
			</van-field>
			<van-field label="总分数" label-width="6.5em" colon label-align="right" v-model="zfs" readonly
				:rules="ifReturn?[]:[{ required: true, message: '请填写' }]">
				<template #button>分</template>
			</van-field>
			<van-field label="预计扣损米数" label-width="6.5em" colon v-model="yjksms" readonly
				:rules="ifReturn?[]:[{ required: true, message: '请填写' }]">
				<template #button>米</template>
			</van-field>

			<view class="grid-container2">
				<view class="grid-item">
					<van-icon name="add" color="red" @click="dialogList.push({})" />
				</view>
				<view class="grid-item">瑕疵</view>
				<view class="grid-item">扣分数</view>
				<view class="grid-item">位置</view>
			</view>
			<view class="grid-container2" v-for="(item,index) in dialogList" :key="index">
				<view class="grid-item">
					<van-icon name="clear" color="red" @click="dialogList.splice(index,1)" />
				</view>
				<view class="grid-item" @click="openPopup(index)">{{item.xc}}</view>
				<view class="grid-item">{{item.kfs}}</view>
				<view class="grid-item">{{item.wz}}</view>
			</view>

			<view class="footer-button">
				<van-button size="small" style="width: 25vw;" @click="dialogCancel">
					取消
				</van-button>
				<van-button size="small" native-type="submit" type="success" style="width: 25vw;">
					提交
				</van-button>
			</view>
		</van-form>
	</van-dialog>

	<van-popup v-model:show="showPop" style="width: 80%" round :close-on-click-overlay="false">
		<view class="grid-container3">
			<view class="grid-item" v-for="(item,index) in blemlist" :key="index">
				<p :class="chooseItem.xc==item.name?'xz':'wxz'" @click="chooseItem.xc=item.name">{{item.name}}</p>
			</view>
		</view>
		<p>扣分数:</p>
		<view class="grid-container3">
			<view class="grid-item" @click="chooseItem.kfs=1">
				<p :class="chooseItem.kfs==1?'xz':'wxz'">1</p>
			</view>
			<view class="grid-item" @click="chooseItem.kfs=2">
				<p :class="chooseItem.kfs==2?'xz':'wxz'">2</p>
			</view>
			<view class="grid-item" @click="chooseItem.kfs=3">
				<p :class="chooseItem.kfs==3?'xz':'wxz'">3</p>
			</view>
			<view class="grid-item" @click="chooseItem.kfs=4">
				<p :class="chooseItem.kfs==4?'xz':'wxz'">4</p>
			</view>
		</view>
		<van-field label="位置" label-width="2.5em" colon v-model="chooseItem.wz" class="line" type="number"
			@input="chooseItem.wz=chooseItem.wz.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" />
		<view class="footer-button">
			<van-button size="small" style="width: 25vw;" @click="popupSubmit">
				完成
			</van-button>
			<van-button size="small" type="success" style="width: 25vw;" @click="popupNext">
				下一处
			</van-button>
		</view>
	</van-popup>

	<cshaptx4869-scancode v-if="h5ScanCode" @success="handleSuccess" @fail="handleFail"
		@close="handleClose"></cshaptx4869-scancode>
	<van-calendar v-model:show="show" @confirm="onConfirmDate" :min-date="new Date(2010, 0, 1)"
		:max-date="new Date(2050, 0, 31)" />

	<!--选择框-->
	<van-popup v-model:show="showPicker" round position="bottom" @open="handleOpen">
		<van-picker show-toolbar :columns="popuList" @confirm="pickerConfirm" @cancel="showPickerCancel"
			ref="pickerRef" />
	</van-popup>
</template>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
	}

	.van-nav-bar {
		width: 100%;
	}

	.content {
		flex: 1;
		padding: 0 20rpx;
	}

	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 0 15rpx;
	}

	.grid-container1 {
		font-size: 24rpx;
		display: grid;
		grid-template-columns: 0.5fr 1fr 1.5fr 1fr 1fr;
		padding: 0 15rpx;

		.grid-item {
			border: 1px solid #f2f2f2;
			text-align: center;
			white-space: pre-line;
			padding: 5rpx;
			word-break: break-all;
			display: flex;
			justify-content: center;
			align-items: center;
			/*将对象转为弹性盒模型展示*/
			-webkit-box-orient: vertical;
			/*设置弹性盒模型子元素的排列方式*/
			overflow: hidden;

			/*超出隐藏*/
			::v-deep .van-button--normal {
				padding: 8rpx 16rpx;
				height: 50rpx;
				font-size: 24rpx;
			}

			::v-deep .van-field__control {
				text-align: center;
				font-size: 24rpx !important;
			}
		}
	}

	::v-deep .van-field__control {
		text-align: center;
		font-size: 16px;
	}

	::v-deep .van-field {
		font-size: 16px;
	}

	::v-deep .van-button--normal {
		padding: 5px 8px;
		height: 30px;
	}

	.bor {
		::v-deep .van-field__control {
			border: 1px solid #d7d7d7;
		}
	}

	.line {
		::v-deep .van-field__control {
			border-bottom: 1px solid #d7d7d7;
		}
	}

	.grid-container2 {
		display: grid;
		grid-template-columns: 0.5fr 1.5fr 1fr 1fr;
		padding: 0 15rpx;

		.grid-item {
			border: 1px solid #f2f2f2;
			text-align: center;
			white-space: pre-line;
			padding: 5rpx;
			word-break: break-all;
			display: flex;
			justify-content: center;
			align-items: center;
			/*将对象转为弹性盒模型展示*/
			-webkit-box-orient: vertical;
			/*设置弹性盒模型子元素的排列方式*/
			overflow: hidden;

			/*超出隐藏*/
			::v-deep .van-button--normal {
				padding: 8rpx 16rpx;
				height: 50rpx;
				font-size: 18rpx;
			}
		}
	}

	.grid-container3 {
		margin-top: 10px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		padding: 0 15rpx;

		.grid-item {
			border: 1rpx solid #73a7dc;
			margin: 5rpx;
			text-align: center;
			white-space: pre-line;
			word-break: break-all;
			display: flex;
			justify-content: center;
			align-items: center;
			/*将对象转为弹性盒模型展示*/
			-webkit-box-orient: vertical;
			/*设置弹性盒模型子元素的排列方式*/
			overflow: hidden;

			/*超出隐藏*/
			::v-deep .van-button--normal {
				padding: 8rpx 16rpx;
				height: 50rpx;
				font-size: 18rpx;
			}
		}
	}

	.xz {
		width: 100%;
		color: #fff;
		background-color: #73a7dc;
	}

	.wxz {
		color: #73a7dc;
	}

	::v-deep .van-cell {
		display: flex;
		align-items: center;
	}

	.footer-button {
		margin: 20px;
		display: flex;
		justify-content: space-around;
	}

	.grid-container4 {
		display: grid;
		grid-template-columns: 0.5fr 1fr 1fr 1.5fr;
		padding: 0 15rpx;

		.grid-item {
			border: 1px solid #f2f2f2;
			text-align: center;
			white-space: pre-line;
			padding: 5rpx;
			word-break: break-all;
			display: flex;
			justify-content: center;
			align-items: center;
			/*将对象转为弹性盒模型展示*/
			-webkit-box-orient: vertical;
			/*设置弹性盒模型子元素的排列方式*/
			overflow: hidden;
		}
	}
</style>