<template>
	<view class="app status-bar-gap">
		<view class="page">
			<l-header title="准备打印" sticky></l-header>
			<view class="data-item" :style="[{'background-color':'#ffffff'}]">
				<view class="dataText">
					<view class="text" style="margin-bottom: 20px;display: flex;">
						<view>{{ state.pageData.MaterialName }}</view>
					</view>
					<view class="itemBox">
						<view>{{t('receive.djbh')}}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.FBillNo }}</view>
					</view>
					<view class="itemBox">
						<view>{{t('receive.wlbm')}}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.MaterialNo }}</view>
					</view>
					<view class="itemBox">
						<view>{{t('receive.ph')}}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.Lot }}</view>
					</view>
					<view class="itemBox">
						<view>{{ t('index.ck') }}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.MultiLanguageText }}</view>
					</view>
					<view class="itemBox">
						<view>{{t('receive.ys')}}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.CheckJoinQty }}</view>
					</view>
					<view class="itemBox">
						<view>{{t('receive.ws')}}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.NoCheckQty }}</view>
					</view>
					<view class="itemBox">
						<view>{{t('receive.yss')}}</view>
						<view class="zongjian"></view>
						<view>{{ state.pageData.CheckQty }}</view>
					</view>

				</view>

			</view>
			<view class="data-item" :style="[{'background-color':'#ffffff'}]" style="margin-top: 32rpx;">
				<view class="dataText" style="display: flex;align-items: center;">
					<tki-qrcode cid="qrcode1" ref="qrcode" val="val" :size="160" unit="upx" :loadMake="true"
						:usingComponents="true" />
					<view style="margin-left: 32rpx;">
						<view>销售出库单单号:{{ state.pageData.FBillNo }}</view>
						<view>物料编码:{{ state.pageData.MaterialNo }}</view>
						<view>数量:{{ state.pageData.CheckQty }}</view>
						<view>批号:{{ state.pageData.Lot }}</view>
					</view>
				</view>
			</view>
			<view class="input-box" @click="printingMachineSelectFun">
				<view class="input-item">
					<up-input placeholder="请选择打印机" border="none" clearable inputAlign="left"
						v-model="state.printingMachine.name" confirmType="next" :disabled="true">
						<template #prefix>
							<view class="item-title" style="margin-right: 16rpx;">打印机</view>
						</template>
						<template #suffix>
							<up-icon name="search" color="#6c6c6c" size="24"></up-icon>
						</template>
					</up-input>
				</view>
			</view>
			<view class="btnList" style="margin-top: 32rpx;">
				<up-button class="btnItem" type="primary" shape="circle" text="打印" @click="sendHexStr"></up-button>
			</view>
		</view>
		<bluetoothList ref="bluetoothListRef" :dataList="state.bluetoothList" @getAddress="getAddressFun" />
	</view>
</template>

