<template>
	<view class="content">
		<view class='toppic'>
			<image src="../../static/toppic.png" mode=""></image>
			<view class="topinfo flexone">
				<view class="topinfoimg">
					<image src="../../static/header.png" mode=""></image>
				</view>
				<view class="peoplename">两只老虎</view>
			</view>
		</view>
		<view class="circlebox">
			<view class="nav flextwo">
				<view class="navitem" :class="sel==1?'navactive':''" @click="selitem" :data-id="1">本周</view>
				<view class="navitem" :class="sel==2?'navactive':''" @click="selitem" :data-id="2">本月</view>
				<view class="navitem" :class="sel==3?'navactive':''" @click="selitem" :data-id="3">三个月</view>
				<view class="navitem" :class="sel==4?'navactive':''" @click="selitem" :data-id="4">半年</view>
				<view class="navitem" :class="sel==5?'navactive':''" @click="selitem" :data-id="5">一年</view>
			</view>

			<view class="qiun-columns">



				<view class="qiun-charts">
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
					 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA"
					 @touchend="touchEndLineA"></canvas>
					<!--#endif-->
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!--#endif-->
				</view>
				<!--#ifdef H5 -->

				<button class="qiun-button" @tap="changeData()">更新图表</button>

				<!--#endif-->
			</view>


			<view class="atten flex">
				<view class='attenleft'>注：</view>
				<view class='attenright'>黄色代表完成事件打分，蓝色代表情绪状态打分。
 x轴代表分数，y轴代表时间。</view>
			</view>

		</view>

	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/common/checker.js';
	var _self;
	var canvaLineA = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				sel:1
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			selitem(e){
				
				this.sel=e.currentTarget.dataset.id;
			},
			getServerData() {
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						let LineA = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories = res.data.data.LineA.categories;
						LineA.series = res.data.data.LineA.series;
						_self.textarea = JSON.stringify(res.data.data.LineA);
						_self.showLineA("canvasLineA", LineA);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left'
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 10,
						max: 180,
						format: (val) => {
							 return val.toFixed(0) 
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					},
				});

			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			changeData() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaLineA.updateData({
						series: newdata.series,
						categories: newdata.categories,
						scrollPosition: 'right',
						animation: false
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			}
		}
	}
</script>



<style lang="scss">
	page {
		background: #f9f9f9;
	}
	.atten{
		color:#8C9198;
		font-size:24upx;
		padding: 32upx 28upx;
	}
		
	.nav{
		height:84upx;
		width:100%;
	}
	.navitem{
		width:138upx;
		text-align: center;
		color:#06121E;
		font-size: 28upx;
		font-weight: bold;
	}
	.navactive{
		position: relative;
		color:#EE8B27
	}
	.navactive:after{
		display:block;
		content:'';
		width:138upx;
		height:1upx;
		background:red ;
		// position: absolute;
		// bottom:0upx;
		// left:50%;
		// transform: translateX(-50%);
	}
	.circlebox{
		width:686upx;
		margin:32upx auto 0;
		background: #fff;
	}

	.topinfo {
		position: absolute;
		top: 44upx;
		left: 50upx;
	}

	.topinfoimg {
		width: 120upx;
		height: 120upx;
		font-size: 0;
	}

	.peoplename {
		color: #fff;
		font-size: 32upx;
		margin-left: 46upx;
	}

	.toppic {
		width: 686rpx;
		height: 218rpx;
		font-size: 0;
		margin: 32upx auto 0;
		position: relative;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>