<template>
	<view class="app">
		<!-- 功能开发中 -->
		<view class="top">
			<u-tabs ref="tabs" :scrollable="false" :list="tabslist" bar-height="6" bar-width="60" active-color="#fff"
				inactive-color="#A09F9F" :active-item-style="activebgk" :is-scroll="false" :current="tabscurrent"
				gutter="50" @change="tabschange"></u-tabs>
		</view>
		<!-- 健康指数 -->
		<view class="health">
			<view class="health_top">
				<view class="right">
					1
				</view>
				<image :src="require('../images/red.png')" image>
					<view class="count">
						<view class="numbers">680</view>
						<view class="healths">健康指数</view>
					</view>
			</view>
			<view class="health_body">
				<view class="healthitem">
					血压（mmHg)：收缩压/舒张压
				</view>
				<view class="healthitem">
					空腹血糖（mmol/L)：5.6
				</view>
				<view class="healthitem">
					血脂（TC/LDL-C)：5.6
				</view>
				<view class="healthitem">
					体质指数（BMI)：5.6
				</view>
				<view class="healthitem">
					腰围（cm）：5.6
				</view>
			</view>
			<!-- 折线图 -->
			<view class="zx">
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="chartData" />
			</view>
		</view>
		<!-- 疾病预警 -->
		<view class="disease">
			
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				 chartData: {},
				  opts: {
				         color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				         padding: [15,10,0,15],
				         enableScroll: false,
				         legend: {},
				         xAxis: {
				           disableGrid: true
				         },
				         yAxis: {
				           gridType: "dash",
				           dashLength: 2
				         },
				         extra: {
				           line: {
				             type: "straight",
				             width: 2,
				             activeType: "hollow"
				           }
				         }
				       },
				  //    }
					 // },
				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: 3, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				tabscurrent: 0,
				tabslist: [{
					name: '健康指数',
					orderStatus: '',
				}, {
					name: '疾病预警',
					orderStatus: 'WAIT_PAY',
				}, {
					name: '健康处方',
					orderStatus: 'WAIT_RECEIVED_GOODS',
				}],
				activebgk: {
					background: "#00B4CC"
				},
				background: {
					backgroundColor: '#26A888',
				},
					datalist: null,

			};
		},
		 onReady() {
		    this.getServerData();
		  },
		mounted() {
			// if (this.current == 0) {
			// 	this.scoket()
			// }
			// this.getServerData()
		},
		// watch: {
		// 	echartData: {
		// 		handler() {
		// 			this.getServerData()
		// 		},
		// 		deep: true
		// 	},
		// },
		methods: {
			getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories: ["2018","2019","2020","2021","2022","2023"],
			            series: [
			              {
			                name: "成交量A",
			                data: [35,8,25,37,4,20]
			              },
			              {
			                name: "成交量B",
			                data: [70,40,65,100,44,68]
			              },
			              {
			                name: "成交量C",
			                data: [100,80,95,150,112,132]
			              }
			            ]
			          };
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
			    },
			  
			getServerData1() {
				if (this.echartData) {
					setTimeout(() => {
						// let res = {
						// 	categories: [],
						// 	series: [{
						// 		name: "血糖值",
						// 		data: []
						// 	}]
						// }
						res.series[0].data = this.echartData.list.map(e => e.bg)
						res.categories = this.echartData.list.map(e => e.timename + e.measureTime)
						this.datalist = res
						// let restwo = {
						// 	series: [{
						// 		data: [{
						// 			"name": "偏低" + this.echartData.calc.lowerNum + "次",
						// 			"value": this.echartData.calc.lowerNum
						// 		}, {
						// 			"name": "正常" + this.echartData.calc.normalNum + "次",
						// 			"value": this.echartData.calc.normalNum
						// 		}, {
						// 			"name": "偏高" + this.echartData.calc.higherNum + "次",
						// 			"value": this.echartData.calc.higherNum
						// 		}]
						// 	}]
						// };
						this.datalisttwo = restwo
					}, 500)
				}
			},
			//点击tabs
			tabschange(index) {
				this.tabscurrent = index;
				// this.orderTypeList.orderStatus = this.tabslist[index].orderStatus
				// this.goodsOrderinfo();
			},

		},
		
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #fff;
		// padding: 100rpx 40rpx;
		text-align: center;
		font-size: 36rpx;

		.top {
			width: 100%;
			height: 100rpx;

			::v-deep .u-tabs {
				width: 100%;
				position: fixed;
				z-index: 999;
			}

			::v-deep .u-tabs-scroll-flex {
				background: #fff;
			}

			::v-deep .u-tabs__wrapper__nav__item {
				background: #FFFFFF;
			}
		}

		// 健康
		.health {
			width: 100%;
			margin: 0 auto;

			// background: red;
			.health_top {
				width: 100%;

				// height: 100%;
				// background: #FBDA81;
				.right {
					position: relative;
					font-size: 20rpx;
					width: 30rpx;
					height: 30rpx;
					background: red;
					top: 30rpx;
					line-height: 30rpx;
					left: 471rpx;
					// left: 288rpx;

				}

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

				.count {
					position: relative;
					top: -158rpx;

					.numbers {
						font-weight: 600;
						font-size: 25rpx;
						margin-bottom: 10rpx;
					}

					.healths {
						font-size: 22rpx;

					}
				}

			}

			.health_body {
				width: 100%;

				.healthitem {
					text-align: left;
					padding: 0 0 40rpx 62rpx;
					
					// padding-bottom: 40rpx;
					// position: relative;
					// left: -53rpx;

				}

			}
			.zx{
				width: 100%;
				    height: 300rpx;
				    // background: red;
			}

		}
		.disease{
		}
	}
</style>