<template>
	<view class="content">
		<!-- <view class="title">天气</view> -->
		<!-- <back :info="info"></back> -->
			<view class="title">客流实时数据</view>
			<view class="kllist" v-for="(el,ind) in jqdatas">
				<view class="left">
					<view class="name">{{el.name}}</view>
					<view class="cont">
						<view class="conlist">
							<view class="conname cleft">票务实时在园</view>
							<view class="connum cleft">{{el.value}}</view>
						</view>
						<view class="conlist">
							<view class="conname cright">最大承载量</view>
							<view class="connum cright">{{el.max}}</view>
						</view>
					</view>
					<view class="ktime">
						<!-- <view class="kname">AAAAA</view> -->
						<!-- <view class="kopen">开放时间：8:30-17:00</view> -->
					</view>
				</view>
				<view class="right">
					<canvas  :canvas-id="'canvasPie'+ind" :id="'canvasPie'+ind" @touchstart="touchPie"></canvas>
				</view>
			</view>
		
		<!-- <tabBar :info="infos"></tabBar> -->
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	import tabBar from '@/components/html/tabBar.vue';
	var web = require('@/components/utils/request.js');
	var util = require('@/components/utils/util.js');
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	
	var _self;
	var canvaPie = null;
	var color = ['#00DB77', '#FF9024', '#FF4824'];
	var zcolor = ['#22A86C', '#E68320', '#E64120'];
	var canvaLineA = null;
	var canvaLineA2 = null;
	export default {
		components: {
			tabBar,back
		},
		data() {
			return {
				info:{
					color: true,
					num: false,
				},
				// infos:{
				// 	ind:0,
				// 	color:false
				// },
				jqdatas:[],
				token: ''
				
			}
		},
		onLoad() {
			var date = new Date();
			this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
			// this.getData3();
			// this.getData4();
			_self = this;
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(250);
			this.cWidth2=uni.upx2px(750);
			this.cHeight2=uni.upx2px(170);
			// this.getData1();
			// this.getyj();
			this.getToken();
		},
		onPageScroll(e) {
			if(e.scrollTop>50&&!this.info.num){
				this.info.num=true;
			}
			if(e.scrollTop<50&&this.info.num){
				this.info.num=false;
			}
		},
		methods: {
			getToken(){
				var url = 'https://cs.tour-ma.com/tours/commonMethod.jspx'
				var para = {
					type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon'
				};
				// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
				// var para = {};
				var that = this;
				web.httpPostxin(that, url, para, function(res) {
					// console.log(res.data.obj);
					that.token=res.data.obj;
					if(res.data.success==false){
						that.sxToken();
					}else{
						that.getdata();
					}
				});
			},
			sxToken(){
				var url = 'https://cs.tour-ma.com/tours/commonMethod.jspx'
				var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token};
				var that = this;
				web.httpPostxin(that, url, para, function(res) {
					that.token=res.data.obj;
					that.getdata();
				});
			},
			getdata(){
				uni.showToast({
					title: '加载中...',
					icon:'loading',
				});
				var url = 'https://cs.tour-ma.com/tours/commonMethod.jspx';
				var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{
					"code": "020201_all",
					"params": {},
					"page": 0,
					"size": 0,	
					"result": {},
					"orders": []		
				}};
				var that = this;
				web.httpPostxin(that, url, para, function(res) {
					if (res.data.success) {
						uni.hideToast();
						var datasAll = res.data.obj.jq_list;
						var dataspw = res.data.obj.jq_pw_ss;
						var datas = [];
						datasAll.map(item=>{
							dataspw.map(item1=>{
								if(item.glzd == item1.code) {
									datas.push({
										name: item.name,
										value: item1.count,
										max: item.sumNum,
										zb: 0
									});
								}
							})
						})
						datas.map(item=>{
							if(item.value < 0) {
								item.value = 0
							}
							item.zb = item.value/item.max
						})
						if(datas.length>0){
							that.jqdatas = datas ;
							for(var i = 0;i<that.jqdatas.length;i++) {
								if(that.jqdatas[i].zb < 40){
									var data = {
										series: [{
											name: '舒适',
											data:that.jqdatas[i].zb
										}]
									}
								}else if(that.jqdatas[i].zb > 80) {
									var data = {
										series: [{
											name: '拥挤',
											data:that.jqdatas[i].zb
										}]
									}
								}else{
									var data = {
										series: [{
											name: '适中',
											data:that.jqdatas[i].zb
										}]
									}
								}
								that.showPie('canvasPie'+i, data);
							}
						} else {
							uni.showToast({
								title: '查询失败'
							});
						}
					}else {
						uni.showToast({
							title: '加载中...',
							icon:'loading',
							duration:20000
						});
					}
				});
			},
			getyj(){
				var data = [
					{name:'尚湖风景区',value:'1550',max:10000,zb:1550/10000},
					{name:'虞山公园',value:'799',max:10000,zb:799/10000},
					{name:'虞山剑门景区',value:'512',max:10000,zb:512/10000},
					{name:'方塔园',value:'283',max:10000,zb:283/10000},
					{name:'兴福寺',value:'57',max:10000,zb:57/10000},
				]
				var that = this
				if(data.length>0){
				that.jqdatas = data ;
					for(var i = 0;i<that.jqdatas.length;i++) {
						var data = {
							series: [{
								name: '舒适',
								data:that.jqdatas[i].zb
							}]
						}
						that.showPie('canvasPie'+i, data);
					}
				} else {
					uni.showToast({
						title: '查询失败'
					});
				}
				
			},
			getData1() { //获取景点动态
				var url = '/toursData/getToursAnalysis.jspx';
				var para = {};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						var tmp = [];
						for (var i = 0; i < res.data.data.scenic.length; i++) {
							tmp.push({
								name: res.data.data.scenic[i].name,
								value: res.data.data.scenic[i].value,
								max: 10000,
								zb: res.data.data.scenic[i].value/10000
							})
						}
						that.jqdatas = tmp;
						for(var i = 0;i<that.jqdatas.length;i++) {
							var data = {
								series: [{
									name: '舒适',
									data:that.jqdatas[i].zb
								}]
							}
							that.showPie('canvasPie'+i, data);
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				});
			},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					padding:[20,25,4,5],
					legend: { show: false },
					dataLabel:true,
					dataPointShape: true,
					background: '#F6F6F6',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					// x轴显示的内容
					xAxis: {
						type: 'grid',
						disableGrid:true,
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount:6,//x轴单屏显示数据的数量，默认为5个
						scrollShow:true,//新增是否显示滚动条，默认false
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						scrollColor:'#DEE7F7',//默认为 #A6A6A6
					},
					// y轴显示的内容
					yAxis: {
						gridType: 'dash',
						disableGrid:true,
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: val => {
							return val.toFixed(0) + '℃';
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			showLineA2(canvasId, chartData) {
				canvaLineA2 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					padding:[20,35,0,0],
					legend: { show: false },
					dataLabel:true,
					dataPointShape: true,
					background: '#F6F6F6',
					pixelRatio: _self.pixelRatio2,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					// x轴显示的内容
					xAxis: {
						disabled:true,
						disableGrid:true,
					},
					// y轴显示的内容
					yAxis: {
						disableGrid:true,
						disabled:true,
					},
					width: _self.cWidth2 * _self.pixelRatio2,
					height: _self.cHeight2 * _self.pixelRatio2,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			// 点击图表显示的内容
			touchLineA(e) {
				canvaLineA.scrollStart(e);
				// 使用声明的变量canvaLineA
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineA2(e) {
				// 使用声明的变量canvaLineA
				canvaLineA2.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
			},
			showPie(canvasId, chartData) {
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: chartData.series,
					colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[1]] : [color[2]],
					animation: true,
					width: 120,
					height: 120,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了，您可以直接给任意字符串
						color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[1] : color[2],
						fontSize: 18,
						offsetY: -2
					},
					subtitle: {
						name: chartData.series[0].name, //这里您可以直接给任意字符串
						color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[1] : zcolor[2],
						fontSize: 15,
						offsetY: 2
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: 10, //圆弧的宽度
							startAngle: 1.5, //整圆类型只需配置起始角度即可
							backgroundColor: '#EFF3F7'
						}
					}
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	$twidth:702upx;
	$klwidth:622upx;
	$klheight:220upx;
	$right:200upx;
	$rheight:210upx;
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F6F6F6;
		padding-bottom: 100upx;
		overflow-x: hidden;
		// margin-bottom: 60rpx;
	}
	.kllist {
		width: $klwidth;
		height: $klheight;
		background: #FFFFFF;
		border-radius: 20upx;
		display: flex;
		justify-content: space-between;
		padding: 40upx;
		margin: 0upx 0upx 26upx 0upx;
	
		.left {
			width: 400upx;
	
			.name {
				font-size: 36upx;
				font-family: Microsoft YaHei;
				font-weight: 600;
				color: #333333;
			}
	
			.cont {
				width: 350upx;
				margin-top: 36upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80upx;
	
				.conlist:first-child {
					border-right: 1upx solid #E3E3E3;
				}
	
				.conlist {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
	
					.conname {
						width: 100%;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #999999;
					}
	
					.cleft {
						text-align: left;
					}
	
					.cright {
						text-align: right;
					}
	
					.connum {
						width: 100%;
						font-size: 46upx;
						font-family: DIN;
						font-weight: bold;
						color: #666666;
					}
				}
			}
	
			.ktime {
				margin-top: 34upx;
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 34upx;
				align-items: center;
	
				.kname {
					width: 106upx;
					height: 34upx;
					background: #FFFDFA;
					border: 1upx solid #F5E6D0;
					border-radius: 4upx;
					color: #CCA37A;
					font-size: 24upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
	
				.kopen {
					width: 320upx;
					height: 34upx;
					background: #FFFDFA;
					border: 1upx solid #F5E6D0;
					border-radius: 4upx;
					color: #CCA37A;
					font-size: 24upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	
		.right {
			width: $right;
			height: $rheight;
		}
	}
	
	.title {
		font-size: 50upx;
		font-family: Microsoft YaHei;
		font-weight: 600;
		color: #230F00;
		line-height: 56upx;
		width: $twidth;
		margin-top: 60upx;
		margin-bottom: 50upx;
	}
	
</style>
