<template>
	<view class="tainer" :style="{height:containerHeight+'rpx'}">
		<view v-if="showReport">
			<view class="school-report-header-bg">
			</view>
			<view class="school-report-header-position">
				<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-tab">
					<view class="school-report-context-tab-item">
						<view v-if="isService" class="school-report-context-tab-item-one"
							:class="tabIndex==1?'active':''" @tap="tabTap(1)">
							<view class="tab-title"><text>消费报告</text></view>
							<view :class="tabIndex==1?'active-bottomline':''">
							</view>
						</view>
						<view v-if="isAttendanceService" class="school-report-context-tab-item-one"
							:class="tabIndex==2?'active':''" @tap="tabTap(2)">
							<view class="tab-title"><text>出入校报告</text></view>
							<view :class="tabIndex==2?'active-bottomline':''">
							</view>
						</view>
						<view v-if="isPubTalkService" class="school-report-context-tab-item-one"
							:class="tabIndex==3?'active':''" @tap="tabTap(3)">
							<view class="tab-title"><text>公话报告</text></view>
							<view :class="tabIndex==3?'active-bottomline':''">
							</view>
						</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>
			<view class="school-report-context">
				<view :class="['consumer-report-bgImg','attendance-report-bgImg','pubTalk-report-bgImg'][tabIndex-1]">
				</view>
				<view class="school-report-context-card">
					<view class="school-report-context-card-one"
						:style="{height:[598,256,pubTalkSummaryHeight][tabIndex-1]+'rpx'}">
						<view :class="['consumer-report-img','attendance-report-img','pubTalk-report-img'][tabIndex-1]">
						</view>
						<!-- 消费报告 -->
						<view v-show="tabIndex==1" 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.consumergrossamount}}</text>元,超过全校
									<text class="txt-important">{{consumerAmountObj.gtgraderate}}%</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 v-show="tabIndex==2" class="attendance-report-context-card-one-context">
							<view class="attendance-report-context-card-one-context-item">
								<text v-if="attendanceReport.abnormalNum&&attendanceReport.abnormalNum!=-1">共<text
										class="txt-important">{{attendanceReport.abnormalNum}}</text>天出入异常，请及时关注</text>
								<text v-else-if="attendanceReport.abnormalNum==-1">风雨无阻上学路,继续加油哦</text>
								<text v-else>恭喜<text
										class="txt-important">{{userInfo.userName}}</text>荣获全勤好学生，风雨无阻上学路</text>
							</view>
						</view>
						<!-- 公话报告 -->
						<view v-show="tabIndex==3" class="pubTalk-report-context-card-one-context">
							<view class="pubTalk-report-context-card-one-context-item" v-if="pubTalkReport.talkText1">
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text>最喜欢和<text class="txt-important">{{pubTalkReport.talkText1}}</text>沟通，共通话<text
											class="txt-important">{{pubTalkReport.talkText2}}次{{pubTalkReport.talkText3}}分钟</text>，超过全校<text
											class="txt-important">{{pubTalkReport.talkText4}}</text>的同学</text>
								</view>
							</view>
							<view class="pubTalk-report-context-card-one-context-item" v-else>
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text class="txt-important">有事没事记得和家人多联系哦~</text>
								</view>
							</view>
							<view class="pubTalk-report-context-card-one-context-item" v-if="pubTalkReport.talkText5">
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text>跟<text class="txt-important">{{pubTalkReport.talkText5}}</text>沟通最少，共通话<text
											class="txt-important">{{pubTalkReport.talkText6}}次{{pubTalkReport.talkText7}}分钟</text>，超过全校<text
											class="txt-important">{{pubTalkReport.talkText8}}</text>的同学</text>
								</view>
							</view>
							<view
								class="pubTalk-report-context-card-one-context-item pubTalk-report-context-card-one-context-item-last"
								v-if="pubTalkReport.talkText9">
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text><text
											class="txt-important">{{pubTalkReport.talkText9}}</text>是默默的守护，有时也不要忘记多和<text
											class="txt-important">{{pubTalkReport.talkText9}}</text>进行交流</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 消费报告 -->
					<view v-show="tabIndex==1" 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 v-show="tabIndex==1" :formatter="formatter" :min-date="minDate"
								:max-date="maxDate" :default-date="minDate" :row-height="44" :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==1"
											class="school-report-context-card-two-details-meal-img">
											<image src="../../static/images/eatted.png" mode=""></image>
										</view>
										<view v-else-if="diningSituations.notRepastDetails.breakfastStatus==0"
											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==1"
											class="school-report-context-card-two-details-meal-img">
											<image src="../../static/images/eatted.png" mode=""></image>
										</view>
										<view v-else-if="diningSituations.notRepastDetails.lunchStatus==0"
											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==1"
											class="school-report-context-card-two-details-meal-img">
											<image src="../../static/images/eatted.png" mode=""></image>
										</view>
										<view v-else-if="diningSituations.notRepastDetails.supperStatus==0"
											class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="tabIndex==1&&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-show="tabIndex==1&&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.consumergrossamount}}</text>元，超过同年级<text
										class="consume-total">{{consumerAmountObj.gtgraderate}}%</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.schoolavgamount}}</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.consumergrossamount}}</text>
								</view>
								<view class="user-consume-img">
									<image src="../../static/images/yellowArrow.png" mode=""></image>
								</view>
							</view>
							<view class="school-average" :style="{height:gradeAverageHeight+'rpx'}">
								<view class="school-average-num">
									<text>{{consumerAmountObj.gradeavgamount}}</text>
								</view>
								<view class="school-average-img">
									<image src="../../static/images/greenArrow.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="consume-total-img-des">
							<view class="consume-total-img-des-item">
								<text>全校平均</text>
							</view>
							<view class="consume-total-img-des-item consume-des">
								<text>本人消费</text>
							</view>
							<view class="consume-total-img-des-item">
								<text>全年级平均</text>
							</view>
						</view>
					</view>
					<view v-show="tabIndex==1&&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-show="tabIndex==2" class="attendance-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="attendance-report-context-card-two-conclusion">
							<view class="attendance-report-context-card-two-conclusion-txt">
								<text v-if="attendanceReport.abnormalNum!=-1">本{{['月','周'][reportTypeIndex]}}共<text
										class="abnormal-days">{{attendanceReport.abnormalNum}}</text>天出入异常</text>
							</view>
							<view class="attendance-report-context-card-two-conclusion-logo">
								<view class="attendance-report-context-card-two-conclusion-logo-item">
									<view class="attendance-report-context-card-two-conclusion-logo-item-dot leave">
									</view>
									<view class="attendance-report-context-card-two-conclusion-logo-item-txt">
										<text>请假</text>
									</view>
								</view>
								<view class="attendance-report-context-card-two-conclusion-logo-item">
									<view class="attendance-report-context-card-two-conclusion-logo-item-dot">
									</view>
									<view class="attendance-report-context-card-two-conclusion-logo-item-txt">
										<text>异常</text>
									</view>
								</view>
							</view>
						</view>
						<view class="attendance-report-context-card-two-calendar">
							<van-calendar v-show="tabIndex==2" :formatter="formatter" :min-date="minDate"
								:max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false"
								:show-subtitle="false" :show-mark="false" :poppable="false" :show-confirm="false"
								:style="{ height: '575rpx' }" @select="attendanceDateSelect">
								<template #top-info="item">
									<span v-if="item.topInfo=='请假'" class="mark-green">请假</span>
									<span v-if="item.topInfo=='迟到'" class="mark-orange">迟到</span>
									<span v-if="item.topInfo=='未到校'" class="mark-orange">未到校</span>
									<span v-if="item.topInfo=='早退'" class="mark-orange">早退</span>
									<span v-if="item.topInfo=='冠军'" class="mark-yellow">冠军</span>
									<span v-if="item.topInfo=='进步'" class="mark-yellow">进步</span>
								</template>
							</van-calendar>
						</view>
					</view>
					<view v-if="tabIndex==2&&isAttendanceOpen" class="attendance-report-context-details"
						:style="{height:attendanceReportDatail.length?858:620+'rpx',overflow:attendanceReportDatail.length?'scroll':'none',top:attendanceReportDatail.length?-30:0+'rpx'}">
						<view v-for="(detailItem,detailIndex) in attendanceReportDatail" :key="detailIndex">
							<view v-if="detailItem.attendIntervalType&&detailItem.attendIntervalType!=-1"
								class="attendance-report-context-card-two-details">
								<view class="attendance-report-context-card-two-details-item">
									<view class="attendance-report-context-card-two-details-time">
										<view class="attendance-report-context-card-two-details-time-img">
										</view>
										<view class="attendance-report-context-card-two-details-time-txt txt-details">
											<text>考勤时间</text>
										</view>
										<view class="attendance-report-context-card-two-details-time-txt">
											<text>{{detailItem.attendIntervalName}}</text>
										</view>
									</view>
									<view v-if="detailIndex==0" class="attendance-report-context-card-two-details-date">
										<text>{{attendanceSituations.attendanceDate}}</text>
									</view>
								</view>
							</view>
							<view v-else-if="detailItem.attendIntervalType==-1"
								class="attendance-report-context-card-two-details">
								<view class="attendance-report-context-card-two-details-item">
									<view class="attendance-report-context-card-two-details-time">
										<view class="attendance-report-context-card-two-details-time-img">
										</view>
										<view class="attendance-report-context-card-two-details-time-txt txt-details">
											<text>未设置考勤时间</text>
										</view>
									</view>
									<view class="attendance-report-context-card-two-details-date">
										<text>{{attendanceSituations.attendanceDate}}</text>
									</view>
								</view>
							</view>
							<view v-if="attendanceReportDatail.length" class="attendance-report-context-card-three">
								<view v-for="(item,index) in detailItem.attendDetailReportDTOList" :key="index">
									<view class="attendance-report-details">
										<view class="dashed-line-box">
											<view v-if="index" class="dashed-line">
											</view>
											<view v-else class="dashed-line-first">
											</view>
											<view v-if="index" class="attendance-report-dot"
												:style="{border:item.border}">
											</view>
											<view v-else class="attendance-report-dot-first"
												:style="{border:item.border}">
											</view>
										</view>
										<view class="attendance-report-details-item-box"
											:style="{top: 18+index*170+'rpx'}">
											<view class="attendance-report-details-item">
												<view class="attendance-report-time">
													<view class="attendance-report-time-txt">
														<text>{{item.iotTypeName}}</text>
													</view>
													<view class="attendance-report-time-item">
														<text>{{item.timeContent}}</text>
													</view>
													<view v-if="item.describeContent=='当日早到冠军'" class="early-champions">
														<view class="early-champions-img">
														</view>
														<view class="early-champions-txt">
															<text>早到冠军</text>
														</view>
													</view>
													<view v-else-if="item.describeContent=='非常不错哦，比昨天早到'"
														class="early-champions" style="width: 368rpx">
														<view class="progress-img">
														</view>
														<view class="early-champions-txt">
															<text>非常不错哦，比昨天早到</text>
														</view>
													</view>
												</view>
												<view class="attendance-report-time-details">
													<view
														v-if="item.describeContent!='当日早到冠军'&&item.describeContent!='非常不错哦，比昨天早到'"
														class="attendance-report-time-details-item">
														<text>{{item.describeContent}}</text>
													</view>
													<view class="attendance-report-time-details-icon">
													</view>
												</view>
											</view>
											<view class="attendance-report-details-img-item">
												<view class="attendance-report-details-img-box">
													<image v-if="item.attendImage" :src="item.attendImage" mode=""
														@click="imageClick(item.attendImage)">
													</image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="!attendanceReportDatail.length" class="noAttendanceReportDatail">
							<view class="attendance-report-context-card-two-details">
								<view class="attendance-report-context-card-two-details-item">
									<view class="attendance-report-context-card-two-details-time">
										<view class="attendance-report-context-card-two-details-time-img">
										</view>
										<view class="attendance-report-context-card-two-details-time-txt txt-details">
											<text>未设置考勤时间</text>
										</view>
									</view>
									<view class="attendance-report-context-card-two-details-date">
										<text>{{attendanceSituations.attendanceDate}}</text>
									</view>
								</view>
							</view>
							<view class="noAttendanceReportDatailImg">
							</view>
						</view>
					</view>
					<van-dialog v-model="imageDialogShow" width="620rpx">
						<view class="image-dialog">
							<image :src="imageDialogSrc" mode=""></image>
						</view>
					</van-dialog>
					<!-- 公话报告 -->
					<view v-show="tabIndex==3" class="pubTalk-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="call-number-bar-unit">
							<text>（次）</text>
						</view>
						<view id="call-number-bar">
						</view>
					</view>
					<view v-show="tabIndex==3&&isPubTalkOpen" class="pubTalk-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="call-duration-bar-unit">
							<text>（min）</text>
						</view>
						<view id="call-duration-bar">
						</view>
					</view>
					<view v-show="tabIndex==3&&isPubTalkOpen" class="pubTalk-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="leave-message-summary" v-if="pubTalkReport.messageText1">
							<text><text class="txt-important">{{pubTalkReport.messageText1}}</text> 最喜欢和你留言，共 <text
									class="txt-important">{{pubTalkReport.messageText2}}</text> 次，超过全校<text
									class="txt-important">{{pubTalkReport.messageText3}}</text>的同学</text>
						</view>
						<view class="leave-message-summary" v-else>
							<text class="txt-important">想家人了可以多多留言哦~</text>
						</view>
						<view class="leave-message-summary leave-message-less-summary"
							v-if="pubTalkReport.messageText4">
							<text><text class="txt-important">{{pubTalkReport.messageText4}}</text> 留言最少，共 <text
									class="txt-important">{{pubTalkReport.messageText5}}</text> 次，超过全校<text
									class="txt-important">{{pubTalkReport.messageText6}}</text>的同学</text>
						</view>
						<view class="leave-message-bar-unit">
							<text>（次）</text>
						</view>
						<view id="leave-message-bar">
						</view>
					</view>
					<view v-if="flag!=tabIndex" 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="flag==tabIndex" class="no-open"
				:style="{height:[915,845,891][tabIndex-1]+'rpx',top:[1425,1099,pubTalkNoopenHeight][tabIndex-1]+'rpx'}">
				<view class="no-open-solution" @tap="equityPay">
					<view class="no-open-solution-txt">
						<text>最低{{memberInfo.leastAmount}}元/天开通，查看完整{{['消费','出入校','公话'][tabIndex-1]}}报告</text>
					</view>
					<view class="no-open-solution-item">
					</view>
				</view>
				<view class="open-results">
					<!-- 消费报告 -->
					<view v-if="tabIndex==1" class="open-results-title consume-open-results-title">
						<text>开通后，掌握消费动态、更省心</text>
					</view>
					<view v-else class="open-results-title">
						<text>开通后，你将解锁</text>
					</view>
					<view class="open-results-items" :class="tabIndex==1?'consume-open-results-items':''">
						<view v-if="tabIndex==2||tabIndex==3" class="open-results-items-summary">
							<view class="summary-item">
								<text>{{['实时推送','音视频通话'][tabIndex-2]}}</text>
							</view>
							<view class="summary-item-icon"
								:class="['attendance-report-icon','pubTalk-report-icon'][tabIndex-2]">
								<text>+</text>
							</view>
							<view class="summary-item">
								<text>{{['月度出入校报告','月度公话报告'][tabIndex-2]}}</text>
							</view>
						</view>
						<!-- 消费报告 -->
						<view v-if="tabIndex==1" class="consume-open-results-items-details">
							<view class="consume-open-results-items-details-item">
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子是否缺餐？</text>
									</view>
									<view class="details-item-down">
										<view class="dining-situations-img">
										</view>
										<view class="details-item-down-txt">
											<text>【就餐情况】告诉你</text>
										</view>
									</view>
								</view>
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子在校交友了？</text>
									</view>
									<view class="details-item-down">
										<view class="meal-pal-img">
										</view>
										<view class="details-item-down-txt">
											<text>【饭友分析】告诉你</text>
										</view>
									</view>
								</view>
							</view>
							<view class="consume-open-results-items-details-item">
								<view class="details-item-left">
									<view class="details-item-up">
										<text>消费偏高还是偏低？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-num-img">
										</view>
										<view class="details-item-down-txt">
											<text>【生活费额度】直观看</text>
										</view>
									</view>
								</view>
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子正餐超市消费多？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-preference-img">
										</view>
										<view class="details-item-down-txt">
											<text>【消费偏好】直观看</text>
										</view>
									</view>
								</view>
							</view>
							<view class="consume-open-results-items-details-item">
								<view class="details-item-left">
									<view class="details-item-up">
										<text>担心孩子被迫高额消费？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-trend-img">
										</view>
										<view class="details-item-down-txt">
											<text>【消费趋势】告诉你</text>
										</view>
									</view>
								</view>
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子是否准时就餐？</text>
									</view>
									<view class="details-item-down">
										<view class="time-trends-img">
										</view>
										<view class="details-item-down-txt">
											<text>【就餐时间趋势】告诉你</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="open-results-items-details">
							<!-- 出入校报告 -->
							<view v-if="tabIndex==2">
								<view class="open-results-items-details-item">
									<view class="admission-notice-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入校通知</text>
									</view>
									<view class="admission-analysis-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入情况分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="admission-record-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入校记录</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="admission-image-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入校图片</text>
									</view>
								</view>
							</view>
							<!-- 公话报告 -->
							<view v-else>
								<view class="open-results-items-details-item">
									<view class="video-call-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>视频通话</text>
									</view>
									<view class="communication-advice-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>家庭沟通建议</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="voice-call-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>语音通话</text>
									</view>
									<view class="call-count-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>通话次数分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="leave-word-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>亲子留言</text>
									</view>
									<view class="call-duration-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>通话时长分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="face-call-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>刷脸通话</text>
									</view>
									<view class="leave-word-analysis-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>家庭留言分析</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nodata" @click="nodataClick">
			<view class="nodataImg">
				<img style="width: 100%"
					src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/purchaseChart.gif" />
			</view>
			<view class="nodataTxt">
				<text>当前为使用高峰期，请稍后再试</text>
			</view>
		</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>
	</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'
	import moment from "moment";
	export default {
		name: 'SchoolReport',
		data() {
			return {
				showReport: true,
				nodataImgUrl: this.$ImgUrl,
				userInfo: {},
				reportTypeIndex: 0,
				reportTypeArr: ['月报', '周报'],
				dataRangeIndex: 0,
				dataRangeArr: [{
					week: "",
					weekstr: "",
					startDate: "",
					endDate: ""
				}],
				minDate: new Date('1970/01/01'),
				maxDate: new Date(),
				imgUrl: '', // 存储base64图片
				dialogShow: false,
				tabIndex: 1,
				// 就餐情况
				diningSituations: {
					diningSituationsDate: '',
					diningSituationsRequestDate: '',
					notRepastDay: '',
					notRepastDetails: {},
					notRepastDetailsDTOS: [],
					cateringLevel: '',
					notCateringNumber: '',
					notCateringType: ''
				},
				// 消费偏好
				pieDatas: [],
				isEatLow: false,
				// 生活费额度
				consumerAmountObj: {},
				isReasonable: false,
				schoolAverageHeight: '',
				userConsumeHeight: '',
				gradeAverageHeight: '',
				// 消费趋势
				consumerTrend: {},
				isAbnormal: false,
				lineDatas: [],
				// 出入校报告数据
				attendanceSituations: {
					attendanceDate: '',
					abnomalDateList: [],
				},
				imageDialogShow: false,
				imageDialogSrc: '',
				// 公话报告数据
				pubTalkReport: {
					// 通话次数
					callNumberInfoList: [],
					// 通话时长
					callDurationInfoList: [],
					// 亲子留言
					leaveMessageInfoList: []
				},
				// 出入校报告数据
				attendanceReport: {
					abnormalNum: 0,
					abnomalDateList: [],
				},
				attendanceReportDatail: [],
				// 会员信息 
				queryMemberServcieItemList: [],
				// 消费
				isOpen: false,
				isService: false,
				// 出入校
				isAttendanceOpen: false,
				isAttendanceService: false,
				// 公话
				isPubTalkOpen: false,
				isPubTalkService: false,
				flag: 0,
				memberInfo: {
					leastAmount: '',
					invalidDateStr: '',
					differDay: ''
				},
				containerHeight: '',
				pubTalkSummaryHeight: 525,
				pubTalkNoopenHeight: 1260,
				isnodataClick: false
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				if (this.isPeakPeriod() && !this.isnodataClick) {
					this.showReport = false;
					return
				}
				this.showReport = true;
				// 有无消费报告入口
				if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
					this.isService = true;
				} else {
					this.queryMemberServcieItem().then(() => {
						if (this.queryMemberServcieItemList.length) {
							this.isService = this.queryMemberServcieItemList.indexOf(1002) == -1 ? false : true;
						}
					})
				}
				// 有无进出校、公话入口
				this.queryMemberServcieItem().then(() => {
					if (this.queryMemberServcieItemList.length) {
						this.isAttendanceService = this.queryMemberServcieItemList.indexOf(3002) == -1 ? false :
							true;
						this.isPubTalkService = this.queryMemberServcieItemList.indexOf(2002) == -1 ? false : true;
					}
				})
				// 消费报告
				this.queryIsDredgeMember(1002).then(() => {
					if (this.isOpen) {
						this.queryMemberValidTime(1002).then(e => {
							if (new Date(this.memberInfo.invalidDate).getTime() <= new Date('2022/06/30')
								.getTime()) {
								this.isOpen = true;
								this.flag = 0;
								this.memberInfo.invalidDateStr = '2022年6月30日';
								this.memberInfo.differDay = dayjs('2022/06/30').diff(dayjs(), 'day') + 1;
								this.containerHeight = 4200;
								this.queryConsumerSummaryAmount(1).then(e => this.piechart());
								this.queryDayConsumerTrend(1).then(e => this.linechart(this
									.reportTypeIndex));
							} else {
								this.queryIsDredgeMember(1002, 1).then(() => {
									this.queryConsumerSummaryAmount(1).then(e => this
										.piechart());
									this.queryDayConsumerTrend(1).then(e => this.linechart(this
										.reportTypeIndex));
								});
							}
						})
					} else {
						if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
							this.isOpen = true;
							this.flag = 0;
							this.memberInfo.invalidDateStr = '2022年6月30日';
							this.memberInfo.differDay = dayjs('2022/06/30').diff(dayjs(), 'day') + 1;
							this.containerHeight = 4200;
							this.queryConsumerSummaryAmount(1).then(e => this.piechart());
							this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
						} else {
							this.queryIsDredgeMember(1002, 1).then(() => {
								this.queryConsumerSummaryAmount();
								this.queryDayConsumerTrend();
							});
						}
					}
				});
				let tmpArr = []
				// 获取时间
				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.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex].startDate;
				this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
				this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
				this.queryCampusStudentInfo();
				let tmpDate = this.formatDateTwo(this.minDate);
				this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
					.dataRangeIndex].endDate).then(() => {
					if (this.diningSituations.notRepastDetailsDTOS) {
						let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate ===
							tmpDate)[
							0];
						this.diningSituations.notRepastDetails = today;
					} else {
						this.diningSituations.notRepastDetails = {};
					}
				});
				this.getPubTalkReport();
			},
			// 当天11：00 ~ 13：00属于高峰期
			isPeakPeriod() {
				let first = this.timeIn("11:00:00", "13:00:00");
				return first;
			},
			nodataClick: function() {
				this.isnodataClick = true
				this.init()
			},
			/*在某段时间内*/
			timeIn(s, e) {
				let t = moment().format("YYYY-MM-DD");
				if (
					moment(t + " " + s).diff(moment()) < 0 &&
					moment(t + " " + e).diff(moment()) > 0
				) {
					return true;
				}
				return false;
			},
			tabTap: function(num) {
				this.tabIndex = num;
				this.tabTapHandler(this.tabIndex);
			},
			tabTapHandler: function(num, flag) {
				this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
				this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				if (num == 1) {
					this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
					this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
						.startDate;
					let tmpDate = this.formatDateTwo(this.minDate);
					this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
						.dataRangeIndex].endDate).then(() => {
						if (this.diningSituations.notRepastDetailsDTOS) {
							let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate ===
								tmpDate)[
								0];
							this.diningSituations.notRepastDetails = today;
						} else {
							this.diningSituations.notRepastDetails = {};
						}
					});
					this.queryConsumerSummaryAmount();
					this.$nextTick(() => {
						if (this.isOpen) {
							this.queryConsumerSummaryAmount(1).then(e => this.piechart());
							this.queryDayConsumerTrend(1).then(e => this.linechart(this
								.reportTypeIndex));
						} else {
							this.queryConsumerSummaryAmount();
							this.queryDayConsumerTrend();
						}
					})
				} else if (num == 2) {
					if (flag) {
						this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
						this.statisAttendanceAbnormal();
						this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate);
					} else {
						this.memberInfo.differDay = '';
						this.memberInfo.invalidDateStr = '';
						this.memberInfo.leastAmount = '';
						this.queryIsDredgeMember(3002).then(() => {
							this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
							this.statisAttendanceAbnormal();
							if (this.isAttendanceOpen) {
								this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate)
									.then(e => {
										if (this.attendanceReportDatail.length) {
											this.containerHeight = 2762;
										} else {
											this.containerHeight = 2524;
										}
									});
							}
						})
					}
				} else {
					if (flag) {
						if (this.isPubTalkOpen) {
							this.getPubTalkReport().then(() => {
								this.$nextTick(() => {
									this.callNumberBarchart();
									this.callDurationBarchart();
									this.leaveMessageBarchart();
								})
							})
						} else {
							this.getPubTalkReport().then(() => {
								this.$nextTick(() => {
									this.callNumberBarchart();
								})
							})
						}
					} else {
						this.memberInfo.differDay = '';
						this.memberInfo.invalidDateStr = '';
						this.memberInfo.leastAmount = '';
						this.getPubTalkReport().then(() => {
							this.queryIsDredgeMember(2002).then(e => {
								if (this.isPubTalkOpen) {
									this.$nextTick(() => {
										this.callNumberBarchart();
										this.callDurationBarchart();
										this.leaveMessageBarchart();
									})
								} else {
									this.$nextTick(() => {
										this.callNumberBarchart();
									})
								}
							})
						})
					}
				}
			},
			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 = '83vw';
						img.style.borderRadius = '15px';
						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 = []
					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.tabTapHandler(this.tabIndex, 1);
			},
			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;
				if (this.tabIndex == 1) { // 消费报告
					if (this.diningSituations.notRepastDetailsDTOS) {
						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;
								if (day.topInfo) {
									day.className = 'notice-day'
								}
							}
						})
					}
				} else if (this.tabIndex == 2) { // 出入校报告
					if (this.attendanceReport.abnomalDateList && this.attendanceReport.abnomalDateList.length) {
						const abnomalList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 2 || e
							.abnomalType == 3 || e.abnomalType == 5);
						const leaveList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 4);
						const championList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 6);
						const progressList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 7);
						// 迟到 早退 未到校
						abnomalList.forEach(item => {
							if (sum == item.attendDate.slice(0, 10)) {
								var topInfo = item.abnomalType == 5 ? '未到校' : item.abnomaleName;
								day.topInfo = topInfo;
								day.className = 'late-day';
							}
						})
						// 请假
						leaveList.forEach(item => {
							if (sum == item.attendDate.slice(0, 10)) {
								day.topInfo = item.abnomaleName;
								day.className = 'leave-day';
							}
						})
						// 冠军
						championList.forEach(item => {
							if (sum == item.attendDate.slice(0, 10)) {
								day.topInfo = item.abnomaleName;
								day.className = 'champion-day';
							}
						})
						// 进步
						progressList.forEach(item => {
							if (sum == item.attendDate.slice(0, 10)) {
								day.topInfo = item.abnomaleName;
								day.className = 'progress-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()}`;
				if (this.diningSituations.notRepastDetailsDTOS) {
					let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate === dateStr)[0];
					this.diningSituations.notRepastDetails = today;
				} else {
					this.diningSituations.notRepastDetails = {};
				}
			},
			attendanceDateSelect(date) {
				this.attendanceSituations.attendanceDate = this.formatDate(date);
				this.attendanceReprotDatail(this.formatDateTwo(date));
			},
			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 myLineChart = 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 && myLineChart.setOption(option);
				window.addEventListener('resize', function() {
					myLineChart.resize();
				})
			},
			callNumberBarchart: function() {
				var mySize = document.getElementById('call-number-bar');
				mySize.style.width = 350 + 'px';
				mySize.style.height = 260 + 'px';
				var myCallNumberBarchart = echarts.init(mySize);
				var xdata = this.pubTalkReport.callNumberInfoList.map(v => v.nickname);
				var seriesData = this.pubTalkReport.callNumberInfoList.map(v => v.callNumber);
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							interval: 0,
							textStyle: {
								color: 'rgba(0, 0, 0, 0.5)',
								fontSize: 12
							},
							formatter: function(params) {
								var newParamsName = "";
								var tempParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 2;
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										tempParamsName += tempStr;
									}
								} else {
									tempParamsName = params;
								}
								if (tempParamsName.length > 9) {
									newParamsName = tempParamsName.substring(0, 10) + '...';
								} else {
									newParamsName = tempParamsName;
								}
								return newParamsName;
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: function(value) {
							return Math.ceil(value.max) + 1
						},
						minInterval: 1
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: '#FF9523',
							barBorderRadius: [5, 5, 0, 0],
						},
						label: {
							show: true,
							position: 'top',
							color: '#FE931F',
							fontSize: '14px',
							formatter: (params) => {
								return params.value[params.encode.x[0]];
							}
						},
						barWidth: 25
					}]
				};
				option && myCallNumberBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myCallNumberBarchart.resize();
				})
			},
			callDurationBarchart: function() {
				var mySize = document.getElementById('call-duration-bar');
				mySize.style.width = 340 + 'px';
				mySize.style.height = 260 + 'px';
				var myCallDurationBarchart = echarts.init(mySize);
				var xdata = this.pubTalkReport.callDurationInfoList.map(v => v.nickname);
				var seriesData = this.pubTalkReport.callDurationInfoList.map(v => v.duration);
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							interval: 0,
							textStyle: {
								color: 'rgba(0, 0, 0, 0.5)',
								fontSize: 12
							},
							formatter: function(params) {
								var newParamsName = "";
								var tempParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 2;
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										tempParamsName += tempStr;
									}
								} else {
									tempParamsName = params;
								}
								if (tempParamsName.length > 9) {
									newParamsName = tempParamsName.substring(0, 10) + '...';
								} else {
									newParamsName = tempParamsName;
								}
								return newParamsName;
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: function(value) {
							return Math.ceil(value.max)
						},
						minInterval: 1
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: '#D59F00',
							barBorderRadius: [5, 5, 0, 0],
						},
						label: {
							show: true,
							position: 'top',
							color: '#D59F00',
							fontSize: '14px',
							formatter: (params) => {
								return params.value[params.encode.x[0]];
							}
						},
						barWidth: 25
					}]
				};
				option && myCallDurationBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myCallDurationBarchart.resize();
				})
			},
			leaveMessageBarchart: function() {
				var mySize = document.getElementById('leave-message-bar');
				mySize.style.width = 350 + 'px';
				mySize.style.height = 260 + 'px';
				var myLeaveMessageBarchart = echarts.init(mySize);
				var xdata = this.pubTalkReport.leaveMessageInfoList.map(v => v.nickname);
				var seriesData = this.pubTalkReport.leaveMessageInfoList.map(v => v.leaveMessageNumber);
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							interval: 0,
							textStyle: {
								color: 'rgba(0, 0, 0, 0.5)',
								fontSize: 12
							},
							formatter: function(params) {
								var newParamsName = "";
								var tempParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 2;
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										tempParamsName += tempStr;
									}
								} else {
									tempParamsName = params;
								}
								if (tempParamsName.length > 9) {
									newParamsName = tempParamsName.substring(0, 10) + '...';
								} else {
									newParamsName = tempParamsName;
								}
								return newParamsName;
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: function(value) {
							return Math.ceil(value.max)
						},
						minInterval: 1
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: '#00AB6C',
							barBorderRadius: [5, 5, 0, 0],
						},
						label: {
							show: true,
							position: 'top',
							color: '#00AB6C',
							fontSize: '14px',
							formatter: (params) => {
								return params.value[params.encode.x[0]];
							}
						},
						barWidth: 25
					}]
				};
				option && myLeaveMessageBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myLeaveMessageBarchart.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) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryNotRepastDetails'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate,
						endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) {
						this.diningSituations = {};
						return;
					}
					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] : '';
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 三对象排序
			numsort(obj1, obj2, obj3) {
				var temp;
				if (obj1.num > obj2.num) {
					temp = JSON.parse(JSON.stringify(obj1));
					obj1 = JSON.parse(JSON.stringify(obj2));
					obj2.num = JSON.parse(JSON.stringify(temp));
				}
				if (obj2.num > obj3.num) {
					temp = JSON.parse(JSON.stringify(obj2));
					obj2 = JSON.parse(JSON.stringify(obj3));
					obj3 = JSON.parse(JSON.stringify(temp));
				}
				if (obj1.num > obj2.num) {
					temp = JSON.parse(JSON.stringify(obj1));
					obj1 = JSON.parse(JSON.stringify(obj2));
					obj2 = JSON.parse(JSON.stringify(temp));
				}
				return [{
					name: obj1.name,
					value: obj1.num,
					tag: 0
				}, {
					name: obj2.name,
					value: obj2.num,
					tag: 1
				}, {
					name: obj3.name,
					value: obj3.num,
					tag: 2
				}];
			},
			// 数组中数据的个数
			counterArray(arr) {
				var obj = {}
				arr.forEach(function(v, k) {
					if (obj[v]) {
						obj[v]++;
					} else {
						obj[v] = 1;
					}
				})
				return obj;
			},
			// 查询消费总额及学生消费偏好类型
			async queryConsumerSummaryAmount(num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryConsumerSummaryAmount'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) return;
					if (data.obj.length) {
						const tmpObj = data.obj[0];
						this.isEatLow = tmpObj.canteenamount / tmpObj.consumergrossamount < 0.5 ? true : false;
						if (num) {
							this.pieDatas = [
								[{
									name: '正餐',
									value: tmpObj.canteenamount
								}, {
									name: '超市',
									value: tmpObj.supermarketamount
								}, {
									name: '其他',
									value: tmpObj.otheramount
								}]
							]
						}
						this.consumerAmountObj = tmpObj;
						this.isReasonable = this.consumerAmountObj.gtgraderate >= 40 && this
							.consumerAmountObj.gtgraderate <=
							60 ? false : true;
						const sortArr = this.numsort({
							name: 'schoolAverageHeight',
							num: this.consumerAmountObj.schoolavgamount
						}, {
							name: 'userConsumeHeight',
							num: this.consumerAmountObj.consumergrossamount
						}, {
							name: 'gradeAverageHeight',
							num: this.consumerAmountObj.gradeavgamount
						});
						const tempArr = [this.consumerAmountObj.schoolavgamount, this.consumerAmountObj
							.consumergrossamount,
							this.consumerAmountObj.gradeavgamount
						];
						const heightArr = Object.keys(this.counterArray(tempArr)).length == 1 ? [139, 139, 139] : (
							Object.keys(this.counterArray(tempArr)).length == 2 ? [139, 139, 160] : [139, 160, 192]
						);
						sortArr.forEach(e => {
							this[e.name] = heightArr[e.tag]
						})
					}
				} 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,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return

					}
					if (!data.obj) 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 getPubTalkReport() {
				try {
					let data = await this.$http.post({
						url: gHost +
							'/report-push/vpt-web-report/pubTalkReport/getPubTalkReport'
					}, {
						schoolId: getQueryParams('schoolId'),
						studentId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
					})
					if (data.code != 0) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return
					}
					this.pubTalkReport = data.data || {};
					if (!this.pubTalkReport.talkText5 && !this.pubTalkReport.talkText9) {
						this.pubTalkSummaryHeight = 275;
					} else if (this.pubTalkReport.talkText5 && !this.pubTalkReport.talkText9) {
						this.pubTalkSummaryHeight = 387;
					} else {
						this.pubTalkSummaryHeight = 525;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 出入校报告
			// 统计异常天数
			async statisAttendanceAbnormal() {
				try {
					let data = await this.$http.post({
						url: gHost +
							'/report-push/attemdance-report/statisAttendanceAbnormal'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startTime: this.dataRangeArr[this.dataRangeIndex].startDate,
						endTime: this.dataRangeArr[this.dataRangeIndex].endDate,
						classId: this.userInfo.classId
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return
					}
					this.attendanceReport = data.data || {};
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 出入情况明细
			async attendanceReprotDatail(currentDate) {
				try {
					let data = await this.$http.post({
						url: gHost +
							'/report-push/attemdance-report/attendanceReprotDatail'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						currentDate,
						classId: this.userInfo.classId
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return
					}
					var tempList = data.data;
					if (tempList && tempList.length) {
						tempList.forEach(e => {
							if (e.attendDetailReportDTOList && e.attendDetailReportDTOList.length) {
								e.attendDetailReportDTOList.forEach(c => {
									c.border = c.describeContent && c
										.describeContent != '当日早到冠军' ?
										'4rpx solid #F9793F' :
										'4rpx solid rgba(0, 0, 0, 0.25)'
								})
							}
						})
						this.attendanceReportDatail = tempList || [];
					} else {
						this.attendanceReportDatail = [];
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 是否开通会员功能
			async queryIsDredgeMember(serviceItemCode, num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryIsDredgeMember'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					switch (serviceItemCode) {
						case 1002:
							this.isOpen = data.obj && data.obj.status || false;
							if (!this.isOpen) {
								this.flag = 1;
							}
							break;
						case 2002:
							this.isPubTalkOpen = data.obj && data.obj.status || false;
							if (this.isPubTalkOpen) {
								this.queryMemberValidTime(serviceItemCode);
								this.containerHeight = 2765 + this.pubTalkSummaryHeight;
								this.flag = 0;
							} else {
								this.queryMemberConsumerAmount(serviceItemCode);
								this.containerHeight = 1605 + this.pubTalkSummaryHeight;
								this.pubTalkNoopenHeight = 735 + this.pubTalkSummaryHeight;
								this.flag = 3;
							}
							break;
						case 3002:
							this.isAttendanceOpen = data.obj && data.obj.status || false;
							if (this.isAttendanceOpen) {
								this.queryMemberValidTime(serviceItemCode);
								this.containerHeight = 2762;
								this.flag = 0;
							} else {
								this.queryMemberConsumerAmount(serviceItemCode);
								this.containerHeight = 1974;
								this.flag = 2;
							}
							break;
					}
					if (num == 1) {
						if (this.isOpen) {
							this.queryMemberValidTime(serviceItemCode);
							this.containerHeight = 4200;
							this.flag = 0;
						} else {
							this.queryMemberConsumerAmount(serviceItemCode);
							this.containerHeight = 2340;
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询是否开通服务项（入口展示服务项）
			async queryMemberServcieItem() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberServcieItem'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					const tempList = data.obj || [];
					if (tempList.length) {
						this.queryMemberServcieItemList = tempList.map(e => e.serviceCode);
					} else {
						this.queryMemberServcieItemList = [];
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询会员消费金额
			async queryMemberConsumerAmount(serviceItemCode) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberConsumerAmount'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode
					})
					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(serviceItemCode) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberValidTime'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.memberInfo.differDay = data.obj.differDay;
					this.memberInfo.invalidDate = data.obj.invalidDate;
					if (data.obj.invalidDate) {
						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 + '日';
					} else {
						this.memberInfo.invalidDateStr = '';
					}
				} 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)
						});
					}
				});
			},
			imageClick: function(src) {
				this.imageDialogSrc = src;
				this.imageDialogShow = true;
			},
		},
	}
