<template>
	<up-popup :show="state.show" @close="close" @open="open">
		<view class="input-box">
			<view class="input-item">
				<up-input :placeholder="t('public.xzck')" border="none" clearable inputAlign="left"
					v-model="state.shortcut.warehouseStr" confirmType="next" :disabled="true">
					<template #prefix>
						<view class="item-title" style="margin-right: 16rpx;">{{ t('public.ckmc') }}</view>
					</template>
					<template #suffix>
						<up-icon name="search" color="#6c6c6c" size="24" @click="warehouseShowFun"></up-icon>
					</template>
				</up-input>
			</view>
		</view>
		<view class="input-box">
			<view class="input-item">
				<up-input :placeholder="state.NoLocationListText" border="none" clearable inputAlign="left"
					v-model="state.shortcut.locationStr" confirmType="next" @change="locationChange">
					<template #prefix>
						<view class="item-title" style="margin-right: 16rpx;">{{ t('public.cwmc') }}</view>
					</template>
					<template #suffix>
						<up-icon name="search" color="#6c6c6c" size="24" @click="locationStrShowFun"></up-icon>
					</template>
				</up-input>
			</view>
		</view>
		<!-- <view class="input-box">
			<view class="input-item">
				<up-input :placeholder="t('public.qsrsl')" border="none" clearable inputAlign="right"
					v-model="state.shortcut.quantityStr" confirmType="next">
					<template #prefix>
						<view class="item-title">{{ t('public.qty') }}</view>
					</template>
				</up-input>
			</view>
		</view>
		<view class="input-box">
			<view class="input-item">
				<up-input :placeholder="t('public.qsrmssph')" border="none" clearable inputAlign="right"
					v-model="state.shortcut.batchNumberStr" confirmType="next">
					<template #prefix>
						<view class="item-title">{{ t('public.mmsph') }}</view>
					</template>
				</up-input>
			</view>
		</view> -->
		<view class="input-box">
			<view class="input-item">
				<up-input border="none" clearable inputAlign="right" :disabled="true"
					v-model="state.shortcut.scanFrameTextState" confirmType="next">
					<template #prefix>
						<view class="item-title">{{ t('public.gdtcckMessage') }}</view>
					</template>
					<template #suffix>
						<up-switch style="margin-left: 16rpx;" v-model="state.shortcut.scanFrameShowSate"
							@change="scanFrameShowSateSwitch" size="24"></up-switch>
					</template>
				</up-input>
			</view>
		</view>
		<view class="btnListSc">
			<up-button type="primary" :plain="true" :text="t('public.cz')" @click="dataResetFun"></up-button>
			<up-button type="primary" :text="t('public.bc')" style="margin-left: 36rpx;"
				@click="dataToscanFrameFun"></up-button>
		</view>
		<warehouse :show="state.warehouse" @warehouseClose="warehouseClosefun" @warehouseData="warehouseDataFun" />
		<location :show="state.location"
			:warehouseId="Object.keys(state.warehouseData).length ? state.warehouseData.FNUMBER : null"
			@locationClose="locationClosefun" @locationData="locationDataFun" />
	</up-popup>
</template>

