<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="schbox">
				<MyInput class="flex1" v-model="details.scancode" clearable placeholder="请扫描或输入包条码" />

				<view @click="scandata" class="ml20 button">
					提 交
				</view>
			</view>
		</template>

		<template #body>
			<view class="packagesList pd20">
				<block v-for="item in details.recordsList" :key="item.id">
					<view class="packagesList_item">
						<view class="packagesList_item_row border fwb">
							<text>包条码：</text>
							<text class="info">{{item.orderPackageCode}}</text>
						</view>

						<view class="packagesList_item_row ">
							<text class="title">车次号：</text>
							<text class="info">{{item.loadCode}}</text>
						</view>

						<view class="packagesList_item_row ">
							<text class="title">仓库：</text>
							<text class="info">{{item.warehouseName}}</text>
						</view>
					</view>
				</block>

				<!-- 底部 -->
				<view class="footer_container">
					<!-- 提交按钮 -->
					<view class="submitBtn" @click="handleSubmit">
						提交
					</view>
				</view>
			</view>
		</template>
	</BasicContainer>

	<!-- 选择入库的包件 -->
	<PopUp ref="CreateByPackage">
		<view class="packagesList pd10">

			<block v-for="(item, index) in details.createPackageArr" :key="item.id">

				<view :class="{packagesList_item: true, popUpBox: true, active: index === details.activeIndex}"
					@click="()=> details.activeIndex = index">

					<view class="packagesList_item_row border fwb">
						<text>包条码：</text>
						<text class="info">{{item.orderPackageCode}}</text>
					</view>

					<view class="packagesList_item_row ">
						<text class="title">车次号：</text>
						<text class="info">{{item.loadCode}}</text>
					</view>

					<view class="packagesList_item_row ">
						<text class="title">仓库：</text>
						<text class="info">{{item.warehouseName}}</text>
					</view>

				</view>
			</block>
		</view>
	</PopUp>

	<tips ref="tip"></tips>
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import {
		postFindRetentionCarsLoadPackage,
		postRetentionCarsLoadPackage
	} from '@/api/user.js'
	import { reactive, toRefs, ref, watchEffect, nextTick } from "vue";
	import utils from '@/utils/utils';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	// 获取组件实例
	const tip = ref<any>()
	const date = ref<number | string[]>([])
	const basicContainer = ref()
	/** 创建回库任务 -- 包件 */
	const CreateByPackage = ref()

	// 页面基础数据
	let details = reactive({
		recordsList: [],
		scancode: '',
		/** 创建回库 -- 包件列表 */
		createPackageArr: [],
		/** 选中索引 */
		activeIndex: 0,
		submitType: 'package' as 'package' | 'zero'
	})

	const option = {
		title: '配载回库扫描',
		haveData: true,
		pullDownRefreshInitPage() {
			details.recordsList = []
			details.createPackageArr = []
			details.activeIndex = 0
			CreateByPackage.value.setDetails({
				showPopUp: false,
			})
			tip.value.setdetails({ isshow: false })
		},
		isFixed: true,
		haveReachBottom: false
	}

	onShow(async () => {
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code', code);
				details.scancode = code
				scandata()
			}
		})
	})

	// 初始化执行
	onLoad(() => {
		utils.handleToast('请扫描或输入包条码')
	})

	/** 扫描执行函数 */
	async function scandata() {
		console.log('111 :>> ', 111);
		if (!details.scancode) return utils.handleToast('请输入或扫描正确的码值')

		const res = await postFindRetentionCarsLoadPackage({ orderPackageCode: details.scancode })
		const { code, data } = res


		if (code !== 200 || utils.getObjType(data) !== 'array') return



		if (data.length === 0) return utils.handleToast('该包件未找到装车数据')
		if (data.length === 1) {
			details.recordsList.push(data[0])
			return
		} else {
			details.createPackageArr = data
			details.activeIndex = 0
			CreateByPackage.value.setDetails({
				showPopUp: true,
				title: '选择回库包件',
				success() {
					details.recordsList.push(details.createPackageArr[details.activeIndex])
					CreateByPackage.value.setDetails({
						showPopUp: false,
					})
				}
			})
		}
	}

	const handleSubmit = () => {
		if (details.recordsList.length === 0) return utils.handleToast('请扫描需要回库的包件')

		tip.value.setdetails({
			isshow: true,
			title: '提示',
			content: '确认回库',
			isshowcancel: true,
			cancelTxt: '取消',
			confirmTxt: '确认',
			success: async () => {
				const submitData = {
					loadScanIds: details.recordsList.map(val => val.scanId)
				}

				const res = await postRetentionCarsLoadPackage(submitData)

				const { code, msg } = res
				if (code !== 200) return
				utils.handleToast(msg)
				tip.value.setdetails({ isshow: false })
				details.recordsList = []
			},
			cancel: () => tip.value.setdetails({ isshow: false }),
			close: () => tip.value.setdetails({ isshow: false }),
		})
	}
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	// 搜索
	.schbox {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		:deep(.input_container) {
			height: 2rem !important;
			background: #F5F5F6 !important;
			border-radius: 8upx !important;
			border: 2upx solid #EEEEEE !important;
			box-sizing: border-box !important;
			font-size: 0.9rem;
			color: #092C4D;
		}


		.title {
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
		}


		.button {
			padding: 0 40upx;
			height: 2rem;
			background: var(--subjectColor);
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1rem;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.packagesList {

		.packagesList_item {
			position: relative;
			background: #ffffff;
			border-radius: 10upx;
			overflow: hidden;
			margin-bottom: 20upx;
			box-sizing: border-box;

			&.popUpBox {
				box-shadow: none;
				border: 4upx dashed var(--errColor);
				transition: all 0.3s;

				&.active {
					border-color: #fff;
					box-shadow: 0 0 10upx 5upx var(--errColor);
				}
			}
		}

		.packagesList_item_row {
			font-size: 0.8rem;
			word-break: break-all;
			line-height: 1.3rem;
			padding: 10upx 20upx;
			display: flex;

			&:first-child {
				padding-top: 20upx;
			}

			&:last-child {
				padding-bottom: 20upx;
			}

			&.border {
				color: #092C4D !important;
				font-size: 0.9rem;
				border-bottom: 2upx solid #eee;
			}

			.title {
				color: #777;
				min-width: 3.5rem;
			}
		}

		.tip {
			$size: 100upx;
			$border: 4upx solid var(--errColor);
			$boxShadow: 0 0 10upx 5upx var(--errColor);

			position: absolute;
			top: -36upx;
			right: -36upx;
			padding: 15upx;
			font-size: 0.8rem;
			border: $border;

			border-radius: 50%;

			view {
				width: $size;
				height: $size;
				border-radius: 50%;
				border: 2upx solid var(--errColor);
				text-align: center;
				line-height: $size;
				color: var(--errColor);
				font-weight: bold;
				transform: rotate(-45deg);
			}
		}
	}

	// 底部
	.footer_container {
		height: 160upx;

		// 提交按钮
		.submitBtn {
			$height: 80upx;

			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 80upx;
			background-color: var(--subjectColor);
			color: #fff;
			width: 250upx;
			height: $height;
			line-height: $height;
			text-align: center;
			border-radius: 10upx;
			transition: all 0.3s;
		}
	}
</style>