<template>
	<view class="flex">
		<van-nav-bar title="扫码入库" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="btn" @click="onClickRight">扫描库位码</view>
		<view style="margin: 20rpx 50rpx;">
			<van-field name="当前库位码" label="当前库位码" colon label-width="6em">
				<template #input>
					<van-field v-model="form.shelve" class="bor-a" type="number"/>—
					<van-field v-model="form.column" class="bor-a" type="number"/>—
					<van-field v-model="form.row" class="bor-a" type="number"/>
				</template>
			</van-field>
		</view>
		<view class="btn" @click="scanCode" v-if="location">扫描面料编号</view>
		<cshaptx4869-scancode v-if="h5ScanCode" @success="handleSuccess" @fail="handleFail"
			@close="handleClose"></cshaptx4869-scancode>
	</view>
</template>

<script setup lang="ts">
	import { showConfirmDialog, showToast } from 'vant';
	import { onMounted, ref } from 'vue';
	import { getAction, putAction } from '../../common/http';

	onMounted(() => {
	})

const form = ref({} as any)

	const onClickLeft = () => {
		window.history.back()
	}
	const onClickRight = () => {
		scanCode()
	}
	const h5ScanCode = ref(false);
	function scanCode() {
		// #ifdef H5
		h5ScanCode.value = true;
		// #endif
		// #ifndef H5
		uni.scanCode({
			success: (res) => {
				uni.showToast({
					icon: "none",
					title: res.result,
				});
			},
			faile: (err:any) => {
				console.log("err", err);
				location.value = ''
				barcode.value = ''
			},
		});
		// #endif
	}
	const barcode = ref()
	const location = ref()
	function handleSuccess(res : any) {
		h5ScanCode.value = false;
		if (location.value) {
			barcode.value = res
			putAction('/rawFabric/sign', { barcode: barcode.value, location: location.value }, { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }).then((res1 : any) => {
				if (res1.code === 7778) {//已经入库
					let data = JSON.parse(res1.msg)
					if(data.location==location.value){
						showConfirmDialog({
							message: '该面料已放置在'+data.location+'，请勿重复扫码',
							allowHtml: true,
							confirmButtonText: '扫一扫',
						})
							.then(() => {
								scanCode()
							})
							.catch(() => {
								location.value = ''
								barcode.value = ''
							});
					}else{
						let html = `
											<div style="text-align: left">
											<p>面料编号：<span style="color:red;font-size:18px">${barcode.value}</span></p>
											<p>面料名称：<span style="color:red;font-size:18px">${data.category}</span></p>
											<p>面料位置：<span style="color:red;font-size:18px">${data.location}</span></p>
											<p style="margin-top:8px">是否将面料移动到<span style="color:red;font-size:18px">${location.value}</span>？</p>
											</div>
											
						`
											showConfirmDialog({
												title:'扫码成功！',
												message: html,
												allowHtml: true,
												confirmButtonText: '确认',
											})
												.then(() => {
													putAction('/rawFabric/sign', { barcode: barcode.value, location: location.value, force: true }, { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }).then((res2 : any) => {
														if (res2.code === 200) {
															showToast('入货架成功！')
														} else {
															showToast(res2.msg)
														}
													})
												})
												.catch(() => {
													location.value = ''
													barcode.value = ''
												});
					}
				} else if (res1.code === 7777) {
					//暂存
					let data = JSON.parse(res1.msg)
					let html = `
					<p>面料编号为<span style="color:red;font-size:18px">${barcode.value}</span>的<span style="color:red;font-size:18px">${data.category}</span>被暂存在检验室，是否确认移动到<span style="color:red;font-size:18px">${location.value}</span>？</p>
			  `
					showConfirmDialog({
						message: html,
						allowHtml: true,
						confirmButtonText: '确认',
					})
						.then(() => {
							putAction('/rawFabric/sign', { barcode: barcode.value, location: location.value, force: true }, { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }).then((res2 : any) => {
								if (res2.code === 200) {
									showToast('入货架成功！')
								} else {
									showToast(res2.msg)
								}
							})
						})
						.catch(() => {
							location.value = ''
							barcode.value = ''
						});
				} else if (res1.code === 200) {
					let html = `
					<p>面料编号：<span style="color:red;font-size:18px">${barcode.value}</span></p>
					<p>面料名称：<span style="color:red;font-size:18px">${res1.data}</span></p>
					`
					showConfirmDialog({
						title: '扫码成功！',
						message: html,
						allowHtml: true,
						confirmButtonText: '扫一扫',
					})
						.then(() => {
							scanCode()
						})
						.catch(() => {
							location.value = ''
							barcode.value = ''
						});
				} else {
					showToast(res1.msg)
				}
			})
		} else {
			getAction('/shelves/isActive?code=' + res).then((res1 : any) => {
				if (res1.code === 200) {
					if (res1.data.active) {
						location.value = res
						let html=``
						res1.data.recommend.forEach((l:any)=>{
							html+=`
							<div>${l.fabricName}</div>
							`
						})
						html+=`
							<div>货架号：<span style="color:red;font-size:18px">${location.value}</span></div>
						`
						showConfirmDialog({
							title: '扫码成功，推荐放置面料',
							message: html,
							allowHtml: true,
							confirmButtonText: '扫一扫',
						})
							.then(() => {
								scanCode()
							})
							.catch(() => {
								location.value = ''
								barcode.value = ''
							});
					} else {
						showToast('该库位码已被禁用，请联系管理员')
					}
				}
			})
		}
	}
	function handleFail(err) {
		uni.showModal({
			title: err.errName,
			content: err.errMsg,
			complete: () => {
				h5ScanCode.value = false;
			},
		});
	}
	function handleClose() {
		h5ScanCode.value = false;
	}
</script>

<style lang="scss" scoped>
	.btn {
		padding: 15px 0;
		margin: 10px 50rpx;
		background-color: #35a5f7;
		color: #fff;
		text-align: center;
		border-radius: 20rpx;
	}

	.flex {
		font-size: 16px;
	}
	::v-deep .van-dialog__message{
		white-space:normal;
		
	}
</style>