<script lang="ts" setup>
	import { reactive, nextTick, onMounted, ref, computed, defineProps, defineEmits, watch } from 'vue';
	import { onLoad, onShow, onReachBottom, } from '@dcloudio/uni-app'
	import warehouse from '../warehouse/warehouse.vue'
	import location from '../warehouse/location.vue'
	import i18n from '../../locale/index'
	import { useI18n } from 'vue-i18n'
	import { fStockFlexDetailList } from '../../common/request/api/api';
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const eimts = defineEmits(['dataToscanFrame', 'boxShow'])
	const state = reactive({
		show: false,
		warehouse: false,
		location: false,
		warehouseData: {},
		locationData: {},
		NoLocationListText: t('public.xzcw'),
		NoLocationList: true,
		specialModule: '',
		modeTyoeStr: '',
		shortcut: {
			warehouseStr: '',
			locationStr: '',
			quantityStr: '',
			batchNumberStr: '',
			scanFrameTextState: t('public.gdtc'),
			scanFrameShowSate: true
		}
	})
	onMounted(() => {
		dataToscanFrameFun()
	})
	const debounceTimer = ref()
	const locationChange = (e : any) => {
		if (debounceTimer.value !== null) clearTimeout(debounceTimer.value)
		debounceTimer.value = setTimeout(() => {
			state.shortcut.locationStr = e
			if (state.shortcut.locationStr !== '' && state.shortcut.warehouseStr !== '') {
				fnDataList()
			}
		}, 500)
	}
	const fnDataList = () => {
		let param = {
			Number: state.warehouseData.FNUMBER,
			queryString: state.shortcut.locationStr,
			IsSortBySeq: true
		};
		fStockFlexDetailList(param).then(res => {
			uni.hideLoading();
			if (res.code == 200) {
				if (res.data.list.length) {
					state.locationData = res.data.list[0]
					state.shortcut.locationStr = res.data.list[0].FFlexValueName
				} else {
					uni.$u.toast('未找到该仓位')
				}
			}
		});
	}
	const close = () => {
		state.show = false
		eimts('boxShow', state.show)
	}
	const open = () => {
		eimts('boxShow', state.show)
	}
	
	const dataToscanFrameFun = () => {
		if (state.shortcut.warehouseStr !== '' && state.NoLocationList && state.shortcut.locationStr === '') {
			uni.$u.toast(t('public.qxzcw'))
			state.show = true
			return
		}
		if(state.modeTyoeStr !== ''){
			let shortcutObjList : any = [...uni.getStorageSync('shortcutObj')]
			let shortcutObjItem : any = uni.getStorageSync('shortcutObj').find((item : any) => item.key === state.modeTyoeStr)
			if (Object.keys(shortcutObjItem).length !== 0) {
				shortcutObjList.forEach((item : any) => {
					if(item.key === state.modeTyoeStr){
						item.warehouseData = state.warehouseData
						item.locationData = state.locationData
					}
				})
			} else {
				shortcutObjList.push({
					key: state.modeTyoeStr,
					warehouseData: state.warehouseData,
					locationData: state.locationData
				})
			}
			uni.setStorageSync('shortcutObj',shortcutObjList)
		}
		eimts('dataToscanFrame', {
			...state.shortcut,
			warehouseData: state.warehouseData,
			locationData: state.locationData,
		})
		state.show = false
		eimts('boxShow', state.show)
	}
	const dataResetFun = () => {
		state.shortcut = {
			warehouseStr: '',
			locationStr: '',
			quantityStr: '',
			batchNumberStr: '',
			scanFrameTextState: t('public.gdtc'),
			scanFrameShowSate: false
		}
		eimts('dataToscanFrame', {})
	}
	const stateShow = (val : boolean, specialModule : string = '', modeTyoeStr : string = '') => {
		if (modeTyoeStr != '') {
			state.modeTyoeStr = modeTyoeStr
			if (!uni.getStorageSync('shortcutObj')) uni.setStorageSync('shortcutObj', [])
			else {
				let shortcutObjItem : any = uni.getStorageSync('shortcutObj').find((item : any) => item.key === modeTyoeStr)
				if (Object.keys(shortcutObjItem).length !== 0) {
					if (Object.keys(shortcutObjItem.warehouseData).length) {
						state.warehouseData = shortcutObjItem.warehouseData
						state.shortcut.warehouseStr = shortcutObjItem.warehouseData.FNAME
					}
					if (Object.keys(shortcutObjItem.locationData).length) {
						state.locationData = shortcutObjItem.locationData
						state.shortcut.locationStr = shortcutObjItem.locationData.FFlexValueName
					}
				}
			}
		}
		state.specialModule = specialModule
		state.show = val
	}
	/**
	 * 仓库逻辑
	 */
	const warehouseClosefun = () => { state.warehouse = false }
	const warehouseShowFun = () => {
		state.warehouse = true
	}
	const warehouseDataFun = (item : any) => {
		state.warehouseData = item
		state.shortcut.warehouseStr = item.FNAME
		state.warehouse = false
		state.locationData = {}
		state.shortcut.locationStr = ""
		if (state.warehouseData.FIsOpenLocation) {
			state.NoLocationList = true
			state.NoLocationListText = t('public.xzcw')
		} else {
			state.NoLocationList = false
			state.NoLocationListText = t('public.cwwqy')
			state.shortcut.locationStr = ''
			state.locationData = {}
		}
	}
	/**
	 * 指定模块可以不需要仓库仓位
	 */
	const isWarehouseAndLocationState = () => {
		if (state.specialModule = 'encasement') {
			return false
		}
		return true
	}
	const scanFrameShowSateSwitch = () => {
		state.shortcut.scanFrameShowSate ? state.shortcut.scanFrameTextState = t('public.gdtc') : state.shortcut.scanFrameTextState = t('public.yctc')
		if (isWarehouseAndLocationState()) {
			if (!state.shortcut.scanFrameShowSate) {
				if (state.shortcut.warehouseStr == '' && state.NoLocationList) {
					state.shortcut.scanFrameShowSate = true
					uni.$u.toast(t('public.qxzcw'))
				} else if (state.shortcut.warehouseStr !== '' && state.NoLocationList && state.shortcut.locationStr === '') {
					state.shortcut.scanFrameShowSate = true
					uni.$u.toast(t('public.qxzcw'))
				}
			}
		}
	}
	/**
	 * 仓位逻辑
	 */
	const locationStrShowFun = () => {
		if (Object.keys(state.warehouseData).length) {
			if (state.warehouseData.FIsOpenLocation) {
				state.location = true
			} else {
				uni.$u.toast(t('public.cwwqy'))
			}
		} else {
			uni.$u.toast(t('public.qxzcw'))
		}
	}
	const locationClosefun = () => {
		state.location = false
	}
	const locationDataFun = (item : any) => {
		state.locationData = item
		state.shortcut.locationStr = item.FFlexValueName
		state.location = false
	}
	const toPages = (url : string, data : any = {}) => {
		uni.$u.route({
			url: url,
			params: data
		})
	}
	const formatLangTextValue = (val : any) => {
		let lang_Id = uni.getStorageSync('locale')
		let item = val.find(p => p.Key == (lang_Id == 'cn' ? 2052 : 1033));
		if (item != null) {
			return item.Value;
		}
		return val[0].Value;
	}
	defineExpose({
		stateShow
	})
</script>

<style scoped lang="scss">
	:deep(.u-input) {
		background-color: #ffffff !important;
	}

	:deep(.u-popup__content) {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		box-sizing: border-box;
		padding: 16rpx;
		background-color: #F5F5F5;
	}

	:deep(.u-input--square) {
		background-color: #ffffff !important;
	}

	.popupText {
		text-align: center;
	}

	.btnListSc {
		display: flex;
		margin: 16rpx 0;
	}

	.input-box {
		background-color: white;
		box-sizing: border-box;
		padding: 0 16rpx;
		border-radius: 16rpx;
		margin: 16rpx 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: 28rpx;
				color: #333333;
			}

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