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

            <view class="school-report-context-card-two">
              <view class="school-report-context-card-title">
                <view class="school-report-context-card-title-img">
                  <text>就餐情况</text>
                </view>
              </view>
              <view class="school-report-context-card-two-conclusion">
                <view class="school-report-context-card-two-conclusion-txt">
                  <text
                    >本{{ ["月", "周"][reportTypeIndex] }}共<text
                      class="abnormal-days"
                      >{{ diningSituations.notRepastDay }}</text
                    >天就餐异常</text
                  >
                </view>
                <view class="school-report-context-card-two-conclusion-logo">
                  <view
                    class="school-report-context-card-two-conclusion-logo-item"
                  >
                    <view
                      class="
                        school-report-context-card-two-conclusion-logo-item-dot
                      "
                    >
                    </view>
                  </view>
                  <view
                    class="
                      school-report-context-card-two-conclusion-logo-item
                      school-report-context-card-two-conclusion-logo-item-right
                    "
                  >
                    <text>未就餐</text>
                  </view>
                </view>
              </view>
              <view class="school-report-context-card-two-calendar">
                <van-calendar
                  :formatter="formatter"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :default-date="minDate"
                  :show-title="false"
                  :show-subtitle="false"
                  :show-mark="false"
                  :poppable="false"
                  :show-confirm="false"
                  :style="{ height: '575rpx' }"
                  @select="dateSelect"
                />
              </view>
              <view class="school-report-context-card-two-details">
                <view class="school-report-context-card-two-details-item">
                  <view class="school-report-context-card-two-details-date">
                    <text>{{ diningSituations.diningSituationsDate }}</text>
                  </view>
                  <view class="school-report-context-card-two-details-meal">
                    <view
                      class="school-report-context-card-two-details-meal-txt"
                    >
                      <text>早餐</text>
                    </view>
                    <view
                      class="school-report-context-card-two-details-meal-logo"
                    >
                      <view
                        v-if="diningSituations.notRepastDetails.breakfastStatus"
                        class="school-report-context-card-two-details-meal-img"
                      >
                        <image
                          src="../../static/images/eatted.png"
                          mode=""
                        ></image>
                      </view>
                      <view
                        v-else
                        class="
                          school-report-context-card-two-details-meal-noeat
                        "
                      >
                        <text>缺</text>
                      </view>
                    </view>
                    <view
                      class="school-report-context-card-two-details-meal-txt"
                    >
                      <text>中餐</text>
                    </view>
                    <view
                      class="
                        school-report-context-card-two-details-meal-logo
                        school-report-context-card-two-details-meal-logo-two
                      "
                    >
                      <view
                        v-if="diningSituations.notRepastDetails.lunchStatus"
                        class="school-report-context-card-two-details-meal-img"
                      >
                        <image
                          src="../../static/images/eatted.png"
                          mode=""
                        ></image>
                      </view>
                      <view
                        v-else
                        class="
                          school-report-context-card-two-details-meal-noeat
                        "
                      >
                        <text>缺</text>
                      </view>
                    </view>
                    <view
                      class="school-report-context-card-two-details-meal-txt"
                    >
                      <text>晚餐</text>
                    </view>
                    <view
                      class="
                        school-report-context-card-two-details-meal-logo
                        school-report-context-card-two-details-meal-logo-three
                      "
                    >
                      <view
                        v-if="diningSituations.notRepastDetails.supperStatus"
                        class="school-report-context-card-two-details-meal-img"
                      >
                        <image
                          src="../../static/images/eatted.png"
                          mode=""
                        ></image>
                      </view>
                      <view
                        v-else
                        class="
                          school-report-context-card-two-details-meal-noeat
                        "
                      >
                        <text>缺</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="isOpen" class="school-report-context-card-three">
              <view class="school-report-context-card-title">
                <view class="school-report-context-card-title-img">
                  <text>消费偏好</text>
                </view>
              </view>
              <view class="school-report-context-card-three-conclusion">
                <view class="school-report-context-card-three-conclusion-item">
                  <text v-if="isEatLow"
                    >食堂消费占比<text
                      class="
                        school-report-context-card-three-conclusion-item-describe
                      "
                      >过低</text
                    >,请及时调整饮食习惯</text
                  >
                  <text v-else
                    >饮食较<text
                      class="
                        school-report-context-card-three-conclusion-item-describe
                      "
                      >均衡</text
                    >，继续保持哦</text
                  >
                </view>
              </view>
              <view id="consumer-preferences-pie"> </view>
            </view>
            <view v-if="isOpen" class="school-report-context-card-four">
              <view class="school-report-context-card-title">
                <view class="school-report-context-card-title-img">
                  <text>消费总额</text>
                </view>
              </view>
              <view class="school-report-context-card-four-conclusion">
                <view class="school-report-context-card-four-conclusion-item">
                  <text
                    >消费总额<text class="consume-total">{{
                      consumerAmountObj.consumerAmount
                    }}</text
                    >元，超过全校<text class="consume-total"
                      >{{ consumerAmountObj.exceedRate }}%</text
                    >的同学<text v-if="isReasonable"
                      >，请及时评估生活费是否合理</text
                    ></text
                  >
                </view>
              </view>
              <view class="consume-total-img">
                <view
                  class="school-average"
                  :style="{ height: schoolAverageHeight + 'rpx' }"
                >
                  <view class="school-average-num">
                    <text>{{ consumerAmountObj.schoolAmount }}</text>
                  </view>
                  <view class="school-average-img">
                    <image
                      src="../../static/images/greenArrow.png"
                      mode=""
                    ></image>
                  </view>
                </view>
                <view
                  class="user-consume"
                  :style="{ height: userConsumeHeight + 'rpx' }"
                >
                  <view class="user-consume-num">
                    <text>{{ consumerAmountObj.consumerAmount }}</text>
                  </view>
                  <view class="user-consume-img">
                    <image
                      src="../../static/images/yellowArrow.png"
                      mode=""
                    ></image>
                  </view>
                </view>
              </view>
              <view class="consume-total-img-des">
                <view class="consume-total-img-des-item school-average-des">
                  <text>全校平均</text>
                </view>
                <view class="consume-total-img-des-item">
                  <text>本人消费</text>
                </view>
              </view>
            </view>
            <view v-if="isOpen" class="school-report-context-card-five">
              <view class="school-report-context-card-title">
                <view class="school-report-context-card-title-img">
                  <text>消费趋势</text>
                </view>
              </view>
              <view class="school-report-context-card-five-conclusion">
                <view class="school-report-context-card-five-conclusion-item">
                  <text v-if="isAbnormal"
                    ><text class="abnormal-date">{{ consumerTrend.clues }}</text
                    >的消费金额存在异常,请及时关注</text
                  >
                  <text v-else>每日消费金额较稳定，继续保持哦</text>
                </view>
              </view>
              <view id="consumer-trend-line"> </view>
              <view class="consumer-trend-line-icon">
                <view class="consumer-trend-line-icon-item">
                  <view class="consumer-trend-line-icon-logo">
                    <view class="consumer-trend-line-icon-logo-left"> </view>
                    <view class="consumer-trend-line-icon-logo-middle"> </view>
                    <view class="consumer-trend-line-icon-logo-right"> </view>
                  </view>
                  <view class="consumer-trend-line-icon-txt">
                    <text>消费金额</text>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="isOpen" class="school-report-footer">
              <view class="school-report-footer-item">
                <view class="school-report-footer-item-txt">
                  <text>到期后将无法查看完整报告</text>
                </view>
                <view class="school-report-validity">
                  <text
                    >有效期至<text class="validity-date">{{
                      memberInfo.invalidDateStr
                    }}</text
                    >,剩余<text class="validity-date"
                      >{{ memberInfo.differDay }}天</text
                    ></text
                  >
                </view>
              </view>
              <view class="school-report-footer-item-two">
                <view class="school-report-footer-item-btn" @tap="equityPay">
                  <text>延长权益</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="!isOpen" class="no-open">
          <view class="no-open-solution" @tap="equityPay">
            <view class="no-open-solution-txt">
              <text
                >最低
                {{ memberInfo.leastAmount }}元/天开通，查看完整消费报告</text
              >
            </view>
            <view class="no-open-solution-item"> </view>
          </view>
          <view class="open-results">
            <view class="open-results-title">
              <text>开通后，你将解锁</text>
            </view>
            <view class="open-results-items">
              <view class="open-results-items-summary">
                <view class="summary-item">
                  <text>月度消费报告</text>
                </view>
                <view class="summary-item-icon">
                  <text>+</text>
                </view>
                <view class="summary-item">
                  <text>消费总结</text>
                </view>
              </view>
              <view class="open-results-items-details">
                <view class="open-results-items-details-item">
                  <view class="dining-situations-img"> </view>
                  <view class="open-results-items-details-item-txt">
                    <text>就餐情况分析</text>
                  </view>
                  <view class="consumer-rationality-img"> </view>
                  <view class="open-results-items-details-item-txt">
                    <text>消费合理性</text>
                  </view>
                </view>
                <view class="open-results-items-details-item">
                  <view class="consumer-preference-img"> </view>
                  <view class="open-results-items-details-item-txt">
                    <text>消费偏好分析</text>
                  </view>
                  <view class="consumer-advice-img"> </view>
                  <view class="open-results-items-details-item-txt">
                    <text>消费建议</text>
                  </view>
                </view>
                <view class="open-results-items-details-item">
                  <view class="consumer-num-img"> </view>
                  <view class="open-results-items-details-item-txt">
                    <text>消费总额分析</text>
                  </view>
                </view>
                <view class="open-results-items-details-item">
                  <view class="consumer-trend-img"> </view>
                  <view class="open-results-items-details-item-txt">
                    <text>消费趋势分析</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="nodata" @click="initData">
        <view class="nodataImg">
          <img style="width: 35vw" :src="nodataImgUrl + 'images/1.png'" />
        </view>
        <view class="nodataTxt">
          <text>当前为使用高峰期，请点击加载更多数据</text>
        </view>
      </view>
      <van-dialog
        class="htmlCanvas"
        id="htmlCanvas"
        ref="imgCanvas"
        v-model="dialogShow"
        show-cancel-button
        style="width: 100%; max-height: 80% !important; overflow: scroll"
      >
      </van-dialog>
    </view>
  </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,
      userInfo: {},
      reportTypeIndex: 0,
      reportTypeArr: ["月报", "周报"],
      dataRangeIndex: 0,
      nodataImgUrl: this.$ImgUrl,
      dataRangeArr: [
        {
          week: "",
          weekstr: "",
          startDate: "",
          endDate: "",
        },
      ],
      minDate: new Date("1970/01/01"),
      maxDate: new Date(),
      imgUrl: "", // 存储base64图片
      dialogShow: false,
      // 就餐情况
      diningSituations: {
        diningSituationsDate: "",
        diningSituationsRequestDate: "",
        notRepastDay: "",
        notRepastDetails: {},
        notRepastDetailsDTOS: [],
        cateringLevel: "",
        notCateringNumber: "",
        notCateringType: "",
      },
      // 消费偏好
      pieDatas: [],
      isEatLow: false,
      // 消费总额
      consumerAmountObj: {},
      isReasonable: false,
      schoolAverageHeight: "",
      userConsumeHeight: "",
      // 消费趋势
      consumerTrend: {},
      isAbnormal: false,
      lineDatas: [],
      // 会员信息
      isOpen: false,
      memberInfo: {
        leastAmount: "",
        invalidDateStr: "",
        differDay: "",
      },
      containerHeight: "",
    };
  },
  mounted() {
	  this.initData()
  },
  methods: {
    initData() {
	//   console.log(this.isPeakPeriod(), '是否在高峰期内')
      // 判断是否在高峰期内
      if (this.isPeakPeriod()) {
        this.showReport = false;
      } else {
        this.showReport = true;
        this.queryIsDredgeMember().then(() => {
          if (this.isOpen) {
            this.queryMemberValidTime().then((e) => {
              if (
                new Date(this.memberInfo.invalidDate).getTime() <=
                new Date("2022/06/30").getTime()
              ) {
                this.isOpen = true;
                this.memberInfo.invalidDateStr = "2022年6月30日";
                this.memberInfo.differDay = dayjs("2022/06/30").diff(
                  dayjs(),
                  "day"
                );
                this.containerHeight = 4200;
                this.queryStudentConsumerPreference(1).then((e) =>
                  this.piechart()
                );
                this.queryDayConsumerTrend(1).then((e) =>
                  this.linechart(this.reportTypeIndex)
                );
              } else {
                this.queryIsDredgeMember(1).then(() => {
                  if (this.isOpen) {
                    this.queryStudentConsumerPreference(1).then((e) =>
                      this.piechart()
                    );
                    this.queryDayConsumerTrend(1).then((e) =>
                      this.linechart(this.reportTypeIndex)
                    );
                  } else {
                    this.queryStudentConsumerPreference();
                    this.queryDayConsumerTrend();
                  }
                });
              }
            });
          } else {
            if (new Date().getTime() <= new Date("2022/06/30").getTime()) {
              this.isOpen = true;
              this.memberInfo.invalidDateStr = "2022年6月30日";
              this.memberInfo.differDay = dayjs("2022/06/30").diff(
                dayjs(),
                "day"
              );
              this.containerHeight = 4200;
              this.queryStudentConsumerPreference(1).then((e) =>
                this.piechart()
              );
              this.queryDayConsumerTrend(1).then((e) =>
                this.linechart(this.reportTypeIndex)
              );
            } else {
              this.queryIsDredgeMember(1).then(() => {
                if (this.isOpen) {
                  this.queryStudentConsumerPreference(1).then((e) =>
                    this.piechart()
                  );
                  this.queryDayConsumerTrend(1).then((e) =>
                    this.linechart(this.reportTypeIndex)
                  );
                } else {
                  this.queryStudentConsumerPreference();
                  this.queryDayConsumerTrend();
                }
              });
            }
          }
        });
        let tmpArr = [];
        // 获取时间
        for (let i = 0; i <= 11; i++) {
          let startWeek = dayjs().subtract(i, "month").startOf("month");
          let endWeek =
            dayjs().$d.getTime() >
            dayjs().subtract(i, "month").endOf("month").$d.getTime()
              ? dayjs().subtract(i, "month").endOf("month")
              : dayjs();
          tmpArr.push({
            week:
              startWeek.format("YYYY/MM/DD") +
              "~" +
              endWeek.format("YYYY/MM/DD"),
            weekstr: startWeek.format("MM/DD") + "~" + endWeek.format("MM/DD"),
            startDate: startWeek.format("YYYY-MM-DD"),
            endDate: endWeek.format("YYYY-MM-DD"),
          });
        }
        this.dataRangeArr = tmpArr;
        this.minDate = new Date(
          this.dataRangeArr[this.dataRangeIndex].startDate
        );
        this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
        this.diningSituations.diningSituationsRequestDate =
          this.dataRangeArr[this.dataRangeIndex].startDate;
        this.diningSituations.diningSituationsDate = this.formatDate(
          this.minDate
        );
        this.queryCampusStudentInfo();
        let tmpDate = this.formatDateTwo(this.minDate);
        this.queryNotRepastDetails(
          this.dataRangeArr[this.dataRangeIndex].startDate,
          this.dataRangeArr[this.dataRangeIndex].endDate
        ).then(() => {
          let today = this.diningSituations.notRepastDetailsDTOS.filter(
            (e) => e.repastDate === tmpDate
          )[0];
          this.diningSituations.notRepastDetails = today;
        });
        this.queryConsumerTrend();
      }
    },
    // 当天6：30 ~ 9：00，11：30 ~ 12：00， 17：30 ~ 19：00属于高峰期
    isPeakPeriod() {
      let first = this.timeIn("06:30:00", "09:00:00");
      let second = this.timeIn("11:00:00", "12:00:00");
      let three = this.timeIn("17:30:00", "19:00:00");
      console.log(first, "first", second, "second", three, "three");
      return first || second || three;
    },
    /*在某段时间内*/
    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;
    },
    toImage: function () {
      this.$nextTick(() => {
        html2cancas(document.getElementsByClassName("tainer")[0], {
          useCORS: true,
        }).then((canvas) => {
          let htmlCanvas = document.getElementById("htmlCanvas");
          let url = canvas.toDataURL("image/png");
          this.imgUrl = url;
          let img = document.createElement("img");
          img.setAttribute("src", this.imgUrl);
          img.setAttribute("class", "htmlCanvasImg");
          img.style.width = "100vw";
          htmlCanvas.appendChild(img);
        });
      });
    },
    shareHandler: function () {
      let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
      if (htmlCanvasImg) {
        htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
      }
      this.toImage();
      this.dialogShow = true;
    },
    schoolReportChange: function (e) {
      this.reportTypeIndex = e.target.value;
      this.getDataRangeArr(this.reportTypeIndex);
    },
    dataRangeChange: function (e) {
      this.dataRangeIndex = e.target.value;
      this.getDataRangeArr(this.reportTypeIndex);
    },
    getDataRangeArr: function (num) {
      if (num) {
        let tmpArr = [];
        for (let i = 1; i <= 52; i++) {
          let startWeek = dayjs().subtract(i, "week").startOf("week");
          let endWeek =
            dayjs().$d.getTime() >
            dayjs().subtract(i, "week").endOf("week").$d.getTime()
              ? dayjs().subtract(i, "week").endOf("week")
              : dayjs();
          tmpArr.push({
            week:
              startWeek.format("YYYY/MM/DD") +
              "~" +
              endWeek.format("YYYY/MM/DD"),
            weekstr: startWeek.format("MM/DD") + "~" + endWeek.format("MM/DD"),
            startDate: startWeek.format("YYYY-MM-DD"),
            endDate: endWeek.format("YYYY-MM-DD"),
          });
        }
        this.dataRangeArr = tmpArr;
      } else {
        let tmpArr = [];
        if (new Date().getDate() > 5) {
          for (let i = 0; i <= 11; i++) {
            let startWeek = dayjs().subtract(i, "month").startOf("month");
            let endWeek =
              dayjs().$d.getTime() >
              dayjs().subtract(i, "month").endOf("month").$d.getTime()
                ? dayjs().subtract(i, "month").endOf("month")
                : dayjs();
            tmpArr.push({
              week:
                startWeek.format("YYYY/MM/DD") +
                "~" +
                endWeek.format("YYYY/MM/DD"),
              weekstr:
                startWeek.format("MM/DD") + "~" + endWeek.format("MM/DD"),
              startDate: startWeek.format("YYYY-MM-DD"),
              endDate: endWeek.format("YYYY-MM-DD"),
            });
          }
        } else {
          for (let i = 1; i <= 11; i++) {
            let startWeek = dayjs().subtract(i, "month").startOf("month");
            let endWeek =
              dayjs().$d.getTime() >
              dayjs().subtract(i, "month").endOf("month").$d.getTime()
                ? dayjs().subtract(i, "month").endOf("month")
                : dayjs();
            tmpArr.push({
              week:
                startWeek.format("YYYY/MM/DD") +
                "~" +
                endWeek.format("YYYY/MM/DD"),
              weekstr:
                startWeek.format("MM/DD") + "~" + endWeek.format("MM/DD"),
              startDate: startWeek.format("YYYY-MM-DD"),
              endDate: endWeek.format("YYYY-MM-DD"),
            });
          }
        }
        this.dataRangeArr = tmpArr;
      }
      this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
      this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
      this.diningSituations.diningSituationsDate = this.formatDate(
        this.minDate
      );
      this.diningSituations.diningSituationsRequestDate =
        this.dataRangeArr[this.dataRangeIndex].startDate;
      let tmpDate = this.formatDateTwo(this.minDate);
      this.queryNotRepastDetails(
        this.dataRangeArr[this.dataRangeIndex].startDate,
        this.dataRangeArr[this.dataRangeIndex].endDate
      ).then(() => {
        let today = this.diningSituations.notRepastDetailsDTOS.filter(
          (e) => e.repastDate === tmpDate
        )[0];
        this.diningSituations.notRepastDetails = today;
      });
      this.queryConsumerTrend();
      if (this.isOpen) {
        this.queryStudentConsumerPreference(1).then((e) => this.piechart());
        this.queryDayConsumerTrend(1).then((e) =>
          this.linechart(this.reportTypeIndex)
        );
      } else {
        this.queryStudentConsumerPreference();
        this.queryDayConsumerTrend();
      }
    },
    formatter(day) {
      const year = day.date.getFullYear();
      const month = day.date.getMonth() + 1;
      const monthstr = month < 10 ? "0" + month : month;
      const date = day.date.getDate();
      const datestr = date < 10 ? "0" + date : date;
      const sum = year + "-" + monthstr + "-" + datestr;
      const contrastList = this.diningSituations.notRepastDetailsDTOS.filter(
        (e) => e.dayNotEatNumber != 0
      );
      contrastList.forEach((item) => {
        if (sum == item.repastDate) {
          const breakfastTxt = item.breakfastStatus ? "" : "早";
          const lunchTxt = item.lunchStatus ? "" : "中";
          const supperTxt = item.supperStatus ? "" : "晚";
          day.topInfo = breakfastTxt + lunchTxt + supperTxt;
          day.className = "notice-day";
        }
      });
      return day;
    },
    formatDate(date) {
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    },
    formatDateTwo(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
      }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
    },
    dateSelect(date) {
      this.diningSituations.diningSituationsDate = this.formatDate(date);
      var dateStr = `${date.getFullYear()}-${
        date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
      }-${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}`;
      let today = this.diningSituations.notRepastDetailsDTOS.filter(
        (e) => e.repastDate === dateStr
      )[0];
      this.diningSituations.notRepastDetails = today;
    },
    piechart: function () {
      var myChart = echarts.init(
        document.getElementById("consumer-preferences-pie")
      );
      var option = {
        tooltip: {
          trigger: "item",
        },
        series: this.pieDatas.map(function (data, idx) {
          return {
            type: "pie",
            radius: ["33", "58"],
            data: data,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 3,
            },
            label: {
              formatter: function (e) {
                return e.name + "\n" + e.value + "元";
              },
              padding: [0, 2],
              rich: {
                color: "rgba(0, 0, 0, 0.85)",
                fontSize: 12,
                fontFamily: "PingFangSC-Regular, PingFang SC",
                fontWeight: 400,
                lineHeight: 17,
              },
            },
          };
        }),
        color: ["#00C47C", "#F6C723", "#FF8646"],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 获取某月的所有周六
    getMonthSaturdayDate: function (year, month) {
      const lastDay = new Date(year, month, 0).getDate();
      const startDay = new Date(year, month, 1).getDate();
      const allDate = [];
      for (var i = startDay; i <= lastDay; i++) {
        allDate[i - 1] =
          i < 10
            ? year + "-" + month + "-" + "0" + i
            : year + "-" + month + "-" + i;
      }
      const saturdayDate = allDate.filter((e) => {
        const date = new Date(e);
        if (date.getDay() == 6) {
          return true;
        }
      });
      return saturdayDate;
    },
    linechart: function (num) {
      var mySize = document.getElementById("consumer-trend-line");
      mySize.style.width = 360 + "px";
      mySize.style.height = 260 + "px";
      var myChart = echarts.init(mySize);
      var xdata = this.lineDatas.map((v) => v.name);
      var year = this.dataRangeArr[this.dataRangeIndex].startDate.slice(0, 4);
      var month = this.dataRangeArr[this.dataRangeIndex].startDate.slice(5, 7);
      var saturdayList = this.getMonthSaturdayDate(year, month);
      switch (num) {
        case 0:
          var seriesData = [];
          this.lineDatas.map((v) => {
            if (v.isException == 1) {
              if (
                v.date == this.formatDateTwo(new Date(year, month, 0)) ||
                saturdayList.includes(v.date)
              ) {
                seriesData.push(
                  Object.assign(v, {
                    itemStyle: {
                      color: "#0BDB7E",
                      borderWidth: 1.5,
                    },
                  })
                );
              } else {
                seriesData.push(
                  Object.assign(v, {
                    itemStyle: {
                      color: "#0BDB7E",
                      borderWidth: 1.5,
                    },
                    symbol: "none",
                  })
                );
              }
            } else {
              if (
                v.date == this.formatDateTwo(new Date(year, month, 0)) ||
                saturdayList.includes(v.date)
              ) {
                seriesData.push(
                  Object.assign(v, {
                    itemStyle: {
                      color: "#FF8646",
                      borderWidth: 1.5,
                    },
                  })
                );
              } else {
                seriesData.push(
                  Object.assign(v, {
                    itemStyle: {
                      color: "#FF8646",
                      borderWidth: 1.5,
                    },
                    symbol: "none",
                  })
                );
              }
            }
          });
          break;
        case 1:
          var seriesData = [];
          this.lineDatas.map((v) => {
            if (v.isException == 1) {
              seriesData.push(
                Object.assign(v, {
                  itemStyle: {
                    color: "#0BDB7E",
                    borderWidth: 1.5,
                  },
                })
              );
            } else {
              seriesData.push(
                Object.assign(v, {
                  itemStyle: {
                    color: "#FF8646",
                    borderWidth: 1.5,
                  },
                })
              );
            }
          });
          break;
      }
      var option = {
        xAxis: {
          type: "category",
          data: xdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: seriesData,
            type: "line",
            smooth: true,
            areaStyle: {
              color:
                "linear-gradient(180 deg, #0DDE7E 0%, rgba(4, 205, 124, 0) 100%)",
              opacity: 0.2,
            },
            lineStyle: {
              color: "#0BDB7E",
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "transparent",
            },
          },
          extraCssText: `width:109px;height:55px;line-height:33rpx;background: no-repeat center/100% url(./static/images/consumeTrendbgm.png);
							font-size:24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;
							color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
          confine: true,
          position: function (pt) {
            return [pt[0] - 27, pt[1] - 73];
          },
          formatter: function (data) {
            let desp = ["", "消费金额偏高", "消费金额偏低"][
              data[0].data.isException - 1
            ];
            return data[0].name + "消费" + data[0].value + "元" + "<br>" + desp;
          },
        },
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 查询学生信息
    async queryCampusStudentInfo() {
      try {
        let data = await this.$http.get(
          {
            url:
              gHost +
              "/report-push/campus-consumer-report/queryCampusStudentInfo",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        this.userInfo = data.obj;
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    // 查询就餐情况
    async queryNotRepastDetails(startDate, endDate) {
      try {
        let data = await this.$http.get(
          {
            url:
              gHost +
              "/report-push/campus-consumer-report/queryNotRepastDetails",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            startDate,
            endDate,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        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,
        });
      }
    },
    // 查询学生消费偏好类型
    async queryStudentConsumerPreference(num) {
      try {
        let data = await this.$http.get(
          {
            url:
              gHost +
              "/report-push/campus-consumer-report/queryStudentConsumerPreference",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
            endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        const tmpObj = data.obj;
        this.isEatLow =
          tmpObj.canteenAmount / tmpObj.grossAmount < 0.5 ? true : false;
        if (num) {
          this.pieDatas = [
            [
              {
                name: "食堂",
                value: tmpObj.canteenAmount,
              },
              {
                name: "超市",
                value: tmpObj.supermarketAmount,
              },
              {
                name: "其他",
                value: tmpObj.otherAmount,
              },
            ],
          ];
        }
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    // 查询消费总额
    async queryConsumerTrend() {
      try {
        let data = await this.$http.get(
          {
            url:
              gHost + "/report-push/campus-consumer-report/queryConsumerTrend",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
            endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        this.consumerAmountObj = data.obj;
        this.isReasonable =
          this.consumerAmountObj.exceedRate >= 40 &&
          this.consumerAmountObj.exceedRate <= 60
            ? false
            : true;
        this.schoolAverageHeight =
          this.consumerAmountObj.schoolAmount <=
          this.consumerAmountObj.consumerAmount
            ? 139
            : 192;
        this.userConsumeHeight =
          this.consumerAmountObj.consumerAmount <=
          this.consumerAmountObj.schoolAmount
            ? 139
            : 192;
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    // 日消费趋势
    async queryDayConsumerTrend(num) {
      try {
        let data = await this.$http.get(
          {
            url:
              gHost +
              "/report-push/campus-consumer-report/queryDayConsumerTrend",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
            endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        var exceptionDate = data.obj.exceptionDate;
        this.isAbnormal = exceptionDate.length ? true : false;
        var clues = "";
        exceptionDate.forEach((item, index) =>
          item.slice(5, 6) == "0"
            ? (clues +=
                item.slice(6, 7) +
                "月" +
                item.slice(8, 10) +
                "日" +
                (index == exceptionDate.length - 1 ? "" : "、"))
            : (clues +=
                item.slice(5, 7) +
                "月" +
                item.slice(8, 10) +
                "日" +
                (index == exceptionDate.length - 1 ? "" : "、"))
        );
        this.consumerTrend.clues = clues;
        if (num) {
          var lineDatas = data.obj.dayConsumerAmount.map((item) =>
            Object.assign(item, {
              value: item.consumerAmount,
              name: item.date.slice(5),
            })
          );
          this.lineDatas = lineDatas;
        }
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    // 是否开通消费报告
    async queryIsDredgeMember(num) {
      try {
        let data = await this.$http.get(
          {
            url: gHost + "/report-push/member-info/queryIsDredgeMember",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            serviceItemCode: 4001,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        this.isOpen = data.obj.status;
        if (num == 1) {
          if (this.isOpen) {
            this.queryMemberValidTime();
            this.containerHeight = 4200;
          } else {
            this.queryMemberConsumerAmount();
            this.containerHeight = 2340;
          }
        }
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    // 查询会员消费金额
    async queryMemberConsumerAmount() {
      try {
        let data = await this.$http.get(
          {
            url: gHost + "/report-push/member-info/queryMemberConsumerAmount",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            serviceItemCode: 4001,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        this.memberInfo.leastAmount = data.obj.leastAmount;
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    // 查询会员有效期
    async queryMemberValidTime() {
      try {
        let data = await this.$http.get(
          {
            url: gHost + "/report-push/member-info/queryMemberValidTime",
          },
          {
            schoolId: getQueryParams("schoolId"),
            userId: getQueryParams("userId"),
            serviceItemCode: 4001,
          }
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            mask: true,
            title: data.msg,
          });
          return;
        }
        this.memberInfo.differDay = data.obj.differDay;
        this.memberInfo.invalidDate = 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 + "日";
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          icon: "none",
          mask: true,
          title: e.message,
        });
      }
    },
    equityPay: function () {
      jWeixin.miniProgram.switchTab({
        url: `/pages/Member/main`,
        success: function success() {
          console.log("skip success");
        },
        fail: function fail(_fail) {
          console.warn(_fail);
          uni.showModal({
            content: JSON.stringify(_fail),
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scope>
.nodata {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 100%;
  transform: translate(-50%, 0);
  .nodataImg {
    width: 100%;
    text-align: center;
  }

  .nodataTxt {
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
}
.tainer {
  .school-report-header {
    height: 88rpx;
    margin: 72rpx 0 48rpx 40rpx;
    display: flex;
    justify-content: space-between;

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

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

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

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

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

      .school-report-screen {
        display: flex;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .school-report-context-card-two-calendar {
          height: 575rpx;
          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, 0.1);
            color: #f9793f;
            display: flex;
            align-items: flex-end;
            border-radius: 22rpx;
            width: 88rpx;
            height: 88rpx;
          }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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