<template>
	<view class="container">
		<view class="bgmbox">
			<!-- 头部背景图 -->
			<view class="headerImg">
				<image src="../../static/images/header.png" mode="aspectFit"></image>
			</view>
			<!-- 班级汇总选择切换 -->
			<picker class="classpicker" @change="bindPickerChange" :value="index" :range="array">
				<view class="selectClass" @click="selectReport">
					<view>{{array[index]}}</view>
					<image src="../../static/images/Triangle.png" mode="aspectFit"></image>
				</view>
			</picker>
			<!-- 日期展示 -->
			<view class="huizong">
				<image src="../../static/images/message_1.png" mode="aspectFit"></image>
				<view class="huizongTime">4月1日-4月7日</view>
			</view>

			<!-- 列表数据 -->
			<view class="dataBox">
				<view class="listitem" v-for="(item,index) in [1,2,3]" :key="index">
					<view class="labelbox">
						<image src="../../static/images/Group.png" mode="aspectFit"></image>
						<view class="labeltext">{{['每周要点','每周消费趋势','每周消费偏好区域'][index]}}</view>
						<image @click="doubtTips" style="width: 32rpx;height: 32rpx;" v-if="index==2"
							src="../../static/images/wenhao.png" mode="aspectFit"></image>
					</view>
					<!-- 展示内容区 -->
					<view class="content">
						<view class="content1" v-if="index==0">
							<view>
								本周班级人均消费金额低于/高于/等于本周年级人均消费金额；
							</view>
							<view>
								本周总共消费{xxx}元，相比上周增加/减少{xxx}元/持平；
							</view>
							<view>
								本周有{xxx}人、总计{xxx}次未就餐
							</view>
						</view>
						<view class="content2" v-if="index==1">
							<!-- 折线图 -->
							<view ref="zhexian" id="zhexian" style="width: 100%;height: 600rpx;">
							</view>
						</view>
						<view class="content3" v-if="index==2">
							<!-- 饼状图 -->
							<view ref="mychars" id="mychars" style="width: 100%;height: 500rpx;">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 就餐情况表格 -->
		<view class="bgmbox2">
			AZSd
		</view>

	</view>
</template>

