<!--扫描组件-->
<template>
	<!-- <page-meta root-font-size="18px"></page-meta> -->
	<view>
		<view class="pop_tab">
			<view class="tab_info">
				<view class="conbox">
					<textarea v-model="scanMsg" trim="all" maxlength="1000" style="margin-left: 5px;width: 90%;"
						:placeholder="placeholderValue" :focus="boxfocus" @blur="handleBlur" @focus="handleFocus"
						@input="handelScanMsg" ></textarea>
				</view>

				<view class="uni-flex uni-row space-between u-col-center">
					<!-- <view class="paizhao" @click="scanQRCode()" v-if="true">
						<image src="/static/icons/icons_camera.svg" alt="" />
					</view> -->

					<view class="uni-flex">
						<button class="clean_scan_btn" @touchend.prevent="clearScanValue()">清空</button>
						<button class="scan_btn" @click="clickScanMsg()">扫描</button>
					</view>
				</view>
			</view>

			<view style="width: 100%;">
				<view style="width: 100%;" v-if="isShowHistory&&scanList.length>0">
					<view class="uni-flex uni-row space-between u-col-center">
						<view class="" style="padding: 10rpx;">
							历史记录
						</view>
						<view class="" style="padding-right: 10rpx;">
							<u-icon :name="expendIcon" size="35rpx" @click="expands()"></u-icon>
						</view>
					</view>
					<u-line class='line_color' style='padding-top: 10rpx;padding-bottom: 20rpx;'></u-line>
					<scroll-view scroll-y="true" class="scroll-view" v-if="expand" style="height: 70px;">
						<view class="uni-flex u-col" v-for="(item,index) in scanList">
							<view style="width: 100%;max-height: 100px;">
								<view class="uni-flex u-row space-between u-col-center" @click="showItem(item)">
									<view class="text_ellipsis" style="padding: 15rpx;">
										{{item}}
									</view>
									<view class="">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
								<u-line class='line_color'></u-line>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>
<script>
	import {
		getLabelInfo
	} from '../../common/label.js';

	export default {
		name: "winComScan",
		emits: ["getResult"],
		components: {},
		props: {
			placeholder: {
				type: String,
				default: '请扫描标签'
			},
			clearResult: {
				type: Boolean,
				default: true
			},
			// boxFocus: {
			// 	type: Boolean,
			// 	default: true
			// },
			isShowHistory: {
				type: Boolean,
				default: true
			},
			headerType: {
				type: String,
				default: 'HPQ' //HLB   HMQ   HCQ HPQ
			}
		},
		data() {
			return {
				// scanMsg: "HPQ;V1.0;ICE115F11161AG;PP20230427000027;B20230427002;Q100",
				scanMsg: "",
				boxfocus: false,
				placeholderValue: '',
				scanResult: {},
				scanList: [],
				expand: true,
				expendIcon: 'arrow-down',
				cursorIndex: 0
			}
		},
		mounted() {

		},
		watch: {
			placeholder() {
				this.placeholderValue = '请扫描' + this.placeholder;
			}
		},
		created() {
			this.placeholderValue = '请扫描' + this.placeholder;
		},
		methods: {
			setItemCodeSimulate(scanMsg) {
				this.scanMsg = scanMsg;
			},
			hide() {
				// #ifdef APP-PLUS
				// 只是解决软键盘的闪现
				var interval = setInterval(function() {
					uni.hideKeyboard(); //隐藏软键盘
					console.log('刷新')
				}, 5);
				setTimeout(() => {
					clearInterval(interval);
					console.log('停止刷新')
				}, 1000);
				// #endif 
			},
			getValue() {
				return this.scanMsg
			},
			setValue(val) {
				this.scanMsg = val
			},
			clearScanValue() {
				this.scanMsg = ''
				// this.cursorIndex = 0
				this.getfocus();
			},
			clickScanMsg() {
				this.scanMsg = this.scanMsg + "\n";
				this.handelScanMsg();
			},
			handelScanMsg() {
				//点击了回车
				// uni.showLoading({
				// 	title: '解析中...',
				// 	mask: true
				// })
				let that = this;
				// if(index==-1){
				// 	that.scanMsg =that.scanMsg + "\n";
				// }
				if (that.scanMsg.includes('\n')) {
					// that.scanMsg = 'HPQ;V1.0;ICE115F11161AG;PP20230427000027;B20230427002;Q50';
					setTimeout(() => {
						that.losefocus();
						let content = uni.$u.trim(that.scanMsg)
						if (content == "") {
							// that.getfocus();
							this.$refs.comMessage.showErrorMessage("扫描内容为空,请重新扫描", res => {
								if (res) {
									that.scanMsg = ""
									that.getfocus();
								}
							})
							return;
						}

						if (that.isShowHistory) {
							that.scanList.unshift(content);
						}
						getLabelInfo(content, this.headerType, callback => {
							// uni.hideLoading();
							let scanResult = callback;
							scanResult.scanMessage = content
							if (scanResult.success) {
								that.clear();
								// that.getfocus();//不能自动获取焦点
								that.$emit("getResult", scanResult);
							} else {
								that.clear();
								that.losefocus();
								this.$refs.comMessage.showErrorMessage(scanResult.message, res => {
									if (res) {
										that.getfocus();
									}
								})
							}
						});
					}, 200);
				}
			},

			handleFocus() {},

			handleBlur() {
				// setTimeout(res=>{
				// 	uni.hideKeyboard();
				// },200)
			},
			getfocus() {
				let that = this;
				this.$nextTick(r => {
					that.boxfocus = true;
				});
			},
			losefocus() {
				let that = this;
				this.$nextTick(r => {
					that.boxfocus = false;
				});
			},
			clear() {
				if (this.clearResult) {
					this.scanMsg = ""
					// this.cursorIndex = 0;
				}
			},
			iconClick(type) {
				this.$emit("clearResult", this.scanMsg);
			},
			expands() {
				this.expand = !this.expand;
				this.expendIcon = this.expand == true ? "arrow-down" : "arrow-up"
			},
			scanClick() {
				this.handelScanMsg();
			},
			cancelClick() {
				this.clear();
				this.getfocus();
			},
			showItem(item) {
				this.$refs.comMessage.showMessage(item, res => {
					if (res) {
						// this.$refs.modal.cancelClose();
					}
				})
			},

			scanQRCode() {
				let that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						that.scanMsg = res.result;
						that.$emit("getResult", res.result);
						console.log('扫描二维码成功,结果:' + res.result);
					},
					fail: (res) => {
						that.showItem('扫描出现错误:' + res.result);
						console.log('扫描出现错误:' + res.result);
					}
				});
			}
		}
	}
</script>

<script module="textarea" lang="renderjs">
	export default {
		mounted() {
			// document.querySelector('textarea').setAttribute('inputmode', 'none')
		},
	}
</script>

<style scoped lang="scss">

</style>