<template>
	<view class="app" v-if="current == 5">
		<view class="titletexts">
			<view class="title">
				— 正常范围 —
			</view>
			<view class="add" @click="addHeartRate">
				＋ 添加数据
			</view>
			<view class="texts">
				<view class="text">
					<view class="p">
						心率
					</view>
					<view class="ptwo">
						60—100次/分钟
					</view>
				</view>
			</view>
		</view>
		<view class="bottomlist">
			<view class="timelist">
				<!-- <uni-data-select class="item" v-model="deviceUserId" :localdata="deviceUserslist" @change="changePro"
					:clear="false">
				</uni-data-select> -->
				<view class="item" v-for="(item,index) in timelist" :class="timeindex == index?'timeitem':''"
					@tap='taptimeindex(index)'>
					{{item.name}}
				</view>
			</view>
			<view class="text">
				注：全部视图主要展示全部体温数值的趋势曲线
			</view>
			<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="datalist" />
		</view>
		<view class="bottomtexts">
			<view class="lefttext">
				<view class="pone">
					平均
				</view>
				<view class="ptwo">
					{{echartData.calc.avgVal?echartData.calc.avgVal:'暂无'}}
				</view>
			</view>
			<view class="lefttext">
				<view class="pone">
					最大
				</view>
				<view class="ptwo">
					{{echartData.calc.maxVal?echartData.calc.maxVal:'暂无'}}
				</view>
			</view>
			<view class="righttext">
				<view class="pone">
					最小
				</view>
				<view class="ptwo">
					{{echartData.calc.minVal?echartData.calc.minVal:'暂无'}}
				</view>
			</view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="pie" :opts="pie_opts" :chartData="datalisttwo" />
		</view>
		<uni-table border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center" width='150'>记录时间</uni-th>
				<uni-th align="center" width='150'>心率</uni-th>
			</uni-tr>
			<uni-tr v-for="item in tablelist">
				<uni-td width='150' align="center">{{item.measureTime}}</uni-td>
				<uni-td width='150' align="center">{{item.hr}}</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				require: true
			},
			echartData: {
				type: Object,
				require: true
			},
			tablelist: {
				type: Object,
				require: true
			}
		},
		computed: {},
		data() {
			return {
				timelist: [{
						name: '全部',
						id: 0
					},
					{
						name: '周',
						id: 1
					}, {
						name: '月',
						id: 2
					}, {
						name: '年',
						id: 3
					},
				],
				timeindex: 0,
				socketOpen: false,
				timer: null,
				datalist: null,
				datalisttwo: null,
				deviceUserId: '',
				deviceUserslist: [{
					value: '',
					text: '全部',
				}, {
					value: 1,
					text: '用户1',
				}, {
					value: 2,
					text: '用户2',
				}],
				pie_opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},
					},
				},
				line_opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataLabel: true,
					enableScroll: true,
					touchMoveLimit: 24,
					padding: [15, 10, 0, 15],
					xAxis: {
						lineHeight: 40,
						disableGrid: true,
						boundaryGap: "center",
						fontSize: 10,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
			}
		},
		created() {},
		mounted() {
			// if (this.current == 5) {
			// 	this.scoket()
			// }
			this.getServerData()
		},
		destroyed() {
			clearInterval(this.timer);
			// if (this.socketOpen == true) {
			// 	uni.closeSocket();
			// }
		},
		watch: {
			echartData: {
				handler() {
					this.getServerData()
				},
				deep: true
			},
			current(newValue, oldValue) {
				if (newValue != 5) {
					clearInterval(this.timer);
					if (this.socketOpen == true) {
						// uni.closeSocket();
					}
				} else {
					setTimeout(() => {
						// this.scoket()
					}, 800)
				}
			}
		},
		methods: {
			changePro(e) {
				this.$emit('tapdeviceUser', e);
			},
			taptimeindex(index) {
				this.timeindex = index
				this.$emit('taptimeindex', index);
			},
			addHeartRate() {
				uni.navigateTo({
					url: "/pagesC/addHeartRate/addHeartRate"
				})
			},
			getServerData() {
				if (this.echartData) {
					setTimeout(() => {
						let res = {
							categories: [],
							series: [{
								name: "血氧",
								data: []
							}]
						};
						res.series[0].data = this.echartData.list.map(e => e.hr)
						res.categories = this.echartData.list.map(e => e.measureTime)
						this.datalist = res
						let restwo = {
							series: [{
								data: [{
									"name": "正常" + this.echartData.calc.normalNum + "次",
									"value": this.echartData.calc.normalNum
								}, {
									"name": "超标" + this.echartData.calc.overNum + "次",
									"value": this.echartData.calc.overNum
								}]
							}]
						};
						this.datalisttwo = restwo
					}, 500)
				}
			},
			scoket() {
				var SOCKETURL = 'ws://112.7.50.34:9002/webSocket/' + uni.getStorageSync('userinfo').cardNo
				const that = this
				// uni.closeSocket()
				this.socketOpen = false
				try {
					uni.connectSocket({
						url: SOCKETURL
					})
					uni.onSocketOpen(res => {
						console.log('webScoket连接已打开', res);
						that.socketOpen = true
						that.reset()
					})

					uni.onSocketError(err => {
						console.log('webScoket连接打开失败', err);
						if (err && err.code != 1000) {
							setTimeout(() => {
								that.socketOpen = true
								uni.connectSocket({
									url: SOCKETURL
								})
							}, 3 * 1000)
						}
					})

					uni.onSocketClose(err => {
						console.log('webScoket连接关闭', err);
						if (err && err.code !== 1000) {
							setTimeout(() => {
								that.socketOpen = true
								uni.connectSocket({
									url: SOCKETURL
								})
							}, 3 * 1000)
						}
					})
					uni.onSocketMessage(res => {
						console.log("webScoket监听收到的信息", res);
						// that.newsList.push({
						// 	senderName: that.currentItem.senderName,
						// 	content: JSON.parse(res.data).message
						// })
						this.$emit('websocket-message');
						this.$forceUpdate()
					})
				} catch (e) {
					console.log(e);
				}
			},
			// 心跳响应
			reset() {
				let that = this
				var SOCKETURL = 'ws://112.7.50.34:9002/webSocket/' + uni.getStorageSync('userinfo').cardNo
				clearInterval(that.timer);
				that.timer = setInterval(() => {
					uni.sendSocketMessage({
						data: 'ping',
						success(res) {
							console.log('正在发送心跳');
						},
						fail(err) {
							console.log('心跳发送失败，重新连接...');
							_socketOpen = true
							uni.connectSocket({
								url: SOCKETURL
							})
						}
					})
				}, 60000)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F5F5;
	}

	::v-deep .uni-select {
		border: none !important;
	}

	.app {
		width: 96%;
		margin: 0 auto;
		padding-bottom: 20rpx;

		/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
		.charts-box {
			width: 100%;
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.bottomtexts {
			width: 100%;
			display: flex;
			background-color: #fff;
			padding: 20rpx 0 40rpx;

			.lefttext,
			.righttext {
				width: 50%;
				text-align: center;
			}
		}

		.bottomlist {
			width: 100%;
			background-color: #fff;
			margin-top: 17rpx;

			.text {
				width: 90%;
				margin: 20rpx auto 30rpx;
				font-size: 18rpx;
				font-weight: 400;
				color: #595959;
			}

			.timelist {
				width: 90%;
				margin: 0 auto;
				display: flex;
				padding-top: 25rpx;

				.item {
					width: 25%;
					// height: 56rpx;
					border-radius: 5rpx 0rpx 0rpx 5rpx;
					text-align: center;
					line-height: 56rpx;
					background: #FFFFFF;
					border: 2rpx solid #26A888;
					border-radius: 0rpx 5rpx 5rpx 0rpx;
					color: #26A888;
				}

				.timeitem {
					background: #26A888;
					color: #fff;
				}
			}
		}


		.titletexts {
			width: 100%;
			height: 250rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			position: relative;

			.texts {
				width: 100%;
				display: flex;
				position: absolute;
				top: 130rpx;

				.text {
					width: 100%;

					.p {
						text-align: center;
						font-size: 24rpx;
						font-weight: 500;
						color: #000000;
					}

					.ptwo {
						font-size: 30rpx;
						font-weight: 500;
						color: #26A888;
						text-align: center;
						margin-top: 20rpx;
					}
				}
			}

			.add {
				width: 205rpx;
				height: 64rpx;
				background: #26A888;
				border-radius: 32rpx 0rpx 0rpx 32rpx;
				line-height: 64rpx;
				text-align: center;
				position: absolute;
				right: 0%;
				color: #fff;
				top: 25rpx;
			}

			.title {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #26A888;
				width: 100%;
				position: absolute;
				top: 46rpx;
			}
		}
	}
</style>