<template>
	<view class="wrapper">
		<view class="body-wrapper">
			<view class="logo-wrapper">
				<image class="logoImg" src="/static/image/home/logo.png" alt="" />
				<h3>露天炮孔测孔仪</h3>
			</view>
			<view class="link-info-wrapper">
				<image class="bg" src="../../static/image/paokong/home-title-bg.png" mode=""></image>
				<div class="left">
					<image :src="`/static/image/paokong/${connected?'linkY':'linkN'}.png`" mode=""></image>
					<view class="link-status" :class="{'unlink': !connected}">
						蓝牙{{ connected? '已连接': '未连接' }}
					</view>
				</div>
				<div class="right">
					<div class="top">
						<h2>设备电量</h2>
						<p>
							小球 <image src="/static/image/paokong/qiu-dl.png">{{ connected && power1 || '-'}} %
							仪器 <image src="/static/image/paokong/shebei-dl.png">{{ connected && power2 || '-'}} %
						</p>
					</div>
					<div class="bottom">
						<h2>设备参数</h2>
						<p>设备名称：露天炮孔测孔仪</p>
						<p>设备型号：MSYS-OH-02</p>
						<p>设备ID：{{ connected && qiuId || '-'}}</p>
					</div>
					
				</div>
			</view>
			<p class="list-item" @click="uploadExcel" style="margin-top: -14rpx;">
				<image src="/static/image/paokong/impexp.png" alt="" />
				<span>炮孔设计数据导入</span>
			</p>
			<p class="list-item" @click="navTo('link')">
				<image src="/static/image/paokong/link.png" alt="" />
				<span>连接露天炮孔测孔仪</span>
			</p>
			<p class="list-item" @click="navTo('measure')">
				<image src="/static/image/paokong/measure.png" alt="" />
				<span>炮孔测量</span>
			</p>
			<p class="list-item" @click="exportExcel">
				<image src="/static/image/paokong/impexp.png" alt="" />
				<span>炮孔测量数据导出</span>
			</p>
		<!-- 	<p class="list-item" @click="navTo('operateLog')">
				<image src="/static/image/paokong/operatelog.png" alt="" />
				<span>操作日志</span>
			</p> -->
			<view class="footer">
				<span>
					威海晶合数字矿山技术有限公司
				</span>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		stringToBytes,
		showCustomModal,
		showCustomToast,
		commonStateCodeDeal,
		popup,
		storager,
		pager,
		blueToother
	} from "../../common/util.js"
	import * as XLSX from '@/common/excel.js'
	
	import {
		getExportData,
	} from '../../api/home.js'
	
	import { BASEURL } from "../../common/config.js";
	import { mapState } from "vuex";
	console.log('mapState', mapState)

	export default {
		data() {
			return {
				deviceInfo: {},
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.hideLoading()
		},
		onShow() {
			uni.hideLoading()
		},
		mounted() {
			const deviceInfo = uni.getStorageSync('deviceInfo')
			if (deviceInfo) { // 获取蓝牙设备型号id
				this.deviceInfo = deviceInfo
			}
			uni.hideTabBar()
		},
		computed:{
			...mapState(['actualWaterLevel', 'power1', 'power2', 'qiuId', 'connected'])
		},
		methods: {
			uploadExcel(){
				
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: ['.xlsx', '.xls'],
					success: function(res) {
						console.log("文件上传", res);
						uni.uploadFile({
							url: BASEURL + '/product/importProduct', //文件上传的接口地址
							filePath: res.tempFiles[0].path,
							name: 'file', //接口需要的参数名
							header: {
								'Authorization': storager.get('token')
							},
							success(uploadRes) {
								const res = JSON.parse(uploadRes.data)
								if(res.code === 401){
									showCustomModal({
										content: res.msg,
										success: function() {
											pager.navTo("/pages/user/login")
										}
									});
									return
								}
								showCustomToast({
									title: res.msg
								})
								
								console.log(uploadRes, 'uploadRes')
							},
							fail(uploadErr) {
								console.log('上传失败', uploadErr);
								// 处理上传失败后的逻辑
							}
						});
					},
					fail(err) {
						console.log('选择文件失败', err);
						// 处理选择文件失败后的逻辑
					}
				});
			},
			async exportExcel() { // 导出excel
				let res = await getExportData({
				})
				if (res) {
					console.log('export', res)
					const ExcelData = res; //列表数据
					this.loading = false
				
					const fileName='炮孔测量数据导出'
					const header = ['productName', 'artilleryAreaName', 'cannonHoleArrayNum',
					'cannonHoleNum', 'expectedDepth','remark',
					'actualDepth', 'actualWaterLevel',
					'afterActualDepth', 'afterActualWaterLevel',
					];
					const headerName = {
						productName: '工程名称',
						artilleryAreaName: '爆区名称',
						cannonHoleArrayNum: '炮孔排号',
						cannonHoleNum: '炮孔孔号',
						expectedDepth: '设计孔深',
						actualDepth: '实测孔深',
						actualWaterLevel: '实测水深',
						afterActualDepth: '装药后孔深',
						afterActualWaterLevel: '装药后水深',
						// remark: '备注'
					};
					
					showCustomToast({
						title: "导出中，请稍后...",
						duration: 3000,
					})
					XLSX.excel_exprot(ExcelData, header, headerName, fileName)
				}else{
					showCustomToast({
						title: '暂无数据'
					})
				}
			},
			navTo(flag) {
				if (flag === 'export') {
					this.exportData2Excel()
					return
				}
				let url = ''
				if (flag === 'login') {
					// url = 'test'
					url = '/pages/user/login'
				} else if (flag === 'import') {
					url = '/pages/home/importFile'
				} else if (flag === 'measureTest') {
					url = '/pages/home/blueTest'
				} else if (flag === 'measure') {
					url = '/pages/home/blueMeasure'
				} else if (flag === 'link') {
					url = '/pages/home/blueSearch'
				} else if (flag === 'importFileDataPreview') {
					url = '/pages/home/importFileDataPreview'
				} else if (flag === 'paokongceliang') {
					url = '/pages/home/paokongceliang'
				} else if (flag === 'operateLog') {
					url = '/pages/home/operateLog'
				}

				pager.navTo(url)
			}
		}
	}