<script>
	var option;
	let myChartzhexian, myChart;

	var gHost = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://fpdev.xiaopay.net";
	}
	export default {
		name: "ClsWeekReport",
		data() {
			return {
				title: 'picker',
				array: ['101班周消费报告', '102班周消费报告', '103班周消费报告', '104班周消费报告'],
				index: 0,
				time: '12:01',
				token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJwZW5nemhpbG9uZyIsImNvcnBJZCI6Ind3NGY1ZjRkMzgwYjYwYjMzNCIsInNjaG9vbElkIjoxLCJ1c2VyVHlwZSI6MSwiZXhwIjoxNzA1NzI3MDI3LCJpc3MiOiJhZG1pbiIsIm5iZiI6MTYxOTMyNjAyN30.fCjz_vrol6T1jdsZedLyyBRbrqdngW2JrBw--G0t0Eg',
				weekid: -1,
			}
		},
		onLoad() {

		},
		created: function() {
			// console.log(this.$echarts);
		},
		methods: {
			// 点击问好提示
			async doubtTips() {
				uni.showModal({
					title: "系统提示",
					showCancel: false,
					content: "统计周期为上周一至上周五",
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			// 切换班级选择汇总
			async selectReport() {
				console.log(111);
			},
			// 微信JS-SDK鉴权
			async js_sdk_init() {
				wx.config({
					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: '', // 必填，公众号的唯一标识
					timestamp: '', // 必填，生成签名的时间戳
					nonceStr: '', // 必填，生成签名的随机串
					signature: '', // 必填，签名
					jsApiList: [] // 必填，需要使用的JS接口列表
				});
				wx.ready(function() {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				});
				wx.error(function(res) {
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					uni.showToast({
						icon: "none",
						title: JSON.stringify(res)
					})
				});
			},
			// 二维码加密内容转tokenqrcode2Token
			async  tokenqrcode2Token(){
				    
			}
		},
		mounted: function() {
			let this_ = this;

			$.ajax({
				url: gHost + '/qyapp/qrcode2Token',
				type: "POST",
				timeout: 8000,
				contentType: "application/x-www-form-urlencoded",
				data: {
					hex: "sdfSDfsdfSAdfdfsdfasd"
				},
				success: function(res) {

				},
				error: function() {

				}
			})

			// return
			option = {
				//设置主副标题
				title: {
					show: true,
					text: "企业数量", //主标题
					left: "auto",
					top: "40%",
					z: 0,
					zlevel: 100,
					textStyle: { //设置主标题的 样式
						textAlign: "center",
						color: '#29B38E',
						fontSize: 14
					}
				},
				grid: {
					show: false,
					containLabel: false,
				},
				tooltip: {
					show: false,
					triggerOn: 'none',
					trigger: 'item',
					appendToBody: true
				},
				legend: {
					top: '30%',
					right: '10',
					orient: 'vertical',
					formatter: function(name) {
						console.log(name);
						return 'Legend ' + name;
					},
					textStyle: {
						fontWeight: 'bold'
					},
					itemWidth: 8, // 图例图形宽度
					itemHeight: 8, // 图例图形高度
					// icon: 'image:// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAABe0lEQVQoU32SPyxkURTGv+8+TGRCYgtRKAjFPJ1K1IoVCSpUWjqRjcgmmomWmYhClJstCM2uGRESFUIUFBJs/C02CqIxJoY38+4nb5IR2Z2Z053z/fLLybmXCEpiJBkfITkiqA1iisSWZzF93f/tKkBaf8+20dClVR0ceiT++qby6KpnLBXkDCTu+twyoKG89FMJSAHs9n2FHaOW/3LS82xm47Z/6p6RRGyU5OK/UKEX8GChaSPkijLk85/MwQrdROwYZHspUTC3wgKhk1LMm6PN4DYvBKrLiQT9grBVivF9/5CRRPyeRH15EZYg7ZRichXapZuM/wQwXOZGVlZREg/FGB+S/5pbYctavLXS4IhAbTFQ5A9JO5SqiuUWOr3om9hjEEaSM52kswSh6eO1JEvDxfO78Hhzw+OXkKnuglRTyINNCJxdHKf3EY3avCj/4TbmQ47NfjWAC5gUlN0+7528/NhidcBpDnc0Vni2TiHj2XTu7mbw+1MhfwfutKIPjPKX9gAAAABJRU5ErkJggg=='
					data: [{
							name: '食堂',
							// 强制设置图形为圆。
							icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAh0lEQVQoU2NkYGBg0Njaq8bwl7GdgZHBBcRn+M+wh4H5f+UN7+JbjCBJxn8MJxgYGAXBknDw//1/JgYLRo1NfWsZGRmCGBj+b/jxjzkDJM/B9HcGAwNjwP//DOsYNTb3fWRkYOD78Y9J4r5/wUuQAsWNE8Q5mP69+M/A8IkIBQStIORIQt4EAOTOTgf3b2UWAAAAAElFTkSuQmCC',
							// 设置文本为红色
							textStyle: {
								itemStyle: {
									// color: "#aa0000"
								}
							}
						},
						{
							name: '超市',
							// 强制设置图形为圆。
							icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAhUlEQVQoU2NkYGBgCHz9RI35P0M7A+N/FxCf4T/jnr+MDJXrRWVuMYIlGRhOMDAwCIIlEeD9XwYGC8aQV0/WMjAyBP1nZNzw+y9LBkielfnPDMb//wMY/jOsYwx5/fgjAwMj369/rBKbxMVfghT4vXwpzsb0+wUDw/9PRCggZAVBRxLyJgBtFlJZuXamlAAAAABJRU5ErkJggg==',
							// 设置文本为红色
							textStyle: {
								itemStyle: {
									itemStyle: {
										// color: "#4fb331"
									}
								}

							}
						},
						{
							name: '其它',
							// 强制设置图形为圆。
							icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAe0lEQVQoU4WPvQnCUACEv3u1BKy0VnAGB3AAcYqs4ARZIUskOEAGcAbBpNVK8rB+Fx42du+64477EcDT8RCgMZwyFwwJrntVD2VRcAfWWfzDx3DU5NgZLoKbCfUvIbWGs6DX6DgDFYTtTqt3Noz+biC9gFg2FCuKI0s3F9F1Rmtx2vOzAAAAAElFTkSuQmCC',
							// 设置文本为红色
							textStyle: {
								itemStyle: {
									// color: "#4fb331"
								}
							}
						}
					]
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					// 设置成相对的百分比
					center: ['30%', '45%'],
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					legendHoverLink: false, //移入leged不显示在中间
					textAlign: "center",
					label: {
						show: false,
						fontSize: '15',
						fontWeight: 'bold',
						formatter: '{b}: {@name}',
						position: 'center',
						color: '#29B38E',
						itemStyle: {

						}
					},
					emphasis: {
						itemStyle: {},
						label: {
							show: false,
							fontSize: '15',
							fontWeight: 'bold'
						}
					},
					select: {
						label: {
							show: true
						},
						labelLine: {},
						itemStyle: {
							color: '#29B38E'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: 1048,
							name: '食堂',
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						},
						{
							value: 735,
							name: '超市',
							itemStyle: {
								normal: {
									color: "#54EBE4"
								}
							}
						},
						{
							value: 580,
							name: '其它',
							itemStyle: {
								normal: {
									color: "#DEFFF2"
								}
							}
						}
					]
				}]
			};
			let option2 = {
				//设置主副标题
				title: {
					show: true,
					text: "企业数量", //主标题
					subtext: "sadf", //副标题：企业数量值，此处用标题方式来显示
					left: "center",
					top: "40%",
					z: 0,
					zlevel: 100,
					textStyle: { //设置主标题的 样式
						textAlign: "center",
						color: "rgba(145,213,255,0.85)",
						fontSize: 14
					},
					subtextStyle: { //设置副标题的样式
						textAlign: "center",
						color: "#fff",
						fontSize: 30,
						fontWeight: 600
					}
				},

				tooltip: {
					show: false, //需要关闭默认的鼠标悬浮显示样式
				},
				//图例
				legend: {
					show: false
				},
				//设置图表撑满整个画布
				grid: {
					left: "0%",
					right: "0%",
					bottom: "0%",
					containLabel: true
				},

				series: [{
					name: "企业数量",
					type: "pie",
					//自定义颜色
					color: "#54EBE4",
					radius: ["60%", "90%"], //饼图大小
					avoidLabelOverlap: false,
					legendHoverLink: false, //移入leged不显示在中间
					textAlign: "center",

					label: {
						normal: {
							show: true,
							position: "center", //文字显示在中间
							align: "center",
							verticalAlign: "middle",
							textStyle: {
								//设置文字样式
								fontSize: "0"
							}
						},
						emphasis: {
							show: true, //文字至于中间时，这里需为true
							textStyle: {
								//设置文字样式
								fontSize: "14",
								color: "rgba(145,213,255,0.85)"
							},
							formatter: function({
								data
							}) {
								//此处重点，其中定义的 b,c,d 是用于下面的 rich来单独设置样式，因为这里不支持 HTML标签
								let html =
									`{b| ${data.name}} \n {c|${data.value}}  {d|${data.percent}}`;
								return html;
							},
							//样式设置
							rich: {
								b: {
									//name 文字样式
									lineHeight: 20,
									fontSize: 14,
									textAlign: "center",
									color: "rgba(145,213,255,0.85)"
								},
								c: {
									//value 文字样式
									lineHeight: 36,
									color: "#fff",
									fontSize: 30,
									fontWeight: 600
								},
								d: {
									//百分比样式
									fontSize: 12,
									color: "rgba(145,213,255,0.85)"
								}
							}
						}
					},
					itemStyle: {
						borderWidth: 2,
						borderColor: "#2E3E62"
					},
					labelLine: {
						show: false
					},
					data: [{
						name: "sd",
						value: "value",
						percent: "244"
					}, {
						name: "sd",
						value: "value",
						percent: "244"
					}, {
						name: "sd",
						value: "value",
						percent: "244"
					}, {
						name: "sd",
						value: "value",
						percent: "244"
					}, {
						name: "sd",
						value: "value",
						percent: "244"
					}, {
						name: "sd",
						value: "value",
						percent: "244"
					}]
				}]
			};
			this.$nextTick(function() {
				let zhexianchartDom = document.getElementById('zhexian');
				console.log(zhexianchartDom);
				myChartzhexian = echarts.init(zhexianchartDom);
				myChartzhexian.setOption({
					grid: {
						left: "12%",
						containLabel: false,
					},
					legend: {

					},
					// 高亮样式。
					emphasis: {
						itemStyle: {},
						label: {
							show: false,
							// 高亮时标签的文字
							formatter: '高亮时显示的标签内容'
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: function(name) {
							console.log(name[0].data);
							return name[0].data.name + '   ' + name[0].value + '次';
						},
						textStyle: {
							fontWeight: 'bold'
						},
						axisPointer: { //坐标轴指示器，坐标轴触发有效，
							type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
							shadowStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#E4F6EF' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#34e7b5' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								},
								opacity: 0.5
							}
						}
					},
					xAxis: {
						type: 'category',
						data: ['15日', '16日', '17日', '18日', '19日', '20日', '21日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#29B38E'
								}
							}
						},
						data: [{
							name: "4/15",
							value: 820,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}, {
							name: "4/15",
							value: 932,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}, {
							name: "4/15",
							value: 901,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}, {
							name: "4/15",
							value: 934,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}, {
							name: "4/15",
							value: 500,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}, {
							name: "4/15",
							value: 820,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}, {
							name: "4/15",
							value: 900,
							itemStyle: {
								normal: {
									color: "#29B38E"
								}
							}
						}],
						type: 'line',
						smooth: true
					}],
					media: {
						minHeight: 200
					}
				});
				// console.log(this_.$jweixin);
				let chartDom = document.getElementById('mychars');
				console.log(chartDom);
				myChart = echarts.init(chartDom);
				myChart.setOption(option);
			})
			window.addEventListener('resize', () => {
				this.$nextTick(function() {
					myChartzhexian.resize()
					myChart.resize()
				})
			})
			setTimeout(function() {
				this_.js_sdk_init()
			}, 2000)
		}
	}
