<template>
	<view class="tainer" :style="{height:containerHeight+'rpx'}">
		<view>
			<view class="school-report-header">
				<view class="school-report-header-item">
					<view class="user-avatar">
					</view>
					<view class="user-info">
						<view class="user-name">
							<text>{{userInfo.userName}}</text>
						</view>
						<view class="class-name">
							<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
						</view>
					</view>
				</view>
				<view class="school-report-header-item">
					<view class="school-report-screen">
						<view class="school-report-screen-item">
							<view class="school-report-type">
								<picker @change="schoolReportChange" :value="reportTypeIndex" :range="reportTypeArr">
									<view class="uni-input">{{reportTypeArr[reportTypeIndex]}}</view>
								</picker>
							</view>
							<view class="triangle">
							</view>
						</view>
						<view class="school-report-screen-item-two">
							<view class="school-report-date">
								<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr"
									range-key="week">
									<view class="uni-input">{{dataRangeArr[dataRangeIndex].weekstr||""}}</view>
								</picker>
							</view>
							<view class="triangle">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="school-report-context">
				<view class="school-report-context-tab">
					<view class="school-report-context-tab-item">
						<view class="school-report-context-tab-item-one active">
							<text>消费报告</text>
						</view>
						<!-- <view class="school-report-context-tab-item-one">
							<text>门禁报告</text>
						</view>
						<view class="school-report-context-tab-item-one">
							<text>公话报告</text>
						</view> -->
					</view>
					<view class="school-report-context-tab-item-two">
						<view class="share-button" @tap="shareHandler">
							<view class="share-button-img">
							</view>
							<view class="share-button-txt">
								<text>分享</text>
							</view>
						</view>
					</view>
				</view>
				<view class="school-report-context-bgImg">
				</view>
				<view class="school-report-context-card">
					<view class="school-report-context-card-one">
						<view class="school-report-context-card-one-img">
						</view>
						<view class="school-report-context-card-one-context">
							<view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									<text v-if="diningSituations.cateringLevel">共<text
											class="txt-important">{{diningSituations.notCateringNumber}}</text>次未吃{{diningSituations.notCateringType}},请提醒<text
											class="txt-important">{{userInfo.userName}}</text>
										{{diningSituations.clues}}</text>
									<text v-else>恭喜<text
											class="txt-important">{{userInfo.userName}}</text>荣获“快乐干饭人”称号，快乐要和家人一起分享哦</text>
								</view>
							</view>
							<view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									<text v-if="isEatLow">食堂消费占比<text
											class="txt-important-two">过低</text>,请及时调整饮食习惯</text>
									<text v-else>饮食较<text class="txt-important-two">均衡</text>，继续保持哦</text>
								</view>
							</view>
							<view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									消费总额 <text class="txt-important">{{consumerAmountObj.consumerAmount}}</text>元,超过全校
									<text class="txt-important">{{consumerAmountObj.exceedRate}}%</text>
									的同学<text v-if="isReasonable">,请及时评估生活费是否合理</text>
								</view>
							</view>
							<view
								class="school-report-context-card-one-context-item school-report-context-card-one-context-item-last">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									<text v-if="isAbnormal"><text
											class="txt-important-two">{{consumerTrend.clues}}</text>的消费金额存在异常,请及时关注</text>
									<text v-else>每日消费金额较稳定，继续保持哦</text>
								</view>
							</view>
						</view>
					</view>

					<view class="school-report-context-card-two">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>就餐情况</text>
							</view>
						</view>
						<view class="school-report-context-card-two-conclusion">
							<view class="school-report-context-card-two-conclusion-txt">
								<text>本{{['月','周'][reportTypeIndex]}}共<text
										class="abnormal-days">{{diningSituations.notRepastDay}}</text>天就餐异常</text>
							</view>
							<view class="school-report-context-card-two-conclusion-logo">
								<view class="school-report-context-card-two-conclusion-logo-item">
									<view class="school-report-context-card-two-conclusion-logo-item-dot">
									</view>
								</view>
								<view
									class="school-report-context-card-two-conclusion-logo-item school-report-context-card-two-conclusion-logo-item-right">
									<text>未就餐</text>
								</view>
							</view>
						</view>
						<view class="school-report-context-card-two-calendar">
							<van-calendar :formatter="formatter" :min-date="minDate" :max-date="maxDate"
								:default-date="minDate"  :show-title="false" :show-subtitle="false"
								:show-mark="false" :poppable="false" :show-confirm="false" :style="{ height: '575rpx' }"
								@select="dateSelect" />
						</view>
						<view class="school-report-context-card-two-details">
							<view class="school-report-context-card-two-details-item">
								<view class="school-report-context-card-two-details-date">
									<text>{{diningSituations.diningSituationsDate}}</text>
								</view>
								<view class="school-report-context-card-two-details-meal">
									<view class="school-report-context-card-two-details-meal-txt">
										<text>早餐</text>
									</view>
									<view class="school-report-context-card-two-details-meal-logo">
										<view v-if="diningSituations.notRepastDetails.breakfastStatus"
											class="school-report-context-card-two-details-meal-img">
											<image src="../../static/images/eatted.png" mode=""></image>
										</view>
										<view v-else class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
									<view class="school-report-context-card-two-details-meal-txt">
										<text>中餐</text>
									</view>
									<view
										class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-two">
										<view v-if="diningSituations.notRepastDetails.lunchStatus"
											class="school-report-context-card-two-details-meal-img">
											<image src="../../static/images/eatted.png" mode=""></image>
										</view>
										<view v-else class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
									<view class="school-report-context-card-two-details-meal-txt">
										<text>晚餐</text>
									</view>
									<view
										class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-three">
										<view v-if="diningSituations.notRepastDetails.supperStatus"
											class="school-report-context-card-two-details-meal-img">
											<image src="../../static/images/eatted.png" mode=""></image>
										</view>
										<view v-else class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="isOpen" class="school-report-context-card-three">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>消费偏好</text>
							</view>
						</view>
						<view class="school-report-context-card-three-conclusion">
							<view class="school-report-context-card-three-conclusion-item">
								<text v-if="isEatLow">食堂消费占比<text
										class="school-report-context-card-three-conclusion-item-describe">过低</text>,请及时调整饮食习惯</text>
								<text v-else>饮食较<text
										class="school-report-context-card-three-conclusion-item-describe">均衡</text>，继续保持哦</text>
							</view>
						</view>
						<view id="consumer-preferences-pie">
						</view>
					</view>
					<view v-if="isOpen" class="school-report-context-card-four">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>消费总额</text>
							</view>
						</view>
						<view class="school-report-context-card-four-conclusion">
							<view class="school-report-context-card-four-conclusion-item">
								<text>消费总额<text
										class="consume-total">{{consumerAmountObj.consumerAmount}}</text>元，超过全校<text
										class="consume-total">{{consumerAmountObj.exceedRate}}%</text>的同学<text
										v-if="isReasonable">，请及时评估生活费是否合理</text></text>
							</view>
						</view>
						<view class="consume-total-img">
							<view class="school-average" :style="{height:schoolAverageHeight+'rpx'}">
								<view class="school-average-num">
									<text>{{consumerAmountObj.schoolAmount}}</text>
								</view>
								<view class="school-average-img">
									<image src="../../static/images/greenArrow.png" mode=""></image>
								</view>
							</view>
							<view class="user-consume" :style="{height:userConsumeHeight+'rpx'}">
								<view class="user-consume-num">
									<text>{{consumerAmountObj.consumerAmount}}</text>
								</view>
								<view class="user-consume-img">
									<image src="../../static/images/yellowArrow.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="consume-total-img-des">
							<view class="consume-total-img-des-item school-average-des">
								<text>全校平均</text>
							</view>
							<view class="consume-total-img-des-item">
								<text>本人消费</text>
							</view>
						</view>
					</view>
					<view v-if="isOpen" class="school-report-context-card-five">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>消费趋势</text>
							</view>
						</view>
						<view class="school-report-context-card-five-conclusion">
							<view class="school-report-context-card-five-conclusion-item">
								<text v-if="isAbnormal"><text
										class="abnormal-date">{{consumerTrend.clues}}</text>的消费金额存在异常,请及时关注</text>
								<text v-else>每日消费金额较稳定，继续保持哦</text>
							</view>
						</view>
						<view id="consumer-trend-line">
						</view>
						<view class="consumer-trend-line-icon">
							<view class="consumer-trend-line-icon-item">
								<view class="consumer-trend-line-icon-logo">
									<view class="consumer-trend-line-icon-logo-left">
									</view>
									<view class="consumer-trend-line-icon-logo-middle">
									</view>
									<view class="consumer-trend-line-icon-logo-right">
									</view>
								</view>
								<view class="consumer-trend-line-icon-txt">
									<text>消费金额</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="isOpen" class="school-report-footer">
						<view class="school-report-footer-item">
							<view class="school-report-footer-item-txt">
								<text>到期后将无法查看完整报告</text>
							</view>
							<view class="school-report-validity">
								<text>有效期至<text class="validity-date">{{memberInfo.invalidDateStr}}</text>,剩余<text
										class="validity-date">{{memberInfo.differDay}}天</text></text>
							</view>
						</view>
						<view class="school-report-footer-item-two">
							<view class="school-report-footer-item-btn" @tap="equityPay">
								<text>延长权益</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isOpen" class="no-open">
				<view class="no-open-solution" @tap="equityPay">
					<view class="no-open-solution-txt">
						<text>最低 {{memberInfo.leastAmount}}元/天开通，查看完整消费报告</text>
					</view>
					<view class="no-open-solution-item">
					</view>
				</view>
				<view class="open-results">
					<view class="open-results-title">
						<text>开通后，你将解锁</text>
					</view>
					<view class="open-results-items">
						<view class="open-results-items-summary">
							<view class="summary-item">
								<text>月度消费报告</text>
							</view>
							<view class="summary-item-icon">
								<text>+</text>
							</view>
							<view class="summary-item">
								<text>消费总结</text>
							</view>
						</view>
						<view class="open-results-items-details">
							<view class="open-results-items-details-item">
								<view class="dining-situations-img">
								</view>
								<view class="open-results-items-details-item-txt">
									<text>就餐情况分析</text>
								</view>
								<view class="consumer-rationality-img">
								</view>
								<view class="open-results-items-details-item-txt">
									<text>消费合理性</text>
								</view>
							</view>
							<view class="open-results-items-details-item">
								<view class="consumer-preference-img">
								</view>
								<view class="open-results-items-details-item-txt">
									<text>消费偏好分析</text>
								</view>
								<view class="consumer-advice-img">
								</view>
								<view class="open-results-items-details-item-txt">
									<text>消费建议</text>
								</view>
							</view>
							<view class="open-results-items-details-item">
								<view class="consumer-num-img">
								</view>
								<view class="open-results-items-details-item-txt">
									<text>消费总额分析</text>
								</view>
							</view>
							<view class="open-results-items-details-item">
								<view class="consumer-trend-img">
								</view>
								<view class="open-results-items-details-item-txt">
									<text>消费趋势分析</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<van-dialog class="htmlCanvas" id="htmlCanvas" ref="imgCanvas" v-model="dialogShow" show-cancel-button
			style="width: 100%; max-height: 80% !important;overflow: scroll">
		</van-dialog>
	</view>
