<template>
	<view class="app status-bar-gap">
		<l-header title="批量销售出库" sticky #right>
			<view style="margin-right: 32rpx;" v-if="state.tabsIndex === '1'" @click="submit()">{{ t('verify.tj') }}</view>
		</l-header>
		<view class="page">
			<view class="input-box">
				<up-tabs :scrollable="false" :list="state.tabsList" @click="upTabsItemFun"></up-tabs>
			</view>
			<architecture ref="architectureRef" :dataType="t('home.scrk')" :placeholder="t('receive.djbh')"
				@scanConfirm="scanConfirmFun" @inputConfirm="changeFun" />
			<packing ref="packingRef" v-if="state.tabsIndex === '1'" :queryString="state.queryString"
				@clearOut="clearOut()" />
			<scattered v-if="state.tabsIndex === '2'" :queryString="state.queryString" @clearOut="clearOut()" />
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, nextTick, onMounted, ref, computed } from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n'
	import { parseTime } from '../../utils/tools.js';
	import { PRD_MORPTList, receiveBillList } from '../../common/request/api/api';
	import packing from './packing.vue'
	import scattered from './scattered.vue'
	const architectureRef = ref()
	const packingRef = ref()
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const state = reactive({
		queryString: '',
		tabsIndex: '1',
		tabsList: [
			{ name: computed(() => '所选单据'), type: '1' },
			{ name: computed(() => '验证单据'), type: '2' },
		],
	})
	const scanConfirmFun = (e : any) => {
		state.queryString = e
		architectureRef.value.closeFun()
	}
	const changeFun = (e : any) => {
		if (e != '') state.queryString = e
	}
	const upTabsItemFun = (e : any) => {
		state.tabsIndex = e.type
	}
	const clearOut = () => {
		state.queryString = ''
	}
	const submit = () => {
		packingRef.value.dataPushNotification()
	}
</script>

<style lang="scss">
	.app {
		background-color: #F5F5F5;

		.page {
			padding: 18px 32rpx;
			display: flex;
			flex-direction: column;
			height: 100%;
			flex: 1;

			.input-box {
				background-color: white;
				box-sizing: border-box;
				padding: 0 16rpx;
				border-radius: 24rpx;
				margin: 0 0 32rpx 0;

				.u-textarea {
					padding: 0 !important;
					font-size: 24rpx !important;
					color: #999999 !important;
				}

				.input-item {
					box-sizing: border-box;
					padding: 16rpx 0;
					color: #222222;
					font-size: 28rpx;
					font-weight: 400;

					.item-title {
						//font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.item-text {
						font-weight: 400;
						font-size: 27rpx;
						color: #999999;
					}
				}
			}

			.receive-listBox {
				flex: 1;

				.list-box-list {
					width: 100%;

					// margin: 20rpx auto;
					.data-item {
						border: 1px solid #efeaea;
						border-radius: 20rpx;
						box-shadow: 0rpx 15rpx 15rpx #efeaea;
						padding: 20rpx 20rpx 0;
						margin-bottom: 20rpx;
						background-color: #ffffff;

						.tit {
							font-size: 30rpx;
							font-weight: bold;
							padding: 20rpx 0;
						}

						.line-p {
							border: 1px solid #efeaea;
						}

						.b-font {
							font-size: 25rpx;
							padding: 20rpx 0;
						}
					}
				}
			}
		}
	}
</style>