<template>
	<view class="pageWrapper">
		<CustomNavbar :title="navBarTitle" goBackUrl="/pages/home/home" @gobackDeal="gobackDeal">
		</CustomNavbar>
		<!-- <text id="v5" class="devices_summary">{{ deviceadd }}</text> -->
		<!-- test使用 start -->
		<!-- <view class="layout_horizontal" id="v1">
			<button class="button_sp" hover-class="button_sp2" style="flex: 1" @tap="goclear">清屏</button>
			<button class="button_sp" style="flex: 1">{{ connectState }}</button>
			<button class="button_sp" hover-class="button_sp2" style="flex: 1" @tap="gotoback">返回</button>
		</view>

		<view class="layout_horizontal" id="v2">
			<button class="button_sp" hover-class="button_sp2" style="flex: 1"
				@tap="godisconnect">{{ reconnect }}</button>
		</view>
		<scroll-view class="container" :style="'height: 300px'" :scroll-y="true">
			<view style="display: flex">
				<view class="note_itemtext">{{ recdata }}</view>
			</view>
		</scroll-view> -->
		<!-- test使用 end -->

		<view class="body-wrapper">
			<view class="logo-wrapper">
				<image src="/static/image/home/product.png" alt="" />
			</view>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title ">
					<view>实测孔深</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content">
						{{form['realTestHoleDepth'] || '-'}}
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>实测倾角</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content angle">
						<view>{{form['realTestInclination'] || '-'}}</view>
					</view>
				</uni-col>
			</uni-row>

			<!-- <uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>实测时间</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content unaffix">
						<view>{{form['realTestTime'] || '-'}}</view>
					</view>
				</uni-col>
			</uni-row> -->
		</view>
<!-- 		<uni-row class="demo-uni-row mb-10">
			<uni-col :span="6" class="_title">
				<view class="" @tap="gosend('POWER')">
					显示电量
				</view>
			</uni-col>
			<uni-col :span="6" class="_title">
				<view class="" @tap="gosend('START')">
					开始测量
				</view>
			</uni-col>
			<uni-col :span="6">
				<view class="_title">
					<view class="" @tap="gosend('STOP')">
						结束测量
					</view>
				</view>
			</uni-col>
		</uni-row> -->
		<view class="footer-wrapper" v-show="connected">
			<view class="funcBtn" :class="{loading: btnLoading}" @tap="gosend('START')">
				{{btnLoading ? '测量中':'开始测量'}}
			</view>
			<view class="funcBtn end" @tap="gosend('STOP')">
				结束测量
			</view>
		
		</view>
		
		<view class="" v-show="!connected" style="text-align: center; color: darkgray; margin-top:20rpx;">
			{{ pageLoadText }}
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/component/CustomNavbar.vue';
	import { blueToothMixin } from '../../common/mixin.js'
	export default {
		mixins: [blueToothMixin],
		components: {
			CustomNavbar,
		},
		data() {
			return {
				navBarTitle: '中深孔验收仪设备通讯测试',
				redirectUrl: '/pages/home/blueSearch?refer=blueTest',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.hideLoading()
			this.initLink()
		},
		methods: {
		
		}
	};
</script>

<style lang="scss">
	.pageWrapper {
		width: 100vw;
		height: calc(100vh-44rpx);
		padding-top: 44rpx;
		background: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
	}

	.body-wrapper {
		margin: 0 auto;
		width: 690rpx;
		height: 70vh;
		padding-top: 20rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.logo-wrapper{
		display: flex;
		justify-content: center;
		image{
			width: 366rpx;
			height: 432rpx;
			margin: 0 auto;
		}
	}

	.mb-10 {
		margin-bottom: 10rpx;
	}

	._title {
		// border: 1px solid lightgray;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		margin-right: 10rpx;
		font-size: 29rpx;
		color: #000000;
		font-weight: bold;
	}

	._content {
		// border: 1px solid lightgray;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
		// position: relative;

		&:after {
			content: 'm';
			width: 70rpx;
			height: 70rpx;
			// border-left: 1px solid lightgray;
			position: absolute;
			right: 0;
			top: 0;
			text-align: center;
			line-height: 70rpx;
			font-size: 29rpx;
			color: #000000;
		}
	}
	
	.funcBtn{
		width: 280rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #007AFF;
		border-radius: 35rpx;
		text-align: center;
		font-size: 29rpx;
		color: #FFFFFF;
		border: 2px solid #007AFF;
		
		&.end{
			background: #FFFFFF;;
			color: #007AFF;
		}
		&.loading{
			opacity: 0.5;
		}
	}
	.footer-wrapper{
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}
	

	.angle {
		&:after {
			content: '°';
		}
	}

	.unaffix {
		&:after {
			display: none;
		}
	}

	/**
 * 蓝牙连接互动相关
 */
	page {
		color: #333;
	}

	.button_sp {
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 5px;
		background-color: #10b7ff;
		color: #fff;
		font-size: 15px;
	}

	.button_sp2 {
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 5px;
		background-color: #757575;
		color: #fff;
	}

	.flex-wrp {
		height: auto;
		display: flex;
		background-color: #ffffff;
	}

	.flex-wrp2 {
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 8px;
		font-size: 12px;
	}

	/*横向布局  */
	.layout_horizontal {
		display: flex;
		/*row 横向  column 列表  */
		flex-direction: row;
	}

	/*纵向布局  */
	.layout_vertical {
		height: 100rpx;
		display: flex;
		/*row 横向  column 列表  */
		flex-direction: column;
	}

	/*划线  */
	.line {
		background-color: blue;
		height: 5px;
		width: 100%;
	}

	.div {
		background-color: white;
		height: 10px;
		width: 10px;
	}



	.flex-view-item {
		color: #eee;
		margin-left: 5px;
		margin-top: 1px;
		margin-bottom: 1px;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		background-color: #fff;
		background-size: cover;
		width: 98%;
		margin-left: 0.7%;
		justify-content: center;
		border-radius: 3px;
		border: 1px solid #111;
		white-space: normal;
	}

	.txt-light {
		color: #0b0d0d;
		font-size: 13px;
		margin-left: 3px;
		white-space: pre-line;
		display: block;
		width: 100%;
	}

	.note_itemtext {
		display: -webkit-box;
		font-size: 26rpx;
		color: #000000;
		line-height: 40rpx;
		word-break: break-all;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.blank {
		height: 150rpx;
	}

	.devices_summary {
		margin-top: 5px;
		font-size: 16px;
		color: #222;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.show-btn {
		margin-top: 100rpx;
		color: #22cc22;
	}
</style>