<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="mlScanCode" 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, showDialog, showToast } from 'vant';
	import { onMounted, ref, watch } from 'vue';
	import { getAction, putAction } from '../../common/http';

	onMounted(() => {
	})

	const form = ref({} as any)

	watch(form.value, () => {
		if (form.value.shelve && form.value.column && form.value.row) {
			let a = form.value.shelve + '-' + form.value.column + '-' + form.value.row
			getAction('/shelves/isActive?code=' + a).then((res1 : any) => {
				if (res1.code === 200) {
					if (res1.data.active) {
						location.value=a
					} else {
						showDialog({
						  title:'该库位码已被禁用，请联系管理员',
						}).then(() => {
						  // on close
						});
						// showToast('该库位码已被禁用，请联系管理员')
					}
				}
			})
		}
	})
	const onClickLeft = () => {
		window.history.back()
	}

	const dataType = ref()
	const barcode = ref()
	const location = ref()
	
	const onClickRight = () => {
		dataType.value = 'location'
		scanCode()
	}
	const mlScanCode = () => {
		dataType.value = 'barcode'
		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);
				form.value.shelve = ''
				form.value.column = ''
				form.value.row = ''
				location.value = ''
				barcode.value = ''
			},
		});
		// #endif
	}

	function handleSuccess(res : any) {
		h5ScanCode.value = false;
		if (dataType.value == 'location') {
			let a = res.split('-')
			form.value.shelve = a[0]
			form.value.column = a[1]
			form.value.row = a[2]
		} else if (dataType.value == 'barcode') {
			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(() => {
								form.value.shelve = ''
								form.value.column = ''
								form.value.row = ''
								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(() => {
								form.value.shelve = ''
								form.value.column = ''
								form.value.row = ''
								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(() => {
							form.value.shelve = ''
							form.value.column = ''
							form.value.row = ''
							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(() => {
							form.value.shelve = ''
							form.value.column = ''
							form.value.row = ''
							location.value = ''
							barcode.value = ''
						});
				} else {
					showToast(res1.msg)
				}
			})
		}
	}
	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;

	}

	.bor-a {
		::v-deep .van-field__control {
			border-bottom: 1px solid #d7d7d7;
			text-align: center;
		}

		::v-deep .van-field__label {
			margin: 0;
		}
	}

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

	::v-deep .van-field__control {
		text-align: center;
	}

	::v-deep .van-cell {
		padding: 5px !important;
	}

	::v-deep .van-field {
		font-size: 16px;
	}
</style>