</script>
<style lang="scss">
	.wrapper {
		width: 100vw;
		height: calc(100vh-55rpx);
		padding-top: 55rpx;
		background: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
		position: relative;

		.footer {
			// position: absolute;
			// bottom: 10rpx;
			width: 100%;
			// padding-top: 200rpx;
			// height: 10rpx;
			// height: 120rpx;
			// line-height: 120rpx;
			text-align: center;

			span {
				font-weight: 400;
				font-size: 27rpx;
				color: #A0A7AE;
			}
		}
	}

	.body-wrapper {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		background-color: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
		padding-top: 50rpx;
		padding-bottom: 20rpx;
	}

	.logo-wrapper {
		position: relative;
		height: 300rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		gap: 50rpx;
		font-family: Source Han Sans SC;

		.logoImg {
			width: 454rpx;
			height: 98rpx;
		}

		h3 {
			color: #ffffff;
			font-size: 37rpx;
			font-weight: bold;
		}
	}

	.link-info-wrapper {
		position: relative;
		width: 646rpx;
		height: 440rpx;
		margin-top: -20rpx;
		// background-image: url('/static/image/paokong/home-title-bg.png');
		// background-color: linear-gradient(-90deg, #F6F9FF 31%, #E4EFFF 100%);
		// background-position: center;
		// background-size: cover;
		// box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(7, 36, 72, 0.11);
		// border-radius: 10rpx;
		// border: 2px solid #FFFFFF;
		// display: flex;
		// align-items: center;
		// gap: 47rpx;
		// padding-left: 49rpx;
		.bg{
			position: absolute;
			bottom: 0;
			left: -40rpx;
			right: 0;
			width: 728rpx;
			height: 464rpx;
			z-index: 0;
		}
		.left {
			position: absolute;
			left: 30rpx;
			top: 110rpx;
			image {
				width: 136rpx;
				height: 136rpx;
			}

			.link-status {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #007AFF;
				position: relative;
				&::before {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: -20rpx;
					content: '';
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #007AFF;
				}
			}
			.unlink{
				color: #505E6B;
				&::before {
					background: #505E6B;
				}
			}
		}

		.right {
			position: absolute;
			right: 40rpx;
			top: 18rpx;
			.top{
				image{
					width: 15rpx;
					height: 30rpx;
				}
				p{
					display: flex;
					justify-content: start;
					align-items: center;
					gap: 10rpx;
					font-size: 30rpx;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #CCD1DB;
				}
				
			}
			h2 {
				font-size: 34rpx;
				font-weight: bold;
			}

			p {
				font-size: 30rpx;
				// font-weight: bold;
				color: #848484;
				margin-top: 20rpx;
			}
		}
	}


	.list-item {
		width: 660rpx;
		height: 140rpx;
		// border-top: 1px solid rgba(187,187,187,1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 0px 30px;
		padding: 10px;
		background-color: #ffffff;
		border-radius: 10rpx;

		image {
			width: 102rpx;
			height: 102rpx;
		}

		span {
			display: inline-block;
			width: 420rpx;
			font-family: PingFangSC-regular;
			color: rgba(0, 0, 0, 1);
			font-size: 18px;
			font-weight: bold;
		}

		.funcBtn {
			width: 120rpx;
			height: 62rpx;
			line-height: 62rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #007AFF;
			color: #007AFF;
			padding: 0;
			// font-size: 27rp;
			font-family: Source Han Sans SC;
			font-weight: bold;

		}
	}
</style>