</script>

<style lang="scss">
	.nodata {
		position: absolute;
		left: 50%;
		top: 0%;
		width: 100%;
		transform: translate(-50%, 0);

		.nodataImg {
			width: 100%;
			text-align: center;
		}

		.nodataTxt {
			margin-top: -100rpx;
			display: flex;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.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;
	}

	.tainer {
		position: relative;

		.school-report-header-bg {
			height: 292rpx;
		}

		.school-report-header-position {
			height: 292rpx;
			padding: 72rpx 0 0 30rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			background: #FFFFFF;
			z-index: 1000;

			.school-report-header {
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				position: relative;
				margin: 0 0 48rpx;

				.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-tab {
				height: 84rpx;
				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;
						color: rgba(0, 0, 0, 0.85);
						display: flex;
						align-items: center;
						flex-direction: column;

						&.active {
							background: #E4F9F2;
							font-weight: 600;
						}

						.tab-title {
							margin: 20rpx 0 10rpx;
						}

						.active-bottomline {
							width: 49rpx;
							height: 7rpx;
							background: #04B871;
							border-radius: 4rpx;
						}
					}
				}

				.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 {
			.consumer-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(../../static/images/consumeReportBg.png);
			}

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

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

			.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 {
				width: 100%;
				background: #E5F8F1;
				padding: 0 30rpx;
				position: absolute;
				top: 720rpx;
				box-sizing: border-box;

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

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

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

					.pubTalk-report-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(../../static/images/pubTalkReport.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;
							}
						}
					}

					.attendance-report-context-card-one-context {
						padding: 163rpx 0 0;
						box-sizing: border-box;

						.attendance-report-context-card-one-context-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							display: flex;
							justify-content: center;

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

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

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

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

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

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

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

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

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

				.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;
						width: 690rpx;

						/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;
							display: flex;
							align-items: flex-end;
						}

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

						/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: 700;
								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;
									}
								}

							}
						}
					}
				}

				.attendance-report-context-card-two {
					height: 748rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 0 0;

					.attendance-report-context-card-two-conclusion {
						height: 40rpx;
						padding: 0 30rpx 0;
						box-sizing: border-box;
						margin: 36rpx 0 29rpx;
						display: flex;
						justify-content: space-between;

						.attendance-report-context-card-two-conclusion-txt {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							.abnormal-days {
								color: #F9793F;
								margin: 0 5rpx;
							}
						}

						.attendance-report-context-card-two-conclusion-logo {
							width: 190rpx;
							display: flex;
							justify-content: space-between;

							.attendance-report-context-card-two-conclusion-logo-item {
								display: flex;
								align-items: center;

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

									&.leave {
										background: #04B871;
									}
								}

								.attendance-report-context-card-two-conclusion-logo-item-txt {
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.5);
									margin-left: 14rpx;
								}
							}
						}
					}

					.attendance-report-context-card-two-calendar {
						height: 575rpx;
						width: 690rpx;

						.mark-green {
							color: #04B871;
						}

						.mark-orange {
							color: #F9793F;
						}

						.mark-yellow {
							color: #DAA000;
						}

						/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;
							display: flex;
							align-items: flex-end;
						}

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

						/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/ .late-day {
							color: #F9793F;
							background: rgba(249, 121, 63, .1);
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}

						/deep/ .leave-day {
							color: #04B871;
							background: rgba(4, 184, 113, .09);
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}

						/deep/ .champion-day {
							color: #DAA000;
							background: url(../../static/images/champion.png) no-repeat -4rpx center/100%;
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}

						/deep/ .progress-day {
							color: #DAA000;
							background: url(../../static/images/progress.png) no-repeat -2rpx center/100%;
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}
					}
				}

				.attendance-report-context-details {

					.attendance-report-context-card-two-details {
						position: relative;
						height: 146rpx;
						background: #F5F7F7;
						padding: 28rpx 39rpx 0 34rpx;
						box-sizing: border-box;

						.attendance-report-context-card-two-details-item {
							height: 50rpx;
							display: flex;
							justify-content: space-between;

							.attendance-report-context-card-two-details-time {
								display: flex;
								align-items: center;

								.attendance-report-context-card-two-details-time-img {
									width: 25rpx;
									height: 25rpx;
									background: no-repeat center/100% url(../../static/images/attendanceTime.png);
								}

								.attendance-report-context-card-two-details-time-txt {
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85);

									&.txt-details {
										margin: 0 16rpx 0 13rpx;
									}
								}

							}

							.attendance-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: 700;
								font-style: italic;
								color: #04B871;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}

					.attendance-report-context-card-three {
						background: #F5F7F7;
						margin: -40rpx 0 0;
						position: relative;
						border-radius: 0 0 16rpx 16rpx;

						.attendance-report-details {
							width: 572rpx;
							height: 168rpx;

							.dashed-line-box {
								position: relative;
								top: -40rpx;
								width: 16rpx;
								height: 212rpx;

								.dashed-line-first {
									width: 2rpx;
									height: 66rpx;
									border-left: 2rpx dashed rgba(0, 0, 0, .25);
									position: absolute;
									left: 44rpx;
								}

								.attendance-report-dot-first {
									width: 16rpx;
									height: 16rpx;
									background: #FFFFFF;
									border: 4rpx solid rgba(0, 0, 0, 0.25);
									border-radius: 16rpx;
									position: absolute;
									top: 66rpx;
									left: 34rpx;
								}

								.dashed-line {
									width: 2rpx;
									height: 146rpx;
									border-left: 2rpx dashed rgba(0, 0, 0, .25);
									position: absolute;
									left: 44rpx;
									top: -76rpx;
								}

								.attendance-report-dot {
									width: 16rpx;
									height: 16rpx;
									background: #FFFFFF;
									border: 4rpx solid rgba(0, 0, 0, 0.25);
									border-radius: 16rpx;
									position: absolute;
									top: 70rpx;
									left: 34rpx;
								}
							}

							.attendance-report-details-item-box {
								width: 83.5%;
								height: 156rpx;
								display: flex;
								flex-direction: column;
								position: absolute;
								margin-left: 71rpx;

								.attendance-report-details-item {
									height: 40rpx;
									display: flex;
									justify-content: space-between;

									.attendance-report-time {
										display: flex;
										font-size: 28rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: rgba(0, 0, 0, 0.85);
										line-height: 40rpx;

										.attendance-report-time-txt {
											width: 56rpx;
										}

										.attendance-report-time-item {
											color: #F9793F;
											margin: 0 21rpx 0 15rpx;
										}

										.early-champions {
											width: 183rpx;
											background: #F7E4BB;
											border-radius: 20rpx;
											padding: 0 26rpx 0 23rpx;
											box-sizing: border-box;
											display: flex;
											align-items: center;

											.early-champions-img {
												width: 32rpx;
												height: 29rpx;
												background: no-repeat center/100% url(../../static/images/champions.png);
												margin-right: 2rpx;
											}

											.progress-img {
												width: 30rpx;
												height: 29rpx;
												background: no-repeat center/100% url(../../static/images/progressIcon.png);
												margin-right: 2rpx;
											}

											.early-champions-txt {
												font-size: 24rpx;
												font-family: PingFangSC-Regular, PingFang SC;
												font-weight: 400;
												color: #916610;
											}
										}
									}

									.attendance-report-time-details {
										width: 212rpx;
										display: flex;
										align-items: center;
										justify-content: flex-end;
										margin: 0 0 11rpx;

										.attendance-report-time-details-item {
											font-size: 28rpx;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #F9793F;
											line-height: 40rpx;
											width: 165rpx;
											height: 40rpx;
											display: flex;
											justify-content: flex-end;
										}

										.attendance-report-time-details-icon {
											width: 21rpx;
											height: 12rpx;
											background: no-repeat center/100% url(../../static/images/arrowUp.png);
											// margin-left: 30rpx;
										}
									}

								}

								.attendance-report-details-img-item {
									display: flex;
									justify-content: flex-end;
									width: 100%;
									height: 95rpx;
									margin: 14rpx 0 0;

									.attendance-report-details-img-box {
										width: 155rpx;
										height: 95rpx;

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

					.noAttendanceReportDatail {
						height: 620rpx;
						background: #F5F7F7;
						margin: -40rpx 0 0;
						border-radius: 0 0 16rpx 16rpx;

						.noAttendanceReportDatailImg {
							margin: 78rpx 0 0 107rpx;
							width: 474rpx;
							height: 235rpx;
							background: no-repeat center/100% url(../../static/images/noAttendanceReportDatailData.png);
						}
					}

				}

				.image-dialog {
					width: 620rpx;
					height: 800rpx;

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

				.pubTalk-report-context-card-two {
					height: 506rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.call-number-bar-unit {
						margin: 0 0 28rpx 28rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						line-height: 33rpx;
					}

					#call-number-bar {
						position: relative;
						top: -110rpx;
						left: 18rpx;
						z-index: 100;
					}
				}

				.pubTalk-report-context-card-three {
					height: 537rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.call-duration-bar-unit {
						margin: 0 0 28rpx 28rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						line-height: 33rpx;
					}

					#call-duration-bar {
						position: relative;
						top: -88rpx;
						left: 28rpx;
						z-index: 100;
					}
				}

				.pubTalk-report-context-card-four {
					height: 756rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.leave-message-summary {
						height: 90rpx;
						margin: 42rpx 36rpx 0;
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);
						line-height: 45rpx;

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

						&.leave-message-less-summary {
							margin: 0 36rpx 0;
						}
					}

					.leave-message-bar-unit {
						margin: 43rpx 0 28rpx 28rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						line-height: 33rpx;
					}

					#leave-message-bar {
						position: relative;
						top: -116rpx;
						left: 18rpx;
						z-index: 100;
					}
				}

				.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;
							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;
							margin: 0 74rpx 0;

							.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;
						padding-left: 100rpx;

						.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;

							&.consume-des {
								margin: 0 64rpx 0 74rpx;
							}
						}
					}
				}

				.school-report-context-card-five {
					height: 634rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					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: 558rpx;
						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: 40rpx 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%;
			position: absolute;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 38%, #FFFFFF 100%);
			padding: 309rpx 30rpx 63rpx;
			box-sizing: border-box;
			z-index: 101;

			.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;

					&.consume-open-results-title {
						background: url(../../static/images/consumeOpenbgm.png) center/100% no-repeat;
					}
				}

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

					&.consume-open-results-items {
						padding: 44rpx 0 0 34rpx;
						box-sizing: border-box;
						height: 473rpx;
					}

					.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;
						}

						.attendance-report-icon {
							margin: 0 35rpx 0 134rpx;
						}

						.pubTalk-report-icon {
							margin: 0 35rpx 0 102rpx;
						}
					}

					.consume-open-results-items-details {
						.consume-open-results-items-details-item {
							display: flex;
							height: 80rpx;
							margin: 0 0 55rpx;

							.details-item-left {
								width: 313rpx;

								.details-item-up {
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #13664C;
									line-height: 40rpx;
								}

								.details-item-down {
									display: flex;
									align-items: center;

									.details-item-down-txt {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: rgba(19, 102, 76, 0.7);
										line-height: 33rpx;
									}

									.dining-situations-img {
										width: 26rpx;
										height: 21rpx;
										background: no-repeat center/100% url(../../static/images/repast.png);
									}

									.meal-pal-img {
										width: 26rpx;
										height: 22rpx;
										background: no-repeat center/100% url(../../static/images/mealPal.png);
									}

									.consumer-num-img {
										width: 22rpx;
										height: 25rpx;
										background: no-repeat center/100% url(../../static/images/consumerNum.png);
									}

									.consumer-preference-img {
										width: 25rpx;
										height: 23rpx;
										background: no-repeat center/100% url(../../static/images/consumerPreference.png);
									}

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

									.time-trends-img {
										width: 25rpx;
										height: 25rpx;
										background: no-repeat center/100% url(../../static/images/timeTrends.png);
									}
								}
							}
						}
					}

					.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;
							}

							// 出入校报告
							.admission-notice-img {
								width: 30rpx;
								height: 27rpx;
								background: no-repeat center/100% url(../../static/images/admissionNotice.png);
								margin-right: 23rpx;
							}

							.admission-analysis-img {
								width: 30rpx;
								height: 32rpx;
								background: no-repeat center/100% url(../../static/images/admissionAnalysis.png);
								margin: 0 25rpx 0 135rpx;
							}

							.admission-record-img {
								width: 29rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/admissionRecord.png);
								margin-right: 24rpx;
							}

							.admission-image-img {
								width: 29rpx;
								height: 29rpx;
								background: no-repeat center/100% url(../../static/images/admissionImage.png);
								margin-right: 24rpx;
							}

							// 公话报告
							.video-call-img {
								width: 31rpx;
								height: 24rpx;
								background: no-repeat center/100% url(../../static/images/videoCall.png);
								margin-right: 21rpx;
							}

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

							.voice-call-img {
								width: 25rpx;
								height: 34rpx;
								background: no-repeat center/100% url(../../static/images/voiceCall.png);
								margin-right: 26rpx;
							}

							.call-count-img {
								width: 30rpx;
								height: 30rpx;
								background: no-repeat center/100% url(../../static/images/callCount.png);
								margin: 0 31rpx 0 165rpx;
							}

							.leave-word-img {
								width: 30rpx;
								height: 28rpx;
								background: no-repeat center/100% url(../../static/images/leaveWord.png);
								margin-right: 22rpx;
							}

							.call-duration-img {
								width: 31rpx;
								height: 35rpx;
								background: no-repeat center/100% url(../../static/images/callDuration.png);
								margin: 0 23rpx 0 165rpx;
							}

							.face-call-img {
								width: 32rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/faceCall.png);
								margin-right: 21rpx;
							}

							.leave-word-analysis-img {
								width: 31rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/leaveWordAnalysis.png);
								margin: 0 23rpx 0 165rpx;
							}
						}
					}
				}
			}
		}

	}
</style>