</script>

<style scoped>
	page {
		background: #FFFFFF;
		height: 100%;
	}

	canvas {
		display: block;
		margin: 0 auto;
		border: 1px solid red;
	}


	.container {
		padding-top: 26rpx;
		padding-bottom: 268rpx;
	}

	.container image {
		position: relative;
	}

	.headerImg {
		height: 206rpx;
	}

	.headerImg image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.selectClass {
		width: 60%;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.5);


		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.classpicker {
		position: relative;
		top: -130rpx;
	}

	.selectClass image {
		width: 40rpx;
		height: 30rpx;
		position: relative;
		top: 12rpx;
	}

	.bgmbox {
		width: 670rpx;
		/* height: 1352rpx; */
		background-image: url(../../static/images/Slice.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		box-shadow: 0rpx 12rpx 14rpx 0rpx rgba(0, 171, 207, 0.58);
		margin: 0 auto;
		padding-bottom: 50rpx;
	}

	.bgmbox2 {
		width: 670rpx;
		height: 718rpx;
		box-shadow: 0rpx 12rpx 14rpx 0rpx rgba(0, 171, 207, 0.58);
		margin: 0 auto;
	}

	.huizong {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
		margin-top: -50rpx;
	}

	.huizongTime {
		width: 204rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang-SC-Regular, PingFang-SC;
		font-weight: 400;
		color: #6F747A;
		line-height: 42rpx;
	}

	.listitem {
		margin-top: 56rpx;
	}

	.huizong image {
		width: 32rpx;
		height: 32rpx;
		padding-right: 10rpx;
	}

	.labelbox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: 24rpx;
	}

	.labelbox .labeltext {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #3D3D3D;
		line-height: 44rpx;
		margin-left: 10rpx;
	}

	.labelbox image {
		width: 36rpx;
		height: 20rpx;
	}

	.content1 {
		height: 280rpx;
	}

	.content1,
	.content2,
	.content3 {
		width: 626rpx;
		margin: 0 auto;
	}

	.content1 {
		font-size: 28rpx;
		font-family: PingFang-SC-Regular, PingFang-SC;
		font-weight: 400;
		color: #3D3D3D;
		line-height: 40rpx;

	}

	.content1 view:first-child {
		margin-top: 20rpx;
	}

	.content1 view:not(:first-child) {
		margin-top: 40rpx;
	}
</style>
