<template>
	<gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
		<template #gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goHome">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text">打印测试</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template #gBody>
			<list class="form">
				<cell>
					<uni-data-select v-model="printName" :localdata="locationList" />
					<button @click="Print">打印</button>
				</cell>
			</list>
		</template>
	</gui-page>
</template>

<script>
	import {
		CCPrintingAPI
	} from "@/unit/CCPrintingAPI.min.vue.js";
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		setup() {
			const printName = ref('')
			const locationList = ref([])
			const GetPrinters = function() {
				var cfgData = new Object;
				cfgData.XAction = "Printers";
				cfgData.XOpenId = "10000004";
				cfgData.XTokens = "+fdBeHkvLvJgWBKF/6iODpmABblarwVz";
				cfgData.XUrl = "http://192.168.1.58:51320";
				// uniapp 1 其它 0
				cfgData.FaceType = "1";
				CCPrintingAPI.Excute(cfgData,
					function(XTimeout) {},
					function(XFail) {
						// document.getElementById("tipsmessage").innerHTML = "API可能未安装或未启动";
					},
					function(XSuccess) {
						var apiResult = JSON.parse(XSuccess.trim());
						console.log(apiResult);
						if (apiResult.Status == "1") {
							/*获取到打印机列表*/
							if (apiResult.Message.length > 1) {
								for (var i = 1; i < apiResult.Message.length; i++) {
									locationList.value.push({
										text: apiResult.Message[i],
										value: apiResult.Message[i]
									})
								}
								/*设置上次使用的打印机*/
								// prts.options[0].selected = 'selected';
							}
						}
					}
				);
			}

			onMounted(() => {
				GetPrinters();
			})
			const Print = function(e) {
				var cfgData = new Object;
				cfgData.XAction = "Print"
				cfgData.XOpenId = "10000004";
				cfgData.XTokens = "+fdBeHkvLvJgWBKF/6iODpmABblarwVz";
				cfgData.XUrl = "http://192.168.1.58:51320";
				// uniapp 1 其它 0
				cfgData.FaceType = "1";

				/*指定打印机*/
				cfgData.PrinterName = printName.value;



				/*模板方式，0-客户端模板，1-远程模板，
				            2-如果本地模板存在，使用本地，不存在使用远程模板，3-不使用模板*/
				cfgData.TemplateMode = "2";
				/*远程模板URL或本地模板的文件夹*/
				// cfgData.TemplateURL = "http://img.51321.cn/web/chicore/VPrinting/API";
				cfgData.TemplateURL = "http://113.105.183.190:9163/bucket163";
				// cfgData.TemplateURL =  "D:\\\\";
				/*模板文件名*/
				// cfgData.TemplateName = "183601-70X40.Lblx";
				cfgData.TemplateName = "2024-01-23-11-03-47-1705979027368_Label3.Lblx";
				// cfgData.TemplateName = "Label2.Lblx";
				/*打印数据的类型，0-数组，1-Json数组，元素为JSON对象，字段：值*/
				cfgData.PrintDataType = 1;

				// 随机数据列表
				const supplierNameList = ['昆山鼎翔材料科技有限公司', '深圳市新联科技有限公司']
				const productSpecList = ['70mm * 40mm', '1.0mm * 1000mm', '1.0mm * 1000mm',
					'1.0mm * 1000mm', '1.0mm * 1000mm', '1.0mm * 1000mm', '1.0mm * 1000mm'
				]
				const locationNameList = ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
				const materialNameList = ['0.05mm蓝色单层硅胶保护膜7-10g(LZKLGP55-3）',
					'0.036mm蓝色非离型面防静电离型膜75±15g(LPT50ZC#EE(C)-36 )', '绿色高温胶带(LCE-P101-G)', 'PPBRFA 背胶磁芯 FA',
					'10.19mm磁芯 DEV03-PCS', '0.025白色离型膜1-5g（JHS-WP025004）'
				]
				const storageEnvironmentList = ['常温', '17-23℃ 40-60%RH', '7-11℃ 25-30%RH', '常湿']
				/*传递打印数据 Json数组*/
				/*内容不允许 半角的逗号及半角的分隔符*/
				var arr = [{
						qrCode: 'SN' + Math.round(Math.random() * 1000000010),
						size: Math.round(Math.random() * 10000) + 'mm * ' + Math.round(Math.random() *
							10000) + 'mm',
						materialName: materialNameList[Math.floor(Math.random() * materialNameList
							.length)],
						materialCode: 'LZKLGP55-3',
						materialLots: 'A0038-20240114-0008-0004-1001',
						supplierName: supplierNameList[Math.floor(Math.random() * supplierNameList
							.length)],
						createTime: '2024-01-14',
						inspectTime: '2024-01-14',
						produceDate: '2024-01-14',
						validityDate: '2024-01-14',
						size: productSpecList[Math.floor(Math.random() * productSpecList.length)],
						qty: Math.round(Math.random() * 1000000),
						batchNumber: '20240114000' + Math.round(Math.random() * 1000),
						wmsStockLocationName: locationNameList[Math.floor(Math.random() * locationNameList
							.length)],
						storageEnvironment: storageEnvironmentList[Math.floor(Math.random() *
							storageEnvironmentList.length)],
						slittingOrderNo: '20240114000' + Math.round(Math.random() * 1000),
					},
					// { sku: 'OBJ100001', name: '测试1', kw: 'D12-1', bh: 'RKD123451' },
					// { sku: 'OBJ100002', name: '测试2', kw: 'D12-2', bh: 'RKD123452' },
					// { sku: 'OBJ100003', name: '测试3', kw: 'D12-3', bh: 'RKD123453' },
				];
				cfgData.PrintData = JSON.stringify(arr);
				/*打印 发送给打印机进行打印*/
				CCPrintingAPI.Excute(cfgData,
					function(XTimeout) {},
					function(XFail) {
						document.getElementById("tipsmessage").innerHTML = "API可能未安装或未启动";
					},
					function(XSuccess) {
						var apiResult = JSON.parse(XSuccess.trim());
						if (apiResult.Status == "1") {
							document.getElementById("tipsmessage").innerHTML = apiResult.Message[0] +
								apiResult.Message[1];
						}
					}
				);
			}
			const goHome = function() {
				uni.$goHome()
			}
			return {
				goHome,
				printName,
				Print,
				locationList
			}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.gui-sbody {
		font-size: 14px;
		background-color: rgba(234, 239, 242, 1);
	}

	.form {
		margin-top: 85px;
	}

	.row-1,
	.row-2,
	.row-3,
	.row-4 {
		margin-top: 10px;
		height: 55px;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.row-1 {
		margin-top: 0px;
	}

	.row-1,
	.row-2 {

		.row-1-card,
		.row-2-card {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	.row-3 {
		height: 140px;

		.row-3-card {
			display: flex;
			flex-direction: column;

			.row-space-between {
				flex: 1;
				width: calc(100vw - 40px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}

	}

	.row-4 {
		height: 300px;

		.row-4-card {
			display: flex;
			flex-direction: column;

			.row-space-between {
				flex: 1;
				width: calc(100vw - 40px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 12px;
				margin-bottom: 12px;
			}
		}

	}

	.row-operation {
		height: 110px;
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.row-operation-card {
			flex: 1;

			.btn-row-1 {
				margin-bottom: 5px !important;
			}
		}
	}

	.input-200 {
		width: 200px;
		padding-left: 10px;
	}

	.input-300 {
		width: 300px;
		padding-left: 10px;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
	}

	.select-group {
		display: flex;
		flex-direction: column;
		flex: 1;

		.select-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10px;

			.store-text {
				margin-right: 14px;
			}
		}
	}
</style>