<template>
	<view class="content">
		<view class='toppic'>
			<image src="../../static/toppic.png" mode=""></image>
			<view class="topinfo flexone">
				<view class="topinfoimg">
					<image :src="avatar" mode=""></image>
				</view>
				<view class="peoplename">{{nickname}}</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 app from "../../App.vue";
	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,
				userName: '',
				avatarUrl: '',
				courseid: '',
				max:'',
				min:'',
				number:'',
				avatar:'',
				nickname:''
			}
		},
		onLoad(options) {
			this.courseid = options.id
			_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;
				this.getServerData()
			},
			getServerData() {
				let that = this;
				var url = '/api/clock/score';
				var params = {
					course_id: that.courseid,
					type: that.sel

				}
				app.post(url, params).then((res) => {
					console.log(res);
					
					this.avatar=res.avatar;
					this.nickname=res.nickname;

					let LineA = {
						categories: [],
						series: []
					};
					
					var data=[];
					res.data.forEach(function(value,index,array){
						data.push(value)
					})
					var time=
// ["2020-03-23", "2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28"]
					 // var datak=[{name: "完成事件打分", data: [6,8,9]},{name: "情绪状态打分", data: [4,5,6]},{name: "优异度", data: [1,310]}];
					that.max=Number(res.max)+2;
					that.min=Number(res.min)-2;
					console.log(that.max);
					console.log(that.min)
					 that.number=(Number(that.max)-Number(that.min))/2;
					LineA.categories=res.time;
					// LineA.categories=time;
					LineA.series = res.data;
					console.log(LineA);
					_self.textarea = JSON.stringify(LineA);
					_self.showLineA("canvasLineA", LineA);
					

				}).catch((err) => {

				})

			},

			
			
			// getServerData() {
			// 	uni.request({
			// 		url: 'https://www.ucharts.cn/data.json',
			// 		data: {},
			// 		success: function(res) {
			// 			console.log(res.data)
			// 			console.log(res.data.data)
			// 			let LineA = {
			// 				categories: [],
			// 				series: []
			// 			};

						
			// 			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			// 			console.log(res.data.data.LineA)
			// 			LineA.categories = res.data.data.LineA.categories;
			// 			LineA.series = res.data.data.LineA.series;
			// 			console.log('87765',LineA)
			// 			_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: this.number,
						min: this.min,
						max: this.max,
						// splitNumber: 8,
						// min: 0,
						// 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) {
				console.log(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'
					})
				}
			}
		},
		onshow() {
			this.userName = uni.getStorageSync('nickName');
			this.avatarUrl = uni.getStorageSync('avatarUrl');
		}
	}
</script>



<style lang="scss">
	page {
		background: #f9f9f9;
	}
	.qiun-columns{
		width:750rpx;
	}
	.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;
		border-radius: 50%;
	}
	.topinfoimg image{
		border-radius: 50%;
	}
	.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>