</template>


<script>
	import html2cancas from "html2canvas"
	var gHost = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://fpdev.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 dayjs from 'dayjs'
	export default {
		name: 'SchoolReport',
		data() {
			return {
				userInfo: {},
				reportTypeIndex: 0,
				reportTypeArr: ['月报', '周报'],
				dataRangeIndex: 0,
				dataRangeArr: [{
					week: "",
					weekstr: "",
					startDate: "",
					endDate: ""
				}],
				minDate: new Date('1970/01/01'),
				maxDate: new Date(),
				imgUrl: '', // 存储base64图片
				dialogShow: false,
				// 就餐情况
				diningSituations: {
					diningSituationsDate: '',
					diningSituationsRequestDate: '',
					notRepastDay: '',
					notRepastDetails: {},
					notRepastDetailsDTOS: [],
					cateringLevel: '',
					notCateringNumber: '',
					notCateringType: ''
				},
				// 消费偏好
				pieDatas: [],
				isEatLow: false,
				// 消费总额
				consumerAmountObj: {},
				isReasonable: false,
				schoolAverageHeight: '',
				userConsumeHeight: '',
				// 消费趋势
				consumerTrend: {},
				isAbnormal: false,
				lineDatas: [],
				// 会员信息
				isOpen: false,
				memberInfo: {
					leastAmount: '',
					invalidDateStr: '',
					differDay: ''
				},
				containerHeight: '',
			}
		},
		mounted() {
			if(new Date().getTime()<=new Date('2022/06/30').getTime()){
				this.isOpen=true;
				this.memberInfo.invalidDateStr='2022年6月30日';
				this.memberInfo.differDay=dayjs('2022/06/30').diff(dayjs(),'day');
				this.containerHeight = 4200;
			}else{
				this.queryIsDredgeMember();
			}
			// this.queryIsDredgeMember();
			let tmpArr = []
			// 获取时间
			for (let i = 0; i <= 11; i++) {
				let startWeek = dayjs().subtract(i, 'month').startOf('month');
				let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d.getTime() ? dayjs()
					.subtract(i, 'month').endOf('month') : dayjs();
				tmpArr.push({
					week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
					weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
					startDate: startWeek.format("YYYY-MM-DD"),
					endDate: endWeek.format("YYYY-MM-DD")
				})
			}
			this.dataRangeArr = tmpArr
			this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
			this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
			this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex].startDate;
			this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
			if (this.isOpen) {
				this.queryStudentConsumerPreference(1).then(e => this.piechart());
				this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
			} else {
				this.queryStudentConsumerPreference();
				this.queryDayConsumerTrend();
			}
			this.queryCampusStudentInfo();
			this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
				.diningSituationsRequestDate, 1);
			this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
				.dataRangeIndex].endDate, 2);
			this.queryConsumerTrend();
		},
		methods: {
			toImage: function() {
				this.$nextTick(() => {
					html2cancas(document.getElementsByClassName("tainer")[0], {
						useCORS: true,
					}).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 = '100vw';
						htmlCanvas.appendChild(img);
					})
				})
			},
			shareHandler: function() {
				let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
				if (htmlCanvasImg) {
					htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
				}
				this.toImage();
				this.dialogShow = true;
			},
			schoolReportChange: function(e) {
				this.reportTypeIndex = e.target.value;
				this.getDataRangeArr(this.reportTypeIndex);
			},
			dataRangeChange: function(e) {
				this.dataRangeIndex = e.target.value;
				this.getDataRangeArr(this.reportTypeIndex);
			},
			getDataRangeArr: function(num) {
				if (num) {
					let tmpArr = []
					for (let i = 1; i <= 52; i++) {
						let startWeek = dayjs().subtract(i, 'week').startOf('week');
						let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'week').endOf('week').$d.getTime() ?
							dayjs().subtract(i, 'week').endOf('week') : dayjs();
						tmpArr.push({
							week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
							weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
							startDate: startWeek.format("YYYY-MM-DD"),
							endDate: endWeek.format("YYYY-MM-DD")
						})
					}
					this.dataRangeArr = tmpArr;
				} else {
					let tmpArr = []
					if (new Date().getDate() > 5) {
						for (let i = 0; i <= 11; i++) {
							let startWeek = dayjs().subtract(i, 'month').startOf('month');
							let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d
								.getTime() ?
								dayjs().subtract(i, 'month').endOf('month') : dayjs();
							tmpArr.push({
								week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
								weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
								startDate: startWeek.format("YYYY-MM-DD"),
								endDate: endWeek.format("YYYY-MM-DD")
							})
						}
					} else {
						for (let i = 1; i <= 11; i++) {
							let startWeek = dayjs().subtract(i, 'month').startOf('month');
							let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d
								.getTime() ?
								dayjs().subtract(i, 'month').endOf('month') : dayjs();
							tmpArr.push({
								week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
								weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
								startDate: startWeek.format("YYYY-MM-DD"),
								endDate: endWeek.format("YYYY-MM-DD")
							})
						}
					}
					this.dataRangeArr = tmpArr;
				}
				this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
				this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
				this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
					.startDate;
				this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
					.diningSituationsRequestDate, 1);
				this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
					.dataRangeIndex].endDate, 2);
				this.queryConsumerTrend();
				if (this.isOpen) {
					this.queryStudentConsumerPreference(1).then(e => this.piechart());
					this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
				} else {
					this.queryStudentConsumerPreference();
					this.queryDayConsumerTrend();
				}
			},
			formatter(day) {
				const year = day.date.getFullYear();
				const month = day.date.getMonth() + 1;
				const monthstr = month < 10 ? '0' + month : month;
				const date = day.date.getDate();
				const datestr = date < 10 ? '0' + date : date;
				const sum = year + '-' + monthstr + '-' + datestr;
				const contrastList = this.diningSituations.notRepastDetailsDTOS.filter(e => e
					.dayNotEatNumber != 0);
				contrastList.forEach(item => {
					if (sum == item.repastDate) {
						const breakfastTxt = item.breakfastStatus ? '' : '早';
						const lunchTxt = item.lunchStatus ? '' : '中';
						const supperTxt = item.supperStatus ? '' : '晚';
						day.topInfo = breakfastTxt + lunchTxt + supperTxt;
						day.className = 'notice-day'
					}
				})
				return day;
			},
			formatDate(date) {
				return `${date.getMonth()+1}月${date.getDate()}日`;
			},
			formatDateTwo(date) {
				return `${date.getFullYear()}-${date.getMonth()<9?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
			},
			dateSelect(date) {
				this.diningSituations.diningSituationsDate = this.formatDate(date);
				var dateStr =
					`${date.getFullYear()}-${date.getMonth()<9?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
				this.queryNotRepastDetails(dateStr, dateStr, 1);
			},
			piechart: function() {
				var myChart = echarts.init(document.getElementById('consumer-preferences-pie'));
				var option = {
					tooltip: {
						trigger: 'item'
					},
					series: this.pieDatas.map(function(data, idx) {
						return {
							type: 'pie',
							radius: ['33', '58'],
							data: data,
							itemStyle: {
								borderColor: '#fff',
								borderWidth: 3,
							},
							label: {
								formatter: function(e) {
									return e.name + "\n" + e.value + '元';
								},
								padding: [0, 2],
								rich: {
									color: 'rgba(0, 0, 0, 0.85)',
									fontSize: 12,
									fontFamily: 'PingFangSC-Regular, PingFang SC',
									fontWeight: 400,
									lineHeight: 17
								}
							}
						};
					}),
					color: ['#00C47C', '#F6C723', '#FF8646']
				};
				option && myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			// 获取某月的所有周六
			getMonthSaturdayDate: function(year, month) {
				const lastDay = new Date(year, month, 0).getDate();
				const startDay = new Date(year, month, 1).getDate()
				const allDate = [];
				for (var i = startDay; i <= lastDay; i++) {
					allDate[i - 1] = i < 10 ? year + '-' + month + '-' + '0' + i : year + '-' + month + '-' +
						i;
				}
				const saturdayDate = allDate.filter(e => {
					const date = new Date(e);
					if (date.getDay() == 6) {
						return true
					}
				})
				return saturdayDate;
			},
			linechart: function(num) {
				var mySize = document.getElementById('consumer-trend-line');
				mySize.style.width = 360 + 'px';
				mySize.style.height = 260 + 'px';
				var myChart = echarts.init(mySize);
				var xdata = this.lineDatas.map(v => v.name);
				var year = this.dataRangeArr[this.dataRangeIndex].startDate.slice(0, 4);
				var month = this.dataRangeArr[this.dataRangeIndex].startDate.slice(5, 7);
				var saturdayList = this.getMonthSaturdayDate(year, month);
				switch (num) {
					case 0:
						var seriesData = [];
						this.lineDatas.map(v => {
							if (v.isException == 1) {
								if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.date)) {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										}
									}))

								} else {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							} else {
								if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.date)) {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#FF8646',
											borderWidth: 1.5
										}
									}))
								} else {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#FF8646',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							}
						});
						break;
					case 1:
						var seriesData = [];
						this.lineDatas.map(v => {
							if (v.isException == 1) {
								seriesData.push(Object.assign(v, {
									itemStyle: {
										color: '#0BDB7E',
										borderWidth: 1.5
									}
								}))
							} else {
								seriesData.push(Object.assign(v, {
									itemStyle: {
										color: '#FF8646',
										borderWidth: 1.5
									}
								}))
							}
						});
						break;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: xdata
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						data: seriesData,
						type: 'line',
						smooth: true,
						areaStyle: {
							color: 'linear-gradient(180 deg, #0DDE7E 0%, rgba(4, 205, 124, 0) 100%)',
							opacity: 0.2
						},
						lineStyle: {
							color: '#0BDB7E'
						}
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: 'transparent'
							}
						},
						extraCssText: `width:109px;height:55px;line-height:33rpx;background: no-repeat center/100% url(../../static/images/consumeTrendbgm.png);
							font-size:24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;
							color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
						confine: true,
						position: function(pt) {
							return [pt[0] - 27, pt[1] - 73];
						},
						formatter: function(data) {
							let desp = ['', '消费金额偏高', '消费金额偏低'][data[0].data.isException - 1]
							return data[0].name + '消费' + data[0].value + '元' + '<br>' + desp;
						}
					},
				};
				option && myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			// 查询学生信息
			async queryCampusStudentInfo() {
				try {
					let data = await this.$http.get({
						url: gHost + '/report-push/campus-consumer-report/queryCampusStudentInfo'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.userInfo = data.obj;

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询就餐情况
			async queryNotRepastDetails(startDate, endDate, num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryNotRepastDetails'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate,
						endDate
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					switch (num) {
						case 1:
							this.diningSituations.notRepastDetails = data.obj.notRepastDetailsDTOS[0];
							break;
						case 2:
							this.diningSituations.notRepastDay = data.obj.notRepastDay;
							this.diningSituations.notRepastDetailsDTOS = data.obj.notRepastDetailsDTOS;
							this.diningSituations.cateringLevel = data.obj.cateringLevel;
							this.diningSituations.notCateringNumber = data.obj.notCateringNumber;
							this.diningSituations.notCateringType = this.diningSituations
								.cateringLevel ? ['早餐', '午餐',
									'晚餐'
								][this.diningSituations.cateringLevel - 1] : '';
							this.diningSituations.clues = this.diningSituations.cateringLevel ? [
								'早餐吃好，一天才能活力满满哦',
								'及时补充能量，下午才能集中精神学习哦', '晚餐好好吃，身体才能更健康'
							][this.diningSituations.cateringLevel - 1] : '';
							break;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询学生消费偏好类型
			async queryStudentConsumerPreference(num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryStudentConsumerPreference'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					const tmpObj = data.obj;
					this.isEatLow = tmpObj.canteenAmount / tmpObj.grossAmount < 0.5 ? true : false;
					if (num) {
						this.pieDatas = [
							[{
								name: '食堂',
								value: tmpObj.canteenAmount
							}, {
								name: '超市',
								value: tmpObj.supermarketAmount
							}, {
								name: '其他',
								value: tmpObj.otherAmount
							}]
						]
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询消费总额
			async queryConsumerTrend() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryConsumerTrend'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.consumerAmountObj = data.obj;
					this.isReasonable = this.consumerAmountObj.exceedRate >= 40 && this
						.consumerAmountObj.exceedRate <=
						60 ? false : true;
					this.schoolAverageHeight = this.consumerAmountObj.schoolAmount <= this
						.consumerAmountObj
						.consumerAmount ? 139 : 192;
					this.userConsumeHeight = this.consumerAmountObj.consumerAmount <= this
						.consumerAmountObj
						.schoolAmount ? 139 : 192;
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 日消费趋势
			async queryDayConsumerTrend(num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryDayConsumerTrend'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex]
							.startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					var exceptionDate = data.obj.exceptionDate;
					this.isAbnormal = exceptionDate.length ? true : false;
					var clues = '';
					exceptionDate.forEach((item, index) => item.slice(5, 6) == '0' ? (
						clues += item.slice(6, 7) + '月' +
						item.slice(8, 10) + '日' + (index == exceptionDate.length -
							1 ? '' : '、')) : (clues +=
						item.slice(5, 7) + '月' + item.slice(8, 10) + '日' + (
							index == exceptionDate.length - 1 ?
							'' : '、')))
					this.consumerTrend.clues = clues;
					if (num) {
						var lineDatas = data.obj.dayConsumerAmount.map(item => Object
							.assign(item, {
								value: item.consumerAmount,
								name: item.date.slice(5)
							}));
						this.lineDatas = lineDatas;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 是否开通消费报告
			async queryIsDredgeMember() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryIsDredgeMember'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode: 4001
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.isOpen = data.obj.status;
					if (this.isOpen) {
						this.queryMemberValidTime();
						this.containerHeight = 4200;
					} else {
						this.queryMemberConsumerAmount();
						this.containerHeight = 2340;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询会员消费金额
			async queryMemberConsumerAmount() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberConsumerAmount'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode: 4001
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.memberInfo.leastAmount = data.obj.leastAmount;
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询会员有效期
			async queryMemberValidTime() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberValidTime'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode: 4001
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.memberInfo.differDay = data.obj.differDay;
					let month = data.obj.invalidDate.slice(5, 6) == 0 ? data
						.obj.invalidDate.slice(6, 7) : data.obj
						.invalidDate.slice(5, 7);
					let date = data.obj.invalidDate.slice(8, 9) == 0 ? data.obj
						.invalidDate.slice(9) : data.obj
						.invalidDate.slice(8);
					this.memberInfo.invalidDateStr = data.obj.invalidDate
						.slice(0, 4) + '年' + month + '月' + date + '日';
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			equityPay: function() {
				jWeixin.miniProgram.switchTab({
					url: `/pages/Member/main`,
					success: function success() {
						console.log('skip success')
					},
					fail: function fail(_fail) {
					  console.warn(_fail);
					  uni.showModal({
					    content: JSON.stringify(_fail)
					  });
					}
				});
			},
		},
	}
</script>

<style lang="scss" scope>
	.tainer {
		.school-report-header {
			height: 88rpx;
			margin: 72rpx 0 48rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.school-report-header-item {
				display: flex;

				.user-avatar {
					width: 88rpx;
					height: 88rpx;
					background: no-repeat center/100% url(../../static/images/avatar.png);
				}

				.user-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 9rpx;

					.user-name {
						width: 200rpx;
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1B1B1B;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.class-name {
						width: 200rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.25);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.school-report-screen {
					display: flex;

					.school-report-screen-item {
						width: 156rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.school-report-type {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1B1B1B;
							margin-right: 12rpx;
						}

						.triangle {
							width: 21rpx;
							height: 10rpx;
							background: no-repeat center/100% url(../../static/images/grayTriangle.png);
						}
					}


					.school-report-screen-item-two {
						width: 270rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.school-report-date {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1B1B1B;
							margin-right: 17rpx;
						}

						.triangle {
							width: 21rpx;
							height: 10rpx;
							background: no-repeat center/100% url(../../static/images/grayTriangle.png);
						}
					}
				}
			}
		}

		.school-report-context {
			.school-report-context-tab {
				height: 84rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.school-report-context-tab-item {
					display: flex;

					.school-report-context-tab-item-one {
						width: 172rpx;
						background: #F9F9F9;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.85);
						display: flex;
						justify-content: center;
						align-items: center;

						&.active {
							background: #E4F9F2;
						}
					}
				}

				.school-report-context-tab-item-two {
					width: 155rpx;
					margin: 8rpx 0 0;

					.share-button {
						width: 155rpx;
						height: 64rpx;
						background: rgba(4, 184, 113, .13);
						border-radius: 32rpx 0rpx 0rpx 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.share-button-img {
							width: 26rpx;
							height: 26rpx;
							background: no-repeat center/100% url(../../static/images/share.png);
							margin-right: 11rpx;
						}

						.share-button-txt {
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #04B871;
						}
					}
				}
			}

			.school-report-context-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(../../static/images/consumeReportBg.png);
			}

			.school-report-context-card {
				width: 100%;
				background: #E5F8F1;
				padding: 0 30rpx;
				position: absolute;
				top: 650rpx;
				box-sizing: border-box;

				.school-report-context-card-one {
					width: 100%;
					height: 598rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-one-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(../../static/images/consumeReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.school-report-context-card-one-context {
						width: 613rpx;
						margin: 0 30rpx 0 47rpx;
						position: absolute;
						top: 163rpx;

						.school-report-context-card-one-context-item {
							margin: 0 0 32rpx;
							display: flex;

							.school-report-context-card-one-context-dot {
								height: 40rpx;
								display: flex;
								align-items: center;

								.school-report-context-card-one-context-dot-item {
									width: 10rpx;
									height: 10rpx;
									background: #04B871;
									border-radius: 10rpx;
									margin-right: 16rpx;
								}
							}

							.school-report-context-card-one-context-txt {
								line-height: 40rpx;

								.txt-important {
									color: #04B871;
									margin: 0 4rpx;
								}

								.txt-important-two {
									color: #04B871;
								}
							}

							&.school-report-context-card-one-context-item-last {
								margin: 0;
							}
						}
					}
				}

				.school-report-context-card-title {
					height: 62rpx;
					display: flex;
					justify-content: center;

					.school-report-context-card-title-img {
						width: 318rpx;
						background: no-repeat center/100% url(../../static/images/cardBg.png);
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.85);
						line-height: 45rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.school-report-context-card-two {
					height: 876rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-two-conclusion {
						height: 40rpx;
						padding: 0 40rpx 0 30rpx;
						box-sizing: border-box;
						margin: 40rpx 0 32rpx;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);

						.school-report-context-card-two-conclusion-txt {
							.abnormal-days {
								color: #F9793F;
								margin: 0 5rpx;
							}
						}

						.school-report-context-card-two-conclusion-logo {
							display: flex;

							.school-report-context-card-two-conclusion-logo-item {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #F9793F;
								display: flex;
								align-items: center;

								.school-report-context-card-two-conclusion-logo-item-dot {
									width: 12rpx;
									height: 12rpx;
									background: #F9793F;
									border-radius: 12rpx;
								}

								&.school-report-context-card-two-conclusion-logo-item-right {
									margin-left: 14rpx;
								}
							}
						}
					}

					.school-report-context-card-two-calendar {
						height: 575rpx;
						
						/deep/ .van-calendar__weekdays{
							background: #F7FAF8;
						}
						
						/deep/ .van-calendar__weekday{
							text-align: left;
							padding-left: 30rpx;
							box-sizing: border-box;
						}
						
						/deep/ .van-calendar__weekday:first-of-type{
							color: rgba(0, 0, 0, 0.25);
						}
						
						/deep/ .van-calendar__weekday:last-of-type{
							color: rgba(0, 0, 0, 0.25);
						}

						/deep/ .van-calendar__month-title {
							display: none;
						}

						/deep/ .van-calendar__days {
							margin: 10rpx 0 0;
						}

						/deep/ .van-calendar__day {
							margin: 0 0 8rpx;
							border-radius: 22rpx;
						}

						/deep/ .van-calendar__selected-day {
							background: rgba(0, 0, 0, .1);
							color: #F9793F;
							display: flex;
							align-items: flex-end;
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
						}

						/deep/ .van-calendar__top-info {
							top: 0;
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #F9793F;
							line-height: 28rpx;
							margin: 12rpx 0 4rpx;
						}

						/deep/ .notice-day {
							color: #F9793F;
							background: rgba(249, 121, 63, .1);
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-right: 10rpx;
							display: flex;
							align-items: flex-end;
						}
					}

					.school-report-context-card-two-details {
						height: 132rpx;
						background: no-repeat center/100% url(../../static/images/diningSituations.png);
						padding: 55rpx 42rpx 30rpx 29rpx;
						box-sizing: border-box;
						border-radius: 0 0 16rpx 16rpx;

						.school-report-context-card-two-details-item {
							display: flex;
							height: 43rpx;

							.school-report-context-card-two-details-date {
								width: 130rpx;
								height: 43rpx;
								border-radius: 8rpx;
								border: 1rpx solid #04B871;
								font-size: 28rpx;
								font-family: FontName;
								font-weight: 600;
								font-style: italic;
								color: #04B871;
								margin-right: 65rpx;
								display: flex;
								justify-content: center;
							}

							.school-report-context-card-two-details-meal {
								display: flex;

								.school-report-context-card-two-details-meal-txt {
									width: 56rpx;
									margin-right: 8rpx;
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85);
									line-height: 40rpx;
								}

								.school-report-context-card-two-details-meal-logo {
									display: flex;
									align-items: center;
									margin-right: 48rpx;

									&.school-report-context-card-two-details-meal-logo-two {
										margin-right: 56rpx;
									}

									&.school-report-context-card-two-details-meal-logo-three {
										margin: 0;
									}

									.school-report-context-card-two-details-meal-img {
										width: 48rpx;
										height: 40rpx;

										image {
											height: 100%;
											width: 100%;
											max-height: 100%;
											max-width: 100%;
										}
									}

									.school-report-context-card-two-details-meal-noeat {
										width: 40rpx;
										height: 40rpx;
										background: rgba(249, 121, 63, 0.17);
										border-radius: 12rpx;
										font-size: 24rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #F9793F;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}


							}
						}
					}
				}

				.school-report-context-card-three {
					height: 526rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-three-conclusion {
						margin: 40rpx 0 57rpx 0;

						.school-report-context-card-three-conclusion-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin-left: 30rpx;

							.school-report-context-card-three-conclusion-item-describe {
								color: #04B871;
							}
						}
					}

					#consumer-preferences-pie {
						height: 385rpx;
						top: -60rpx;
						z-index: 100;
					}
				}

				.school-report-context-card-four {
					height: 536rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-four-conclusion {
						margin: 36rpx 0 46rpx;

						.school-report-context-card-four-conclusion-item {
							height: 80rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin: 0 40rpx 0 30rpx;

							.consume-total {
								color: #04B871;
								margin: 0 6rpx;
							}
						}
					}

					.consume-total-img {
						height: 192rpx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 40rpx;

						.school-average {
							width: 110rpx;
							background: linear-gradient(360deg, #04B871 0%, #07D66A 100%);
							border-radius: 16rpx 16rpx 0 0;
							margin-right: 74rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 14rpx 0 0;
							box-sizing: border-box;

							.school-average-img {
								width: 52rpx;
								height: 87rpx;
								margin: 2rpx 0 0;

								image {
									width: 100%;
									height: 100%;
									max-width: 100%;
									max-height: 100%;
								}
							}
						}

						.user-consume {
							width: 110rpx;
							background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
							border-radius: 16rpx 16rpx 0 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 14rpx 0 0;
							box-sizing: border-box;

							.user-consume-img {
								width: 52rpx;
								height: 87rpx;
								margin: 2rpx 0 0;

								image {
									width: 100%;
									height: 100%;
									max-width: 100%;
									max-height: 100%;
								}
							}
						}
					}

					.consume-total-img-des {
						margin: 16rpx 0 0;
						display: flex;
						justify-content: center;

						.consume-total-img-des-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.5);
							line-height: 40rpx;

							&.school-average-des {
								margin-right: 74rpx;
							}
						}
					}
				}

				.school-report-context-card-five {
					height: 634rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 37rpx;
					position: relative;

					.school-report-context-card-five-conclusion {
						margin: 40rpx 0 0;

						.school-report-context-card-five-conclusion-item {
							margin: 0 40rpx 0 30rpx;
							height: 130rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							.abnormal-date {
								color: #04B871;
							}
						}
					}

					#consumer-trend-line {
						position: absolute;
						top: 120rpx;
						z-index:100;
					}

					.consumer-trend-line-icon {
						position: absolute;
						top: 547rpx;
						left: 271rpx;
						height: 40rpx;

						.consumer-trend-line-icon-item {
							display: flex;
							align-items: center;

							.consumer-trend-line-icon-logo {
								display: flex;
								align-items: center;
								margin-right: 10rpx;

								.consumer-trend-line-icon-logo-left,
								.consumer-trend-line-icon-logo-right {
									width: 8rpx;
									height: 1rpx;
									background: #0BDA7D;
								}

								.consumer-trend-line-icon-logo-middle {
									width: 12rpx;
									height: 12rpx;
									background: #FFFFFF;
									border: 3rpx solid #0BDB7E;
									border-radius: 12rpx;
								}
							}

							.consumer-trend-line-icon-txt {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C8C8C;
								line-height: 40rpx;
							}
						}


					}
				}

				.school-report-footer {
					height: 169rpx;
					margin: 0 0 43rpx;
					padding: 33rpx 34rpx 42rpx 42rpx;
					box-sizing: border-box;
					background: no-repeat center/100% url(../../static/images/extendPermissionsBg.png);
					display: flex;
					justify-content: space-between;

					.school-report-footer-item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.school-report-footer-item-txt {
							font-size: 34rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
						}

						.school-report-validity {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(123, 80, 53, 0.85);

							.validity-date {
								color: #F9793F;
							}
						}
					}

					.school-report-footer-item-two {
						display: flex;
						align-items: center;

						.school-report-footer-item-btn {
							width: 180rpx;
							height: 61rpx;
							background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
							border-radius: 49rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}

		.no-open {
			width: 100%;
			height: 915rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 38%, #FFFFFF 100%);
			position: absolute;
			top: 1425rpx;
			padding: 309rpx 30rpx 63rpx;
			box-sizing: border-box;

			.no-open-solution {
				height: 40rpx;
				width: 100%;
				display: flex;
				align-items: center;
				margin: 0 0 40rpx;

				.no-open-solution-txt {
					margin: 0 9rpx 0 88rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #04B871;
					line-height: 40rpx;
				}

				.no-open-solution-item {
					width: 15rpx;
					height: 20rpx;
					background: no-repeat center/100% url(../../static/images/rightArrow.png);
				}
			}

			.open-results {
				border-radius: 16rpx;

				.open-results-title {
					width: 100%;
					height: 83rpx;
					background: url(../../static/images/openbgm.png) center/100% no-repeat;
					border-radius: 16rpx 16rpx 0 0;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #21775C;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.open-results-items {
					width: 100%;
					height: 379rpx;
					background: #F6FAF9;
					border-radius: 16rpx;
					padding: 32rpx 0 43rpx 73rpx;
					box-sizing: border-box;

					.open-results-items-summary {
						width: 100%;
						height: 45rpx;
						display: flex;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #217456;
						margin: 0 0 26rpx;

						.summary-item {
							font-size: 32rpx;
							line-height: 45rpx;
						}

						.summary-item-icon {
							font-size: 40rpx;
							line-height: 45rpx;
							margin: 0 45rpx 0 70rpx;
						}
					}

					.open-results-items-details {
						.open-results-items-details-item {
							width: 100%;
							height: 40rpx;
							margin: 0 0 24rpx;
							display: flex;
							align-items: center;

							.open-results-items-details-item-txt {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #13664C;
								line-height: 40rpx;
							}

							.dining-situations-img {
								width: 34rpx;
								height: 27rpx;
								background: no-repeat center/100% url(../../static/images/repast.png);
								margin-right: 22rpx;
							}

							.consumer-rationality-img {
								width: 34rpx;
								height: 34rpx;
								background: no-repeat center/100% url(../../static/images/consumerRationality.png);
								margin: 0 22rpx 0 108rpx;
							}

							.consumer-preference-img {
								width: 30rpx;
								height: 27rpx;
								background: no-repeat center/100% url(../../static/images/consumerPreference.png);
								margin-right: 24rpx;
							}

							.consumer-advice-img {
								width: 31rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/consumerAdvice.png);
								margin: 0 24rpx 0 112rpx;
							}

							.consumer-num-img {
								width: 30rpx;
								height: 34rpx;
								background: no-repeat center/100% url(../../static/images/consumerNum.png);
								margin-right: 24rpx;
							}

							.consumer-trend-img {
								width: 28rpx;
								height: 25rpx;
								background: no-repeat center/100% url(../../static/images/consumerTrend.png);
								margin-right: 25rpx;
							}
						}
					}
				}
			}
		}

	}
</style>