<script setup lang="ts">
	import { reactive, nextTick, onMounted, ref, computed, watch } from 'vue';
	import { onLoad, onShow, onReachBottom, } from '@dcloudio/uni-app'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import { PRD_MOEnterIntoPro } from '../../common/request/api/api';
	import { timeFormat } from '@/uni_modules/uview-plus';
	import bluetoothList from './bluetoothList.vue'
	import { useI18n } from 'vue-i18n'
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const bluetoothListRef = ref()
	// #ifdef APP-PLUS
	const blueModule = uni.requireNativePlugin("gp-bluetooth")
	import * as tsc from '../../components/gprint/tsc.js'
	// #endif

	const state = reactive({
		id: '',
		FBillNo: '',
		pageData: {},
		printingMachine: {
			name: '',
			address: ''
		},
		bluetoothList: [],
		sendData: ''
	})
	onLoad((pageData : any) => {
		state.pageData = pageData
		console.log(pageData);
	})
	onShow(() => {
		uni.getLocation({
			type: 'wgs84',
			success(res) {
				console.log('开启定位权限', res)
			},
			fail: (err) => {
				uni.showToast({
					title: '请先打开定位功能:' + err,
					duration: 1500
				});
			}
		});
		// #ifdef APP-PLUS
		hasPermission()
		// #endif
	})
	//获取蓝牙权限并打开蓝牙
	const hasPermission = () => {
		blueModule.hasPermission((res : any) => {
			if (res.success) {
				blueModule.isOpen((isOpenRes : any) => {
					console.log(isOpenRes)
					if (isOpenRes.success) {
						state.printingMachine.name = uni.getStorageSync('printInfo').name
						state.printingMachine.address = uni.getStorageSync('printInfo').address
					} else {
						uni.setStorageSync('printInfo',{})
						state.printingMachine.name = ''
						state.printingMachine.address = ''
						blueModule.openBT((openBTRes : any) => {
							console.log(openBTRes)
						});
					}
				});
			} else {
				uni.$u.toast('未获取到蓝牙权限')
			}
		});
	}
	//读取附近蓝牙设备
	const ReadTheAttachedBluetoothDevice = () => {
		state.bluetoothList = []
		blueModule.searchBT((res : any) => {
			if (res.success) {
				console.log(res);
				if (res.data?.name) {
					bluetoothListRef.value.getList(res.data)
				}
			}
		});
	}

	const printingMachineSelectFun = () => {
		ReadTheAttachedBluetoothDevice()
		bluetoothListRef.value.open()
	}

	const getAddressFun = (row : any) => {
		console.log("连接蓝牙---------------" + row.address)
		blueModule.connect({
			MACAddress: row.address,
			uuid: '00001101-0000-1000-8000-00805f9b34fb',
			sleepTime: 50
		}, (result : any) => {
			//连接结果
			console.log(result)
			if (result.success) {
				uni.$u.toast('连接成功')
				state.printingMachine.name = row.name
				state.printingMachine.address = row.address
				bluetoothListRef.value.close()
				uni.setStorageSync('printInfo',{name:row.name,address:row.address})
			} else {
				uni.$u.toast('连接失败')
			}
		}, (data : any) => {
			//接收的数据回调
			console.log(data)
		})
	}

	const createLabel = () => {
		var command = tsc.default.createNew()
		command.setSize(100, 50)
		command.setGap(2)
		command.setCls()
		command.setQR(100, 100, "L", 10, "A", "www.poscom.cn")
		command.setText(360, 100, "TSS24.BF2", 1, 1, `销售出库单号：${state.pageData.FBillNo}`)
		command.setText(360, 140, "TSS24.BF2", 1, 1, `物料编码：${state.pageData.MaterialNo}`)
		command.setText(360, 180, "TSS24.BF2", 1, 1, `数量：${state.pageData.CheckQty + ''}`)
		command.setText(360, 220, "TSS24.BF2", 1, 1, `批号：${state.pageData.Lot + ''}`)
		command.setPagePrint()
		state.sendData = command.getData();
	}
	const sendHexStr = () => {
		createLabel()
		if (state.sendData == null) {
			uni.$u.toast('请先生成指令')
			return
		}
		let hexStr = ''
		var data = Array.from(state.sendData)
		for (var i = 0; i < data.length; i++) {
			var str = Number(data[i]).toString(16)
			str = str.length == 1 ? "0" + str : str
			hexStr += str
		}

		function splitString(str, length) {
			var strLen = str.length
			var resArr = []
			for (var i = 0; i < strLen; i += length) {
				resArr.push(str.substring(i, i + length))
			}
			return resArr
		}

		var sendloop = splitString(hexStr, 250);
		console.log(sendloop.length)
		function realWriteData(sendloop, i) {
			var data = sendloop[i]
			if (typeof (data) == "undefined") {
				return
			}
			console.log("第【" + i + "】次写数据" + data)
			var ret = blueModule.sendHexStr(data, (result) => {
				//结果
				console.log('发送结果')
				console.log(result)
				if (result.success) {
					realWriteData(sendloop, i + 1);
				}
			});
			//console.log(ret)
		}
		var i = 0;
		realWriteData(sendloop, i);
	}
	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;
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-date__x-input) {
		color: black !important;
	}

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

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

			.data-item {
				border: 1px solid #efeaea;
				border-radius: 20rpx;
				padding: 20rpx 22rpx;
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.btnList {
					display: flex;
					margin-bottom: 32rpx;

					.btnItem {
						width: 40%;
					}
				}

				.timebox {
					display: flex;
					align-items: center;
					margin-top: 32rpx;
				}

				.itemBox {
					line-height: 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;

					.zongjian {
						height: 1px;
						flex: 1;
						background-color: #f0f0f0;
						margin: 0 16rpx;
					}
				}
			}
		}
	}
</style>