<template>
	<view class="campusReport">
		<view class="info">
			<view class="left">
				<img :src="ImgUrl+'user/student.png'" alt="">
				<view class="message">
					<span class="name">{{homeDataInfo['userName'] || '安小智'}}</span>
					<span class="classInfo">{{homeDataInfo['gradeName'] + ' ' + homeDataInfo['className']}} </span>
				</view>
			</view>
			<view class="right" @click="choosePicker">
				<span>{{dataRangeArr[dataRangeIndex].month}}</span>
				<img :src="ImgUrl+'user/triangle.png'" alt="">
			</view>
			<!-- <picker @change="dateRangeChange" :value="dataRangeIndex" :range="dataRangeArr">
				<view class="uni-input">{{dataRangeArr[dataRangeIndex].month}}</view>
			</picker> -->
			<van-popup v-model="pickerShow" round position="bottom">
				<van-picker show-toolbar :columns="columns" @cancel="pickerShow = false" @confirm="confrimDate" />
			</van-popup>
		</view>

		<view class="select">
			<view class="consume">
				<span>消费报告</span>
				<i class="underline"></i>
			</view>
			<view class="share" @click="shareHandler">
				<img :src="ImgUrl+'user/share.png'" alt="">
				<span>分享</span>
			</view>
		</view>

		<view class="main">
			<view class="main1">
				<view class="head">
					<img :src="ImgUrl+'user/head.png'" alt="">
				</view>
				<!-- 消费报告 -->
				<view class="consume_report">
					<img :src="ImgUrl+'user/report.png'" alt="">
					<view class="mesg">
						<view>
							<li>本月生活费 <text class="light">
									{{campusConsumerReportInfo.consumerGrossAmountF}}</text>元，超过同年级<text
									class="light">{{campusConsumerReportInfo.gtGraderate}}%</text>的学生。
								{{campusConsumerReportInfo.reportAbnormalMessage}}
							</li>
						</view>
						<view>
							<li>食堂消费 <text
									class="light">{{campusConsumerReportInfo.canteenAmountF}}</text>元，超市和其他消费<text
									class="light"> {{campusConsumerReportInfo.otherAmountF}}
								</text>元。{{campusConsumerReportInfo.reportPreferenceMessage}}</li>
						</view>
						<view>
							<li>本月有
								<text><text class="light"> {{cateringAbnormalTypeGroupList.length}}
									</text>天</text>
								在食堂的消费出现异常，{{campusConsumerReportInfo.avgMessage}}
							</li>
						</view>
					</view>
				</view>

				<!--  遮罩层  -->
				<template v-if="false">
					<div class="Covers">
						<div class="Covers_head" @click="openAzMenber">
							<span>
								开通消费会员，查看完整消费报告
								<img :src="ImgUrl+'user/covericon.png'" alt="">
							</span>
						</div>
						<div class="Covers_body">
							<img :src="ImgUrl+'user/rep.png'" alt="">
							<div class="toOpen" @click="openAzMenber"><img :src="ImgUrl+'user/toOpen.png'" alt=""
									class="img"> </div>
						</div>
					</div>
				</template>
			</view>

			<template>
				<!-- 生活费额度 -->
				<view class="living">
					<view class="hed">
						<img :src="ImgUrl+'user/cardBg.png'" alt="">
						<span>生活费额度</span>
					</view>
					<view class="living_mesg">
						<span>孩子本月消费<text
								class="light">{{campusConsumerReportInfo.avgText}}</text>同年级中间学生的消费金额，{{campusConsumerReportInfo.avgMessage}}</span>
					</view>
					<view class="litable">
						<view class="living_table">
							<view class="living_data">
								<view class="living_school">
									<text>{{campusConsumerReportInfo.schoolAvgAmountF}}</text>
									<img :src="ImgUrl+'user/drection.png'" alt="">
								</view>
								<span>全校</span>
							</view>
							<view class="living_data">
								<view class="living_class">
									<text>{{campusConsumerReportInfo.gradeAvgAmountF}}</text>
									<img :src="ImgUrl+'user/drection.png'" alt="">
								</view>
								<span>同年级</span>
							</view>
							<view class="living_data">
								<view class="living_people">
									<text>{{campusConsumerReportInfo.consumerGrossAmountF}}</text>
									<img :src="ImgUrl+'user/drection.png'" alt="">
								</view>
								<span>本人</span>
							</view>
						</view>
					</view>
				</view>

				<!-- 就餐情况 -->
				<view class="dining">
					<view class="hed">
						<img :src="ImgUrl+'user/cardBg.png'" alt="">
						<span>未就餐情况</span>
					</view>

					<view class="dining_mesg">
						<span>本月共 <text class="dining_txt">{{cateringAbnormalTypeGroupList.length}} </text> 天就餐异常</span>
						<view class="mesg_tips">
							<text class="dining_txt"><i class="mesg_dot"></i>未就餐</text>
						</view>
					</view>
					<!-- 日历 -->
					<view class="canlendar">
						<Canlendar :currentDate="currentDate" :shareDate_="shareDate"
							:cateringAbnormalTypeGroupList="cateringAbnormalTypeGroupList" @changeToday="changeToday">
						</Canlendar>
					</view>
					<!-- 底部 -->
					<view class="dining_footer">
						<img :src="ImgUrl+'user/rectangle.png'" alt="">
						<view class="dining_date">
							{{today.date}}
						</view>
						<view class="dining_info">
							<view class="item dingbre">
								<span>早餐</span>
								<view class="dining_img" v-if="!today.zao">
									<img :src="ImgUrl+'user/eat.png'" alt="">
								</view>
								<view class="dining_icon" v-else>
									<span>缺</span>
								</view>
							</view>
							<view class="item">
								<span>中餐</span>
								<view class="dining_img" v-if="!today.wu">
									<img :src="ImgUrl+'user/eat.png'" alt="">
								</view>
								<view class="dining_icon" v-else>
									<span>缺</span>
								</view>
							</view>
							<view class="item">
								<span>晚餐</span>
								<view class="dining_img" v-if="!today.wan">
									<img :src="ImgUrl+'user/eat.png'" alt="">
								</view>
								<view class="dining_icon" v-else>
									<span>缺</span>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- 消费偏好 -->
				<view class="prefer">
					<view class="hed1">
						<img :src="ImgUrl+'user/cardBg.png'" alt="">
						<span>消费偏好</span>
					</view>
					<view class="prefer_mesg">
						<span>食堂消费占比 <text
								class="prefer_light">{{campusConsumerReportInfo.preferenceText}}</text>，{{campusConsumerReportInfo.preferenceMessage}}</span>
					</view>
					<view class="prefer_table">
						<div ref="prefers" style="width: 100%;height:325rpx;">

						</div>

					</view>
				</view>


				<!-- 未展示消费明细时 -->
				<view class="unconsume" @click="show" v-if="!isShow">
					<view class="hed1">
						<img :src="ImgUrl+'user/cardBg.png'" alt="">
						<span>消费明细</span>
					</view>
					<view class="unconsumeTip">
						<span>
							了解更多？
							<span class="unconsume_special">
								点击查看每日餐别明细
								<img :src="ImgUrl+'user/covericon.png'" alt="">
							</span>
						</span>
					</view>
				</view>

				<!-- 消费明细 -->
				<template v-if="isShow">
					<view class="consume_detail">
						<view class="hed1">
							<img :src="ImgUrl+'user/cardBg.png'" alt="">
							<span>消费明细</span>
						</view>
						<view class="consume_detail_mesg">
							<span>早餐 <text class="prefer_light">{{userDealReportListAndSumObj.zaoSumAmount || 0}}</text>
								元，午餐<text
									class="prefer_light">{{userDealReportListAndSumObj.wuSumAmount || 0}}</text>元，晚餐<text
									class="prefer_light">{{userDealReportListAndSumObj.wanSumAmount || 0}}</text>元</span>
						</view>
						<view class="detail_lists">
							<view class="listsHead"
								v-if="userDealReportListAndSumObj.list && userDealReportListAndSumObj.list.length">
								<span>日期</span>
								<span>早餐</span>
								<span>午餐</span>
								<span>晚餐</span>
								<span>其他</span>
							</view>
							<view class="listsBody">
								<ul class="listItem">
									<li class="detailItem" v-for="item in userDealReportListAndSumObj.list"
										:key="item.reportDate">
										<span>{{item.reportDate}}</span>
										<span>{{item.zaoAmount}}</span>
										<span>{{item.wuAmount}}</span>
										<span>{{item.wanAmount}}</span>
										<span>{{item.otherAmount}}</span>
									</li>
								</ul>
							</view>
						</view>
						<!-- <view class="detailTips">
							<span>
								下滑查看更多
							</span>
							<img :src="ImgUrl+'user/toRight.png'" alt="">
						</view> -->
					</view>
				</template>

				<!-- 底部部分 -->
				<view class="footer" :style="aliMini?'visibility: hidden;':''">
					<view class="footer_left">
						<view class="footer_left_top">到期后将无法查看完整报告</view>
						<view class="footer_left_bottom">有效期至<span class="special">{{vipExpiredDt}}</span>，剩余<span
								class="special">{{vipDaysRemaining}}</span>天</view>
					</view>
					<view class="footer_right" @click="openAzMenber">
						<span>延长权益</span>
					</view>
				</view>
			</template>
		</view>
		<van-dialog v-model="dialogShow" :showConfirmButton="false" close-on-click-overlay
			style="width: 90%;background: linear-gradient(225deg, #0ADD80 0%, #04B871 100%);margin: 100rpx 0 0;">
			<view class="htmlCanvasTxt">
				<view class="htmlCanvasTxt1">
					<text>长按下方图片分享</text>
				</view>
				<view class="htmlCanvasTxt2">
					<text>您可以分享给好友，或者保存到手机</text>
				</view>
			</view>
			<view class="htmlCanvasBox">
				<view class="htmlCanvas" id="htmlCanvas" ref="imgCanvas">
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	var gHost = "https://" + window.location.host;
	// var gHost1 = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://fpdev.xiaopay.net";
		// gHost1 = "https://dev-az-cloud-api.xiaopay.net/"
	}
	//获取参数
	function getQueryParams(params) {
		let href = window.location.href
		let query = href.substring(href.indexOf('?') + 1);
		let vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			let pair = vars[i].split("=");
			if (pair[0] == params) {
				return pair[1];
			}
		}
		return (false);
	}
	// import html2cancas from "html2canvas"
	import Canlendar from '@/components/canlendar.vue'
	// 时间处理模块
	import moment from 'moment'
	import {
		Dialog,
		Toast
	} from 'vant';
	import {
		requestGet,
		requestPost
	} from '../common/request.js'
	import config from '../common/config.js'
	// 判断是否支付宝小程序
	const AliAppMini = navigator.userAgent.indexOf('AliApp') > -1
	export default {
		name: 'campusReport',
		data() {
			return {
				dialogShow: false,
				shareDate: "",
				currentDate: {
					year: '',
					month: ''
				},
				// 是否为会员
				isVip: false,
				// 是否展示消费明细
				isShow: false,
				ImgUrl: this.$ImgUrl,
				pickerShow: false,
				// 日期范围列表
				dataRangeArr: [{
					month: "",
					startDate: "",
					endDate: ""
				}],
				consumerNameIndex: 0,
				dataRangeIndex: 0,
				consumerNameArr: [], // 学生姓名列表
				consumerInfo: [], //家长关联的学生信息
				specifiedConsumerInfo: {}, //选择学生的信息
				columns: [], // picker数据列表
				campusConsumerReportInfo: {}, // 校园消费报告统计信息
				cateringAbnormalTypeGroupList: [], // 用户消费未就餐信息列表
				userDealReportListAndSumObj: {
					list: []
				}, //订单流水用户分餐明细及汇总统计
				today: {
					date: "",
					zao: false,
					wu: false,
					wan: false,
				},
				homeDataInfo: {},
				vipExpiredDt: "", // 有效期
				vipDaysRemaining: 0, //有效天数
				// 支付宝小程序
				aliMini: AliAppMini
			}
		},
		components: {
			Canlendar
		},
		computed: {
			// 获取最近半年的月份
			repastDateTimeFormat() {
				return function(dataRangeArr) {
					let arr = []
					for (let i = 1; i <= 6; i++) {
						let obj = {
							month: "",
							startDate: "",
							endDate: ""
						}
						obj.month = moment().subtract(i, 'months').format('YYYY年M月'); // 6月前
						obj.startDate = moment().subtract(i, 'months').startOf('month').format('YYYY-MM-DD');
						obj.endDate = moment().subtract(i, 'months').endOf("month").format("YYYY-MM-DD");
						arr.push(obj)
					}
					return arr
				}
			}
		},
		created() {
			this.dataRangeArr = this.repastDateTimeFormat()
			this.currentDate.month = moment(this.dataRangeArr[this.dataRangeIndex].startDate).month() || 0
			this.currentDate.year = moment(this.dataRangeArr[this.dataRangeIndex].startDate).year()
			this.currentDate.date = moment(this.dataRangeArr[this.dataRangeIndex].startDate).date()
			this.shareDate = moment(this.dataRangeArr[this.dataRangeIndex].startDate).format('YYYY-MM-DD 00:00:00')
			this.today.date = (this.currentDate.month + 1) + '月1日'
			console.log(this.currentDate, 'currentDate1111111111111', this.shareDate, 'this.homeDataInfo', this
				.homeDataInfo)

		},
		mounted() {
			console.log(this.dataRangeArr, 'dataRangeArr')
			this.homeDataInfo = JSON.parse(sessionStorage.getItem('HomeDataInfo'))

			this.QueryProductContractItemDetailResp(config['ServiceEnum']['Auth2']);
			this.getCampusConsumerReport()
			if (this.homeDataInfo.vipStatus === 1) {
				this.isVip = true;
			}

			this.getCateringAbnormalTypeGroupList()
			console.log(this.isVip, 'isVip')
			this.columns = this.dataRangeArr.map(x => x.month)
			console.log(this.columns, 'columns')
		},
		methods: {
			// 查询消费会员权益项
			async QueryProductContractItemDetailResp(serviceItemCode = '1002') {
				console.log(config['ServiceEnum']['Auth2'], 'Auth2', this.homeDataInfo)
				const data = await requestPost('/cgi-xpay/app/h5/QueryProductContractItemDetail', {
					accountId: this.homeDataInfo['accountId'],
					serviceItemCode
				})
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: data['message'],
						confirmButtonText: "知道了"
					})
					return
				}
				this.vipExpiredDt = data.data.expiredDt ? (moment(data.data.expiredDt).format('YYYY年MM月DD日')) : ''
				this.vipDaysRemaining = data.data.daysRemaining || 0
				console.log(data.data, 'result')
			},
			shareHandler: function() {
				let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
				if (htmlCanvasImg) {
					htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
				}
				this.toImage();
				this.dialogShow = true;
			},
			toImage: function() {
				this.$nextTick(() => {
					html2canvas(document.getElementsByClassName("campusReport")[0], {
						useCORS: true,
						// 解决截图不完整问题
						scale: 1,
						height: document.getElementsByClassName("campusReport")[0].scrollHeight,
						windowHeight: document.getElementsByClassName("campusReport")[0].scrollHeight
					}).then((canvas) => {
						let htmlCanvas = document.getElementById('htmlCanvas');
						let url = canvas.toDataURL('image/png');
						this.imgUrl = url;
						let img = document.createElement("img");
						img.setAttribute('src', this.imgUrl);
						img.setAttribute('class', 'htmlCanvasImg');
						img.style.width = '83vw';
						img.style.borderRadius = '15px';
						htmlCanvas.appendChild(img);
					})
				})
			},
			// 切换日期
			changeToday(today) {
				this.today.date = (today.month + 1) + '月' + (today.date || '1') + '日'
				if (Reflect.has(today, 'unrecordedZao')) {
					this.today.zao = today.unrecordedZao || false
				}
				if (Reflect.has(today, 'unrecordedWu')) {
					this.today.wu = today.unrecordedWu || false
				}
				if (Reflect.has(today, 'unrecordedWan')) {
					this.today.wan = today.unrecordedWan || false
				}
			},
			dateRangeChange(e) {
				console.log(e)
			},
			async confrimDate(date) {
				console.log(date, 'date')
				const self = this;
				let obj = this.dataRangeArr.filter((x, idx) => (x.month == date) && (self.dataRangeIndex = idx))
				this.currentDate.month = moment(this.dataRangeArr[this.dataRangeIndex].startDate).month()
				this.currentDate.year = moment(this.dataRangeArr[this.dataRangeIndex].startDate).year()
				this.currentDate.date = moment(this.dataRangeArr[this.dataRangeIndex].startDate).date()
				this.shareDate = moment(this.dataRangeArr[this.dataRangeIndex].startDate).format('YYYY-MM-DD 00:00:00')
				console.log(this.currentDate, 'currentDate222222222222222', this.shareDate)
				console.log(obj, 'obj', this.dataRangeIndex)
				this.getCampusConsumerReport()
				// if (this.homeDataInfo.vipStatus === 1) {
				// 	this.initPieCharts()

				this.getCateringAbnormalTypeGroupList()
				// }
				this.pickerShow = !this.pickerShow;
				this.isShow = false;
			},
			choosePicker() {
				this.pickerShow = !this.pickerShow
			},
			consumerChange(e) {
				this.consumerNameIndex = e.target.value
				this.specifiedConsumerInfo = this.consumerInfo[this.consumerNameIndex]
				// this.queryDayConsumerTrend()
				// this.queryWeekConsumerAmout()
				// this.queryStudentConsumerPreference()
				// this.queryNotRepastDetails()
			},
			// 校园消费报告统计
			async getCampusConsumerReport() {
				const this_ = this;
				let params = {
					userId: getQueryParams('userId'), //'2882955',
					schoolId: getQueryParams('schoolId'), //'90118', 
					userType: getQueryParams('userType'),
					startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
						.dataRangeArr[this_.dataRangeIndex].startDate : "",
					endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
						this_.dataRangeIndex].endDate : "",
					timeType: 2, // 时间类型（1按周，2按月）
					statisticalMonth: moment(this_
						.dataRangeArr[this_.dataRangeIndex].startDate).format('YYYYMM'),
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
				};
				try {
					let data = await requestPost(
						`${gHost}/cgi-xpay/app/ali-app/bill/campusConsumerReport/getCampusConsumerReport`,
						params)
					if (data.code != 10000) {
						uni.showToast({
							icon: 'none',
							title: data.message || '发生异常!'
						})
						return
					}
					this.campusConsumerReportInfo = data.data;
					this.initPieCharts()
				} catch (e) {
					console.warn(e)
					//TODO handle the exception
					uni.showToast({
						icon: 'none',
						title: "发生异常错误!"
					})
				}
				return
			},
			// 用户消费未就餐信息
			async getCateringAbnormalTypeGroupList() {
				const this_ = this;
				this.cateringAbnormalTypeGroupList.length = 0;
				let params = {
					abnormalType: 1,
					cateringTypes: '1,2,3',
					userId: getQueryParams('userId'), //'4145529', //
					schoolId: getQueryParams('schoolId'), // '197', //
					userType: getQueryParams('userType'), // 1, 
					startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
						.dataRangeArr[this_.dataRangeIndex].startDate : "",
					endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
						this_.dataRangeIndex].endDate : "",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
				};
				try {
					let data = await requestPost(
						`${gHost}/cgi-xpay/app/ali-app/bill/cateringAbnormal/getCateringAbnormalTypeGroupList`,
						params)
					if (data.code != 10000) {
						uni.showToast({
							icon: 'none',
							title: data.message || '发生异常!'
						})
						return
					}
					let res = data.data;
					console.log(res, 'res')
					if (res.length) {
						res = res.map(x => {
							x.date = moment(x.statisticalDate).date();
							return x
						})
					}
					this.cateringAbnormalTypeGroupList = res;
					console.log(res, '用户消费未就餐信息')
				} catch (e) {
					console.warn(e)
					//TODO handle the exception
					uni.showToast({
						icon: 'none',
						title: "发生异常错误!"
					})
				}
				return
			},
			// 跳转云平台权益中心
			async openAzMenber() {
				jWeixin.miniProgram.navigateTo({
					url: '/pages/nationalCenterForLesbianRights/index?productId=3'
				})
			},
			// 查询订单流水用户分餐明细及汇总统计
			async getUserDealReportListAndSum() {
				const this_ = this;
				let params = {
					accountId: this.homeDataInfo.accountId,
					userId: getQueryParams('userId'), //'2882955', //getQueryParams('userId'),
					schoolId: getQueryParams('schoolId'), // '90118', //getQueryParams('schoolId'),
					userType: getQueryParams('userType'), //1,
					startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
						.dataRangeArr[this_.dataRangeIndex].startDate : "",
					endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
						this_.dataRangeIndex].endDate : "",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
				};
				try {
					let data = await requestPost(`${gHost}/cgi-xpay/app/ali-app/statement/getUserDealReportListAndSum`,
						params)
					if (data.code != 10000) {
						uni.showToast({
							icon: 'none',
							title: data.message || '发生异常!'
						})
						return
					}
					this.userDealReportListAndSumObj = data.data || {};
					console.log(this.userDealReportListAndSumObj, '查询订单流水用户分餐明细及汇总统计')
				} catch (e) {
					console.warn(e)
					//TODO handle the exception
					uni.showToast({
						icon: 'none',
						title: "发生异常错误!"
					})
				}
				return
			},
			// 获取日期范围列表
			getDataRangeArr() {
				console.log(this.dataRangeArr, 'dataRangeArr')
			},
			show() {
				this.getUserDealReportListAndSum()
				this.isShow = !this.isShow;
			},
			formatDate(date) {
				return `${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirm(date) {
				this.show = false;
				this.date = this.formatDate(date);
			},
			chooseDate() {
				this.calendarShow = true
			},
			//日历选择
			confrimCalendar(date) {

			},
			// 消费偏好
			initPieCharts() {
				let dom = this.$refs.prefers;
				let myChart = this.$echarts.init(dom);
				var colors = "";

				var option = {
					title: {
						left: 'center',
						top: 'center'
					},
					series: [{
							type: 'pie',
							data: [{
									value: this.campusConsumerReportInfo.supermarketAmountF || 0,
									name: '超市'
								},
								{
									value: this.campusConsumerReportInfo.canteenAmountF || 0,
									name: '食堂'
								},
								{
									value: this.campusConsumerReportInfo.otherAmountF || 0,
									name: '其他'
								}
							],
							radius: ['40%', '67%'],
							label: {
								show: true,
								formatter: function(params) {
									const dot1 = `{dot1|●}{v|${params.data.name}} \n{m|${params.data.value}}元`;
									const dot2 = `{dot2|●}{v|${params.data.name}} \n{m|${params.data.value}}元`;
									const dot3 = `{dot3|●}{v|${params.data.name}} \n{m|${params.data.value}}元`;
									if (params.data.name == '超市') {
										return dot1;
									}
									if (params.data.name == '食堂') {
										return dot2;
									}
									if (params.data.name == '其他') {
										return dot3;
									}

								},
								rich: {
									dot1: {
										color: '#F6C723',
										align: 'center'
									},
									dot2: {
										color: '#00C47C',
										align: 'center'
									},
									dot3: {
										color: '#FF8646',
										align: 'center'
									},
									v: {
										align: 'center',
										padding: [0, 5, 0, 5],
									},
									m: {
										align: 'center',
										padding: [0, 0, 0, 12],
									}

								},
								textStyle: {
									color: "rgba(0,0,0,0.85)",
									fontSize: 12,
									fontFamily: 'PingFangSC-Regular, PingFang SC',
									fontWeight: 400,
									lineHeight: 16,
								},
							},
							itemStyle: {
								borderRadius: 1,
								borderColor: '#fff',
								borderWidth: 2
							},
							color: ["#F6C723", "#00C47C", "#FF8646"],
							labelLine: {
								show: true,
								length: 10,
								length2: 20
							}
						},
						{
							type: 'pie',
							data: [{
									value: this.campusConsumerReportInfo.supermarketAmountF || 0,
								},
								{
									value: this.campusConsumerReportInfo.canteenAmountF || 0,
								},
								{
									value: this.campusConsumerReportInfo.otherAmountF || 0,
								}
							],
							radius: ['69%', '82%'],
							itemStyle: {
								borderRadius: 1,
								borderColor: '#fff',
								borderWidth: 2
							},
							color: ["rgba(246,199,35,0.20)", "rgba(0,196,124,0.20)", "rgba(255,134,70,0.20)"],
							labelLine: {
								show: false,

							}
						}
					]
				};
				// 绘制图表
				myChart.setOption(option);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.campusReport {
		width: 100vw;
		min-height: 100vh;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.htmlCanvasTxt {
		height: 154rpx;
		width: 100%;
		padding: 42rpx 0 20rpx 29rpx;
		box-sizing: border-box;


		.htmlCanvasTxt1 {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 44rpx;
		}

		.htmlCanvasTxt2 {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 44rpx;
		}
	}

	.htmlCanvasBox {
		overflow: scroll;
		height: 943rpx;
		border-radius: 30rpx;
		margin: 0 24rpx 25rpx;
	}

	.info {
		height: 88rpx;
		margin-top: 30rpx;
		font-family: PingFangSC-Medium;
	}

	.left {
		float: left;
		margin-left: 40rpx;
	}

	.left img {
		height: 88rpx;
		width: 88rpx;
	}

	.left .message {
		display: inline-block;
		margin-left: 9rpx;
	}

	.message .name {
		display: block;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1B1B1B;
		line-height: 48rpx;
	}

	.message .classInfo {
		display: block;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.25);
		line-height: 40rpx;

	}

	.right {
		float: right;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.right span {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1B1B1B;
		line-height: 40rpx;
	}

	.right img {
		margin-left: 16rpx;
		margin-right: 30rpx;
		width: 21rpx;
		height: 10rpx;

	}

	.select {
		display: flex;
		position: relative;
		height: 84rpx;
		margin-left: 40rpx;
		margin-top: 38rpx;
		font-size: 28rpx;
		font-weight: 700;
		text-align: center;
		line-height: 84rpx;
	}

	.select .consume {
		position: relative;
		width: 172rpx;
		height: 84rpx;
		background: #FEF1D7;
		border-radius: 20rpx 20rpx 0rpx 0rpx
	}

	.consume span {
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #7E4600;
		line-height: 28rpx;
	}

	.underline {
		position: absolute;
		height: 7rpx;
		width: 49rpx;
		background: #FBB535;
		border-radius: 4rpx;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.share {
		position: absolute;
		right: 0;
		bottom: 12rpx;
		width: 155rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #FFE4B7;
		border-radius: 32rpx 0rpx 0rpx 32rpx;
	}


	.share img {
		width: 26rpx;
		height: 24rpx;
		vertical-align: middle;
	}

	.share span {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #512C19;
		line-height: 40rpx;
		margin-left: 11rpx;
	}

	.head img {
		width: 100%;
		height: 452rpx;
	}

	.main {
		width: 100%;
		/* 	height: 4180rpx; */
		height: auto;
		background: #FFF5E2;
	}

	.main1 {
		position: relative;
		width: 100%;
		height: 967rpx;
	}

	/* 消费报告 */
	.consume_report {
		position: absolute;
		top: 429rpx;
		width: 690rpx;
		height: 538rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.consume_report img {
		position: absolute;
		bottom: 282rpx;
		left: 131rpx;
		width: 428rpx;
		height: 427rpx;
	}


	.main1 .mesg {
		margin: 163rpx 18rpx 41rpx 69rpx;
	}

	.mesg view li {
		text-indent: -32rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}

	.mesg view li::marker {
		font-size: 10rpx;
		color: #FBB535;
	}

	.mesg view li .light {
		color: #FBB535;
		padding: 0 10rpx;
	}



	/* 就餐情况 */
	.dining {
		position: relative;
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 25rpx 30rpx 0 30rpx;
		overflow: hidden;
	}

	.dining_mesg {
		box-sizing: border-box;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 40rpx;
		padding: 0 40rpx 0 30rpx;
	}

	.dining_mesg span {
		float: left;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85)
	}

	.dining_mesg .mesg_tips {
		float: right;
		display: inline-block;
	}

	.mesg_dot {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		background: #F9793F;
		border-radius: 12rpx;
		margin-bottom: 6rpx;
		margin-right: 24rpx;
	}

	.dining_mesg .dining_txt {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #F9793F;
	}

	.canlendar {
		margin-top: 31rpx;
		margin-bottom: 31rpx;
		width: 100%;
		height: auto;
	}

	.dining_footer {
		position: relative;
		width: 100%;
		height: 128rpx;
	}

	.dining_footer img {
		width: 100%;
		height: 100%;
	}

	.dining_footer .dining_date {
		position: absolute;
		width: 130rpx;
		height: 43rpx;
		border-radius: 4rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.25);
		top: 55rpx;
		left: 30rpx;
		font-size: 28rpx;
		font-family: FontName;
		color: rgba(0, 0, 0, 0.85);
		line-height: 43rpx;
		text-align: center;
		white-space: nowrap;
	}

	.dining_info {
		position: absolute;
		top: 54rpx;
		right: 31rpx;
		width: 434rpx;
		height: 42rpx;
		display: flex;
		justify-content: space-between;
		line-height: 42rpx;
	}

	.dingbre {
		display: flex;
		flex-direction: row;
	}

	.dining_info .dining_img {
		display: inline-block;
	}

	.dining_info .dining_img img {
		width: 49rpx;
		height: 39rpx;
		margin-left: 7rpx;
		margin-bottom: 0;
	}

	.dining_info .item {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 42rpx;

	}

	.dining_icon {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		background: #F9793F;
		border-radius: 12rpx;
		background: rgba(249, 121, 63, 0.17);
		margin-left: 8rpx;

	}

	.dining_icon span {
		display: flex;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #F9793F;
		line-height: 42rpx;
		justify-content: center;
	}

	/* 消费偏好 */
	.prefer {
		position: relative;
		width: 690rpx;
		height: 526rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx 30rpx 0 30rpx;
	}

	.hed1 {
		width: 100%;
		height: 62rpx;
		box-sizing: border-box;
		padding: 0 186rpx;
	}

	.hed1 img {
		width: 318rpx;
		height: 62rpx;
	}

	.hed1 span {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 100%;
		height: 62rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #915100;
		line-height: 62rpx;
	}


	.prefer_mesg {
		position: absolute;
		box-sizing: border-box;
		padding: 0 30rpx;
		top: 101rpx;
		width: 100%;
		height: auto;
	}

	.prefer_mesg span {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
	}

	.prefer_light {
		color: #EF7B00;
	}


	.prefer_table {
		position: absolute;
		width: 100%;
		height: 284rpx;
		margin-top: 136rpx;
	}


	/* 生活费额度 */
	.living {
		position: relative;
		margin: 24rpx 30rpx 0rpx 30rpx;
		width: 690rpx;
		height: 536rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.hed {
		width: 100%;
		height: 62rpx;
		box-sizing: border-box;
		padding: 0 176rpx;
	}

	.hed img {
		width: 338rpx;
		height: 62rpx;
	}

	.hed span {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 100%;
		height: 62rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #915100;
		line-height: 62rpx;
	}

	.living_mesg {
		width: 100%;
		margin-top: 36rpx;
	}

	.living_mesg span {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
		padding-left: 30rpx;
		padding-right: 41rpx;
	}

	.living_mesg text {
		color: rgba(239, 123, 0, 0.85);
	}

	.litable {
		display: inline-block;
		width: 430rpx;
		height: 294rpx;
		padding: 0 130rpx 64rpx 130rpx;
	}

	.living_table {
		display: flex;
		justify-content: space-between;
		height: 294rpx;
	}

	.living_data {
		align-self: flex-end;
		text-align: center;
	}


	.living_school {
		width: 110rpx;
		height: 170rpx;
		background: linear-gradient(360deg, #1DCD74 0%, #0DB38E 100%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.living_class {
		width: 110rpx;
		height: 163rpx;
		background: linear-gradient(360deg, #F6C723 0%, #F3A211 100%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.living_people {
		width: 110rpx;
		height: 192rpx;
		background: linear-gradient(360deg, #FF8646 0%, #F0662B 100%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.living_table span {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.5);
		line-height: 40rpx;
		margin-top: 16rpx;
	}

	.living_table text {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 12rpx;
	}

	.living_table img {
		width: 52rpx;
		height: 105rpx;
		margin-left: 29rpx;
		margin-right: 29rpx;
	}


	/* 消费明细 */
	.consume_detail {
		position: relative;
		margin: 25rpx 30rpx 0rpx 30rpx;
		width: 690rpx;
		min-height: 600rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.consume_detail_mesg {
		position: absolute;
		box-sizing: border-box;
		padding: 0 30rpx;
		top: 102rpx;
		width: 100%;
		height: auto;
	}

	.consume_detail_mesg span {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
	}

	.detail_lists {
		position: absolute;
		margin-top: 111rpx;
		width: 100%;
		height: auto;
	}

	.listsHead {
		width: 690rpx;
		height: 74rpx;
		background: #F0F0F0;
		line-height: 74rpx;
		padding: 0 8rpx;
		box-sizing: border-box;
	}

	.listsHead>span,
	.listItem>li>span {
		display: inline-block;
		text-align: center;
		width: 20%;
	}

	.listsBody {
		padding: 0 8rpx;
	}

	.listsHead span {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
	}

	ul {
		padding: 0;
	}

	.listItem li {
		list-style: none;
		width: 100%;
		height: 74rpx;
		border-radius: 47rpx;
		line-height: 74rpx;
		margin-top: 16rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.75);
	}

	.listItem li span:first-child {
		font-size: 26rpx;
		font-family: DINPro-Medium, DINPro;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
	}

	.listItem li:nth-child(2n) {
		background: #F7F7F8;
		border-radius: 47rpx;
	}


	.detailTips {
		position: absolute;
		left: 0;
		bottom: 30rpx;
		width: 100%;
		height: 57rpx;
		box-sizing: border-box;
		padding: 16rpx 230rpx 0 237rpx;
	}

	.detailTips span {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.31);
		line-height: 0;
	}

	.detailTips img {
		display: inline-block;
		width: 38rpx;
		height: 29rpx;
		margin-left: 17rpx;
	}


	/* 未展示消费明细时 */
	.unconsume {
		position: relative;
		margin: 25rpx 30rpx 0rpx 30rpx;
		width: 690rpx;
		height: 171rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.showCon {
		display: none;
	}

	.unconsumeTip {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 40rpx;
		margin-top: 40rpx;
		padding: 0 121rpx 0 125rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.87);
		line-height: 40rpx;
	}


	.unconsume_special {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #915100;
		line-height: 40rpx;
	}

	.unconsume_special img {
		width: 17rpx;
		height: 15rpx;
		margin-left: 7rpx;
	}



	/* 遮罩层*/
	.Covers {
		position: absolute;
		top: 450rpx;
		width: 750rpx;
		height: 729rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 38%, #FFFFFF 100%);
	}

	.Covers_head {
		width: 100%;
		height: 40rpx;
		margin-top: 289rpx;
		text-align: center;
	}

	.Covers_head span {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #965300;
		line-height: 40rpx;
	}

	.Covers_head span img {
		width: 17rpx;
		height: 15rpx;
		margin-left: 10rpx;
	}

	.Covers_body {
		margin: 25rpx 29rpx 39rpx 24rpx;
		position: relative;

		.toOpen {
			position: absolute;
			right: 19rpx;
			top: 16rpx;
			width: 126rpx;
			height: 47rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.Covers_body img {
		width: 702rpx;
		height: 347rpx;
	}


	/* 底部部分 */
	.footer {
		display: flex;
		width: 708rpx;
		height: 169rpx;
		background-color: pink;
		margin: 24rpx 21rpx 24rpx 21rpx;
		background: url("https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/user/priority.png") center top no-repeat;
		background-size: 100% 100%;
		justify-content: space-around;
		align-items: center;
	}

	.footer_left {
		width: 420rpx;
		height: auto;
	}

	.footer_right {
		width: 180rpx;
		height: 61rpx;
		background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
		border-radius: 49rpx;
	}

	.footer_right span {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 61rpx;
		padding: 0 34rpx;

	}

	.footer_left_top {
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 48rpx;

	}

	.footer_left_bottom {
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(123, 80, 53, 0.85);
		line-height: 33rpx;
		margin-top: 8rpx;
	}

	.special {
		color: #F9793F;
	}
</style>