<template>
	<view>
		<view class="input-box">
			<view class="input-item" v-if="state.show">
				<up-input :placeholder="props.placeholder" border="none" clearable inputAlign="left" v-model="state.inputText"
					@confirm="confirmfun">
					<template #prefix>
						<up-icon :name="props.icon" color="#2979ff" size="24"></up-icon>
					</template>
				</up-input>
			</view>
			<view class="codeBox" v-else>
				<tki-qrcode cid="qrcode" ref="qrcode" :val="state.inputText" :size="170" unit="upx" :loadMake="true"
					:usingComponents="true" />
				<view class="codeBoxText">
					<view>{{ t('receive.djbh1') }}：{{ props.dataType }}</view>
					<view>{{ t('receive.code') }}：</view>
					<view class="container chinese-text">{{ state.inputText }}</view>
				</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<qs-scanlistener @scan="scanFun" />
		<!-- #endif -->
	</view>
</template>

<script lang="ts" setup>
	import { reactive, nextTick, defineProps, defineEmits, defineExpose,watch } from 'vue';
	import { useI18n } from 'vue-i18n'
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const emits = defineEmits(['inputConfirm', 'scanConfirm'])
	const props = defineProps({
		icon: {
			type: String,
			default: () => 'search'
		},
		placeholder: {
			type: String,
			default: () => '请输入内容'
		},
		dataType: {
			type: String,
			default: () => '来料验证'
		},
		fence: {
			type: Array,
			default: () => {
				return [false]
			}
		}
	})
	watch(()=> props.fence,(val1,val2) => {
		console.log(val1,val2);
		if (props.fence.filter((item : any) => item).length !== 0) {
			state.inputText = ''
			state.show = true
		}
	})
	const state = reactive({
		inputText: '',
		show: true
	})
	const scanFun = (res : any) => {
		console.log(props.fence.filter((item : any) => item));
		if (props.fence.filter((item : any) => item).length === 0) {
			state.inputText = res
			state.show = false
			emits('scanConfirm', res)
		}
	}
	const confirmfun = (e : any) => {
		emits('inputConfirm', e)
	}
	const closeFun = (time : number = 4000) => {
		console.log('123');
		setTimeout(() => {
			state.inputText = ''
			state.show = true
			console.log('456');
			emits('inputConfirm', '')
		},time)
	}
	defineExpose({
		closeFun
	})
</script>

<style lang="scss">
	.container {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
		/* 支持连字符换行 */
	}

	/* 中文强制换行 */
	.chinese-text {
		word-break: break-all;
	}

	.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;
			}
		}
	}

	.codeBox {
		padding: 36rpx 24rpx 24rpx 18rpx;
		display: flex;

		.codeBoxText {
			margin-left: 32rpx;
		}
	}
</style>