<template>
  <div class="main">
    <div
      :class="
        selectFestival === 1 || selectFestival === 2
          ? 'top springTop'
          : selectFestival === 3
          ? 'top qmTop'
          : selectFestival === 4
          ? 'top labourTop'
          : selectFestival === 5
          ? 'top dragonBoatTop'
          : selectFestival === 6
          ? 'top summerHolidayTop'
          : selectFestival === 7
          ? 'top midAutumnTop'
          : selectFestival === 8
          ? 'top nationalDayTop'
          : ''
      "
    >
      <div
        :class="
          selectFestival === 1 || selectFestival === 2
            ? 'header headerSpring'
            : selectFestival === 3
            ? 'header headerQm'
            : selectFestival === 4
            ? 'header headerlabour'
            : selectFestival === 5
            ? 'header headerDragonBoat'
            : selectFestival === 6
            ? 'header headerSummerHoliday'
            : selectFestival === 7
            ? 'header headerMidAutumn'
            : selectFestival === 8
            ? 'header headerNationalDay'
            : ''
        "
        :style="{ height: menu.height + menu.top + 'px', top: 0 + 'px' }"
      >
        <image
          :style="{ bottom: (statusBarHeight - 24) / 4 + 'px' }"
          class="backArrow"
          src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"
          @click="handleBack"
        />
        <!--        <img :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="detailIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverPartDetail.png">-->
        <div v-if="showSpring" class="picker" @click="handleGoMap">
          <div class="selectService">
            <image
              class="img"
              src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"
            ></image>
            <view class="select">
              <view class="content">
                <view class="uni-input">{{
                  springService.SERVERPART_NAME
                }}</view>
                <p class="area" v-if="springService.Serverpart_ID">
                  {{ springService.SPREGIONTYPE_NAME }}
                </p>
                <image
                  class="rightArrow"
                  src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"
                ></image>
              </view>
            </view>
          </div>
        </div>

        <view
          v-else
          class="seachBox"
          :style="{ height: menu.height + 'px' }"
          @click="handleGoMap"
        >
          <image class="searchIcon" src="/static/images/seach/searchIcon.svg" />
          <text class="searchText">请输入想看的服务区</text>
        </view>
      </div>

      <!--      <scroll-view :style="{top:menu.bottom + 24 + 'px' }" scroll-x="true" class="headerNavList" :scrollIntoView="currentServerPart" :scroll-with-animation="true">-->
      <!--        <div :class="currentServerPart==='ServerPart'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in ServerpartList" :key="index" :id="'ServerPart'+item.value" @click="handleChangeServerPart(item.value)">{{item.name.split('服务区')[0]}}</div>-->
      <!--      </scroll-view>-->
    </div>
    <div class="contentPage">
      <div
        :class="
          selectFestival === 1 || selectFestival === 2
            ? 'contentTop springContentTop'
            : selectFestival === 3
            ? 'contentTop qmContentTop'
            : selectFestival === 4
            ? 'contentTop labourContentTop'
            : selectFestival === 5
            ? 'contentTop dragonBoatContentTop'
            : selectFestival === 6
            ? 'contentTop summerHolidayContentTop'
            : selectFestival === 7
            ? 'contentTop midAutumnContentTop'
            : selectFestival === 8
            ? 'contentTop nationalDayContentTop'
            : ''
        "
      >
        <div class="content">
          <div class="left">
            <!--            <img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png"/>-->
            <img
              class="detailLogo"
              :src="
                selectFestival === 1 || selectFestival === 2
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png'
                  : selectFestival === 3
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmServicepartDetail.png'
                  : selectFestival === 4
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourServerPartDetail.png'
                  : selectFestival === 5
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatDetail.png'
                  : selectFestival === 6
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayDetail.png'
                  : selectFestival === 7
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnDetail.png'
                  : selectFestival === 8
                  ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayDetail.png'
                  : ''
              "
            />
            <!--          <text class="modalUnit">{{selectDateText || ''}}</text>-->
            <!--          <text class="modalUnit">{{`/统计到${allDateDay || ''}`}}</text>-->
          </div>
          <div class="right">
            <div class="typeChangeBox">
              <div
                :class="pageType === 1 ? 'normal select' : 'normal'"
                @click="handleChangeType(1)"
              >
                按天统计
              </div>
              <div
                :class="pageType === 2 ? 'normal select' : 'normal'"
                @click="handleChangeType(2)"
              >
                累计统计
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="contentBox">
        <div class="navBigList" v-if="pageType === 1">
          <!--            <div class="allBox">-->
          <!--              <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>-->
          <!--            </div>-->
          <scroll-view
            scroll-x="true"
            :class="
              selectFestival === 1 || selectFestival === 2
                ? 'navList springNav'
                : selectFestival === 3
                ? 'navList qmNav'
                : selectFestival === 4
                ? 'navList labourNav'
                : selectFestival === 5
                ? 'navList dragonBoatNav'
                : selectFestival === 6
                ? 'navList summerHolidayNav'
                : selectFestival === 7
                ? 'navList midAutumnNav'
                : selectFestival === 8
                ? 'navList nationalDayNav'
                : ''
            "
            :scrollIntoView="currentScroll"
            :scroll-with-animation="true"
          >
            <div
              :class="
                currentScroll === 'item' + item.value
                  ? 'scrollItem selectItem'
                  : 'scrollItem'
              "
              v-for="(item, index) in scrollList"
              :key="index"
              :id="'item' + item.value"
              @click="handleChangeTime(item.value)"
            >
              {{ item.label }}
            </div>
          </scroll-view>
        </div>
        <view class="sortBox">
          <view
            class="sortItem"
            style="width: 80rpx"
            @click="handleChangeSortName(1)"
          >
            <text class="sortText">排序</text>
          </view>
          <view
            class="sortItem"
            :style="{
              width: 'calc(100% - 410rpx)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
            }"
            @click="handleChangeSortName(1)"
          >
            <!--            <text class="sortText">{{ `24年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>-->
            <text class="sortText">{{
              `${curYear.toString().slice(2, 4)}年`
            }}</text>
            <view class="sortIconBox" style="margin-right: 60rpx">
              <image
                class="upIcon"
                :style="{
                  transform:
                    sortName === 1
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : ``,
                }"
                :src="
                  sortType === 1
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                    : sortName === 1
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
              <image
                class="bottomIcon"
                :style="{
                  transform:
                    sortName === 1
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : 'rotate(-180deg)',
                }"
                :src="
                  sortType === 1 && sortName === 1
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
            </view>
          </view>

          <view
            class="sortItem"
            style="width: 110rpx"
            @click="handleChangeSortName(2)"
          >
            <!--            <text class="sortText">{{ `23年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>-->
            <text class="sortText">{{
              `${compareYear.toString().slice(2, 4)}年`
            }}</text>
            <view class="sortIconBox">
              <image
                class="upIcon"
                :style="{
                  transform:
                    sortName === 2
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : ``,
                }"
                :src="
                  sortType === 1
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                    : sortName === 2
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
              <image
                class="bottomIcon"
                :style="{
                  transform:
                    sortName === 2
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : 'rotate(-180deg)',
                }"
                :src="
                  sortType === 1 && sortName === 2
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
            </view>
          </view>

          <view
            class="sortItem"
            style="width: 110rpx"
            @click="handleChangeSortName(3)"
          >
            <!--            <text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增长` }}</text>-->
            <text class="sortText">{{ `增长` }}</text>
            <view class="sortIconBox">
              <image
                class="upIcon"
                :style="{
                  transform:
                    sortName === 3
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : ``,
                }"
                :src="
                  sortType === 1
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                    : sortName === 3
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
              <image
                class="bottomIcon"
                :style="{
                  transform:
                    sortName === 3
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : 'rotate(-180deg)',
                }"
                :src="
                  sortType === 1 && sortName === 3
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
            </view>
          </view>

          <view
            class="sortItem"
            style="width: 110rpx"
            @click="handleChangeSortName(4)"
          >
            <!--            <text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增幅` }}</text>-->
            <text class="sortText">{{ `增幅` }}</text>
            <view class="sortIconBox">
              <image
                class="upIcon"
                :style="{
                  transform:
                    sortName === 4
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : ``,
                }"
                :src="
                  sortType === 1
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                    : sortName === 4
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
              <image
                class="bottomIcon"
                :style="{
                  transform:
                    sortName === 4
                      ? sortType === 1
                        ? ``
                        : `rotate(180deg)`
                      : 'rotate(-180deg)',
                }"
                :src="
                  sortType === 1 && sortName === 4
                    ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg'
                    : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'
                "
              />
            </view>
          </view>
        </view>

        <div class="scrollBox">
          <scroll-view
            :scroll-y="true"
            class="typeFirst"
            v-if="dataList && dataList.length > 0"
          >
            <div
              class="listItem"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="noItem" style="width: 80rpx; align-items: center">
                <img
                  v-if="index <= 2"
                  class="noIcon"
                  :src="
                    index === 0
                      ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/first.png'
                      : index === 1
                      ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/second.png'
                      : index === 2
                      ? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/third.png'
                      : ''
                  "
                />
                <text class="noOther" v-else>{{ index + 1 }}</text>
              </div>
              <div
                class="firstItem"
                :style="{ width: 'calc(100% - 440rpx)', textAlign: 'left' }"
              >
                <div class="itemIcon">
                  <img
                    class="itemImg"
                    v-if="item.Brand_ICO"
                    :src="item.Brand_ICO"
                  />
                  <img
                    class="itemImg"
                    v-else
                    src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png"
                  />
                </div>
                <div
                  class="itemRight"
                  :style="{ width: 'calc(100% - 128rpx)' }"
                >
                  <span class="firstItemText">{{
                    item.ServerpartShopName || "-"
                  }}</span>
                  <span>{{
                    item.RevenueINC.curYearData
                      ? item.RevenueINC.curYearData < 100
                        ? `${item.RevenueINC.curYearData}(元)`
                        : $util.getMoney(item.RevenueINC.curYearData / 10000)
                      : ""
                  }}</span>
                </div>
              </div>
              <!--              <div class="item" style="width: 110rpx"></div>-->
              <div class="item" style="width: 110rpx">
                {{
                  item.RevenueINC.lYearData
                    ? item.RevenueINC.lYearData < 100
                      ? `${item.RevenueINC.lYearData}(元)`
                      : $util.getMoney(item.RevenueINC.lYearData / 10000)
                    : ""
                }}
              </div>
              <div class="item" style="width: 110rpx">
                {{
                  item.RevenueINC.increaseData
                    ? item.RevenueINC.increaseData < 100 &&
                      item.RevenueINC.increaseData > 0
                      ? `${item.RevenueINC.increaseData}(元)`
                      : $util.getMoney(item.RevenueINC.increaseData / 10000)
                    : ""
                }}
              </div>
              <div class="item" style="width: 110rpx">
                <span
                  :style="{
                    color:
                      item.RevenueINC.increaseData > 0
                        ? '#E83944'
                        : item.RevenueINC.increaseRate < 0
                        ? '#0E9976'
                        : '',
                  }"
                >
                  {{ item.RevenueINC.increaseRate > 0 ? "+" : "" }}
                </span>
                <span
                  :style="{
                    color:
                      item.RevenueINC.increaseRate > 0
                        ? '#E83944'
                        : item.RevenueINC.increaseRate < 0
                        ? '#0E9976'
                        : '',
                  }"
                >
                  {{
                    item.RevenueINC.increaseRate
                      ? item.RevenueINC.increaseRate + "%"
                      : ""
                  }}
                </span>
              </div>
            </div>
          </scroll-view>

          <view class="noDataBox" v-else>
            <img
              class="noDataImg"
              src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"
            />
            <text class="noDataText">暂无数据</text>
          </view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/util/index.js";
import moment from "moment";
export default {
  name: "merchantRevenue",
  data() {
    return {
      statusBarHeight: 0, // 胶囊按钮高度
      menu: "", // 手机属性
      pageType: 1, // 一天还是累计
      scrollList: [], // 横向滑动日期
      currentScroll: "", // 选中的日期
      lastDay: "", // 最近有效日期
      sortType: 1, // 正序降序 0正序  1降序
      sortName: 3, // 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
      dataList: [],
      type: 0, // 判断是要查询哪个数据 1销售   2营收   3车流
      ServerpartId: "", // 服务区id
      useInfo: {},
      curYear: "",
      compareYear: "",
      ServerpartList: [],
      currentServerPart: "",
      showSpring: false,
      springService: null, // 当前选中的服务区
      selectFestival: 0, // 选择的服务区
      festivalObj: {},
    };
  },
  onLoad(query) {
    console.log("query", query);
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = Number(systemInfo.statusBarHeight);
    this.menu = uni.getMenuButtonBoundingClientRect();

    if (query.ServerpartId) {
      this.ServerpartId = query.ServerpartId;
      this.currentServerPart = `ServerPart` + query.ServerpartId;
    }
    if (query.type) {
      this.type = Number(query.type);
    }
    if (query.festivalType) {
    }
    if (query.currentScroll) {
      this.currentScroll = query.currentScroll;
    }
    if (query.festivalObj) {
      this.festivalObj = JSON.parse(query.festivalObj);
    }

    this.selectFestival = this.festivalObj.HolidayType;
    this.curYear = this.festivalObj.curYear;
    this.compareYear = this.festivalObj.compareYear;
    console.log("this.festivalObj", this.festivalObj);
    this.lastDay = uni.getStorageSync("lastDay");
    const currentDate = new Date(this.lastDay);
    let nowTime = currentDate.getTime();
    let dayList = [];
    if (
      new Date(this.festivalObj.startTime).getTime() <= nowTime &&
      new Date(this.festivalObj.endTime).getTime() > nowTime
    ) {
      let dayNumber =
        moment(this.lastDay).diff(this.festivalObj.startTime, "days") + 1;
      console.log("dayNumber", dayNumber);
      if (dayNumber > 0) {
        for (let i = 0; i < dayNumber; i++) {
          dayList.push({
            label: `第${i + 1}天`,
            value: moment(this.festivalObj.startTime)
              .add(i, "days")
              .format("YYYY-MM-DD"),
          });
        }
      }
    } else if (new Date(this.festivalObj.endTime).getTime() < nowTime) {
      // 当前时间已经过了这个时间范围了
      let dayNumber =
        moment(this.festivalObj.endTime).diff(
          this.festivalObj.startTime,
          "days"
        ) + 1;
      console.log("dayNumber", dayNumber);
      if (dayNumber > 0) {
        for (let i = 0; i < dayNumber; i++) {
          dayList.push({
            label: `第${i + 1}天`,
            value: moment(this.festivalObj.startTime)
              .add(i, "days")
              .format("YYYY-MM-DD"),
          });
        }
      }
    }
    this.scrollList = dayList;
    return;

    // if (query.serverPartList){
    //   this.ServerpartList = JSON.parse(query.serverPartList)
    // }
    // 获取用户信息
    let userInfo = uni.getStorageSync("vuex");
    userInfo = JSON.parse(userInfo);
    this.useInfo = JSON.parse(JSON.stringify(userInfo));

    this.lastDay = uni.getStorageSync("lastDay");
    // this.lastDay = '2024-04-03'
    console.log("query", query);
    if (this.selectFestival === 0) {
    } else {
      this.currentScroll = "item" + this.lastDay;
    }
    // else if(this.selectFestival===1){
    //   this.currentScroll = 'item'+  this.lastDay
    // }else if (this.selectFestival===2){
    //   this.currentScroll = 'item'+ this.lastDay
    // }else if (this.selectFestival===3){
    //   this.currentScroll = 'item'+ this.lastDay
    // }

    // 拿到是春运开始的第几天
    let dayNumber = 0;
    const lastDate = new Date(this.lastDay);
    let y = lastDate.getFullYear();
    this.curYear = y;
    this.compareYear = y - 1;
    let lastMonth = lastDate.getMonth() + 1;
    let lastDays = lastDate.getDate();
    this.allDateDay = `${lastMonth < 10 ? "0" + lastMonth : lastMonth}月${
      lastDays < 10 ? "0" + lastDays : lastDays
    }日`;
    // 24年春运开始时间为 1.26
    // if (lastMonth === 1){
    //   dayNumber = lastDays - 26 + 1
    // }else{
    //   dayNumber = 6 + lastDays
    // }
    if (this.selectFestival === 0) {
      dayNumber = moment().diff("2024-01-26", "days");
      this.howDayNumber = dayNumber <= 40 ? dayNumber : 40;
    } else if (this.selectFestival === 1) {
      dayNumber = moment().diff("2024-04-03", "days");
      if (dayNumber <= 5) {
        this.howDayNumber = dayNumber;
      } else {
        this.howDayNumber = 5;
        this.currentScroll = "item" + "2024-04-07";
        this.allDateDay = "2024-04-07";
      }
    } else if (this.selectFestival === 2) {
      dayNumber = moment().diff("2024-04-30", "days"); // 劳动
      if (dayNumber <= 7) {
        this.howDayNumber = dayNumber;
      } else {
        this.howDayNumber = 7;
        this.currentScroll = "item" + "2024-05-06";
        this.lastDay = "2024-05-06";
        this.allDateDay = "2024-05-06";
      }
    } else if (this.selectFestival === 3) {
      dayNumber = moment().diff("2024-06-07", "days");
      if (dayNumber <= 5) {
        this.howDayNumber = dayNumber;
      } else {
        this.howDayNumber = 5;
        this.currentScroll = "item" + "2024-06-11";
        this.allDateDay = "2024-06-11";
      }
    } else if (this.selectFestival === 4) {
      dayNumber = moment().diff("2024-07-01", "days"); // 暑期
      if (dayNumber <= 62) {
        this.howDayNumber = dayNumber;
      } else {
        this.howDayNumber = 62;
        this.currentScroll = "item" + "2024-08-31";
        this.lastDay = "2024-08-31";
        this.allDateDay = "2024-09-01";
      }
    } else if (this.selectFestival === 5) {
      dayNumber = moment().diff("2024-09-14", "days"); // 中秋
      if (dayNumber <= 5) {
        this.howDayNumber = dayNumber;
      } else {
        this.howDayNumber = 5;
        this.currentScroll = "item" + "2024-09-18";
        this.lastDay = "2024-09-18";
        this.allDateDay = "2024-09-18";
      }
    } else if (this.selectFestival === 6) {
      dayNumber = moment().diff("2024-09-30", "days"); // 国庆
      if (dayNumber <= 9) {
        this.howDayNumber = dayNumber;
      } else {
        this.howDayNumber = 9;
        this.currentScroll = "item" + "2024-10-08";
        this.lastDay = "2024-10-08";
        this.allDateDay = "2024-10-08";
      }
    }

    let dateList = [];
    for (let i = 1; i <= this.howDayNumber; i++) {
      if (this.selectFestival === 0) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-01-25").add(i, "days").format("YYYY-MM-DD"),
        });
      } else if (this.selectFestival === 1) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-04-02").add(i, "days").format("YYYY-MM-DD"),
        });
      } else if (this.selectFestival === 2) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-04-29").add(i, "days").format("YYYY-MM-DD"),
        });
      } else if (this.selectFestival === 3) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-06-06").add(i, "days").format("YYYY-MM-DD"),
        });
      } else if (this.selectFestival === 4) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-06-30").add(i, "days").format("YYYY-MM-DD"),
        }); // 端午
      } else if (this.selectFestival === 5) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-09-13").add(i, "days").format("YYYY-MM-DD"),
        }); // 端午
      } else if (this.selectFestival === 6) {
        dateList.push({
          label: `第${i}天`,
          value: moment("2024-09-29").add(i, "days").format("YYYY-MM-DD"),
        }); // 端午
      }
      // if (i<7){
      //   dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
      // }else{
      //   dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
      // }
    }
    this.scrollList = dateList;
    console.log("dateList", dateList);
    // this.handleGetPageData()
  },
  onShow() {
    let seat = uni.getStorageSync("springService");
    if (seat) {
      this.springService = seat;
      this.showSpring = true;
      this.dataList = [];
      this.handleGetPageData();
    } else {
      this.showSpring = false;
    }
  },
  methods: {
    handleChangeType(value) {
      this.pageType = value;
      if (value === 2) {
        this.handleGetPageData("all");
      } else {
        this.handleGetPageData();
      }
    },
    handleGoMap() {
      this.$util.toNextRoute(
        "navigateTo",
        "/pages/map/index?type=springTravel"
      );
    },
    // 拿到页面表格数据
    async handleGetPageData(date) {
      uni.showLoading({
        title: "正在加载...",
      });
      let time = date
        ? date === "all"
          ? this.festivalObj.endTime
          : this.currentScroll.split("item")[1]
        : this.currentScroll.split("item")[1];
      const req = {
        calcType: this.pageType,
        pushProvinceCode: "340000",
        curYear: this.festivalObj.curYear,
        compareYear: this.festivalObj.compareYear,
        HolidayType: this.selectFestival,
        // this.selectFestival === 0
        //   ? 2
        //   : this.selectFestival === 1
        //   ? 3
        //   : this.selectFestival === 2
        //   ? 4
        //   : this.selectFestival === 3
        //   ? 5
        //   : this.selectFestival === 4
        //   ? 6
        //   : this.selectFestival === 5
        //   ? 7
        //   : this.selectFestival === 6
        //   ? 8
        //   : "",
        StatisticsDate: time,
        ServerpartId: this.springService.Serverpart_ID || this.ServerpartId,
        SortStr: `${
          this.type === 1
            ? "revenue"
            : this.type === 2
            ? "account"
            : this.type === 3
            ? "bayonet"
            : ""
        } ${this.sortType === 0 ? "asc" : "desc"}`,
      };
      // this.dataList
      const data = await request.$webGet(
        "CommercialApi/Revenue/GetShopINCAnalysis",
        req
      );
      if (data.Result_Data) {
        if (data.Result_Code === 100) {
          this.dataList = this.handleGetSort(data.Result_Data.ShopINCList);
        } else {
          this.dataList = [];
        }
      }
      uni.hideLoading();
    },
    handleChangeTime(date) {
      if (date === "all") {
        this.currentScroll = "all";
        const time = new Date(this.lastDay);
        let m = time.getMonth() + 1;
        let d = time.getDate();
        this.allDateDay = `${m < 10 ? "0" + m : m}月${d < 10 ? "0" + d : d}日`;
      } else {
        this.currentScroll = "item" + date;
        const time = new Date(date);
        let m = time.getMonth() + 1;
        let d = time.getDate();
        this.allDateDay = `${m < 10 ? "0" + m : m}月${d < 10 ? "0" + d : d}日`;
      }

      this.handleGetPageData(date);
    },
    // 修改排序字段
    handleChangeSortName(value) {
      uni.showLoading({
        title: "正在加载...",
      });
      if (value === this.sortName) {
        if (this.sortType === 1) {
          this.sortType = 0;
        } else {
          this.sortType = 1;
        }
      } else {
        this.sortName = value;
        this.sortType = 1;
      }
      let list = this.handleGetSort(this.dataList);
      this.dataList = list;
      this.$forceUpdate();
      uni.hideLoading();
    },
    // 排序方法
    handleGetSort(list) {
      var len = list.length;

      for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          // 判断按照那个排序
          if (this.type === 1 || this.type === 2) {
            // 正序
            if (this.sortType === 0) {
              // 24年营收
              if (this.sortName === 1) {
                if (
                  list[j].RevenueINC.curYearData >
                  list[j + 1].RevenueINC.curYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              } else if (this.sortName === 2) {
                if (
                  list[j].RevenueINC.lYearData >
                  list[j + 1].RevenueINC.lYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              } else if (this.sortName === 3) {
                if (
                  list[j].RevenueINC.increaseData >
                  list[j + 1].RevenueINC.increaseData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              } else if (this.sortName === 4) {
                if (
                  list[j].RevenueINC.increaseRate >
                  list[j + 1].RevenueINC.increaseRate
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            } else {
              // 降序
              // 24年营收
              if (this.sortName === 1) {
                if (
                  list[j].RevenueINC.curYearData <
                  list[j + 1].RevenueINC.curYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              } else if (this.sortName === 2) {
                if (
                  list[j].RevenueINC.lYearData <
                  list[j + 1].RevenueINC.lYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              } else if (this.sortName === 3) {
                if (
                  list[j].RevenueINC.increaseData <
                  list[j + 1].RevenueINC.increaseData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              } else if (this.sortName === 4) {
                if (
                  list[j].RevenueINC.increaseRate <
                  list[j + 1].RevenueINC.increaseRate
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          } else if (this.type === 3) {
            // 正序
            if (this.sortType === 0) {
              // 24年车流
              if (this.sortName === 1) {
                if (
                  list[j].BayonetINC.curYearData >
                  list[j + 1].BayonetINC.curYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              } else if (this.sortName === 2) {
                if (
                  list[j].BayonetINC.lYearData >
                  list[j + 1].BayonetINC.lYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              } else if (this.sortName === 3) {
                if (
                  list[j].BayonetINC.increaseData >
                  list[j + 1].BayonetINC.increaseData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              } else if (this.sortName === 4) {
                if (
                  list[j].BayonetINC.increaseRate >
                  list[j + 1].BayonetINC.increaseRate
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            } else {
              // 降序
              // 24年车流
              if (this.sortName === 1) {
                if (
                  list[j].BayonetINC.curYearData <
                  list[j + 1].BayonetINC.curYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              } else if (this.sortName === 2) {
                if (
                  list[j].BayonetINC.lYearData <
                  list[j + 1].BayonetINC.lYearData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              } else if (this.sortName === 3) {
                if (
                  list[j].BayonetINC.increaseData <
                  list[j + 1].BayonetINC.increaseData
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              } else if (this.sortName === 4) {
                if (
                  list[j].BayonetINC.increaseRate <
                  list[j + 1].BayonetINC.increaseRate
                ) {
                  // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
        }
      }
      return list;
    },
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //   选择服务区
    handleChangeServerPart(value) {
      this.ServerpartId = value;
      this.currentServerPart = `ServerPart` + value;
      this.handleGetPageData(null);
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  background: #fff;
  .springTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
  }
  .qmTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBackground.png");
  }
  .labourTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourBg.png");
  }
  .dragonBoatTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatBg.png");
  }
  .summerHolidayTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
  }
  .midAutumnTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
  }
  .nationalDayTop {
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayBg.png") !important;
  }
  .top {
    width: 100%;
    height: 324rpx;
    //background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
    //background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBackground.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    position: relative;
    .headerSpring {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
    }
    .headerQm {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBackground.png");
    }
    .headerlabour {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourBg.png");
    }
    .headerDragonBoat {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatBg.png");
    }
    .headerSummerHoliday {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
    }
    .headerMidAutumn {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
    }
    .headerNationalDay {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayBg.png") !important;
    }
    .header {
      position: fixed;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      //background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
      //background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBackground.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 324rpx;
      display: flex;
      align-items: center;
      z-index: 3;
      .backArrow {
        width: 24px;
        height: 24px;
        margin-right: 16px;
        position: absolute;
      }
      .detailIcon {
        width: 230rpx;
        height: 48rpx;
        margin-left: 16rpx;
        position: absolute;
        left: 40px;
      }
      .seachBox {
        position: absolute;
        bottom: 0;
        left: 60px;
        width: 400rpx;
        background: #fff;
        border-radius: 32rpx;
        margin-left: 16rpx;
        box-sizing: border-box;
        padding: 10rpx 20rpx;
        display: flex;
        align-items: center;
        .searchIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .searchText {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #b6bacb;
          line-height: 40rpx;
          white-space: nowrap;
        }
      }
      .picker {
        position: absolute;
        bottom: 0;
        left: 40px;
        .selectService {
          display: flex;
          align-items: center;
          .img {
            width: 40px;
            height: 40px;
            z-index: 2;
          }
          .select {
            height: 32px;
            background: #f8f8fa;
            border-radius: 0 16px 16px 0;
            transform: translateX(-20px);
            box-sizing: border-box;
            padding-left: 25px;
            display: flex;
            align-items: center;
            .content {
              display: flex;
              align-items: center;
              .uni-input {
                padding: 0;
                background: transparent;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
              }
              .area {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786b6c;
                line-height: 40px;
                margin-left: 4px;
              }
              .rightArrow {
                width: 24px;
                height: 12px;
              }
            }
          }
        }
      }
    }
    .headerNavList {
      position: absolute;
      width: 100%;
      height: 60rpx;
      display: flex;
      align-items: center;
      white-space: nowrap;
      box-sizing: border-box;
      padding-left: 32rpx;
      .scrollItem {
        display: inline-block;
        height: 40rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #e8a29a;
        line-height: 40rpx;
        margin-right: 40rpx;
      }
      .selectItem {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 40rpx;
        position: relative;
      }
      .selectItem:after {
        content: "";
        display: inline-block;
        width: 56rpx;
        height: 6rpx;
        background-color: #fff;
        position: absolute;
        bottom: -8rpx;
        left: 0px;
      }
    }
  }
  .contentPage {
    width: 100%;
    transform: translateY(-32rpx);
    background: #fff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    .springContentTop {
      background: linear-gradient(
        360deg,
        rgba(255, 200, 198, 0) 0%,
        #ffc8c6 100%
      );
    }
    .qmContentTop {
      background: linear-gradient(
        360deg,
        rgba(204, 231, 224, 0) 0%,
        #cce7e0 100%
      );
    }
    .labourContentTop {
      background: linear-gradient(
        360deg,
        rgba(255, 236, 208, 0) 0%,
        #ffecd0 100%
      );
    }
    .dragonBoatContentTop {
      background: linear-gradient(
        360deg,
        rgba(225, 241, 237, 0) 0%,
        #e1f1ed 100%
      );
    }
    .summerHolidayContentTop {
      background: linear-gradient(
        360deg,
        rgba(214, 238, 243, 0) 0%,
        #d1e9ee 100%
      );
    }
    .midAutumnContentTop {
      background: linear-gradient(
        360deg,
        rgba(255, 215, 180, 0) 0%,
        #fff3e9 100%
      );
    }
    .nationalDayContentTop {
      background: linear-gradient(
        360deg,
        rgba(255, 218, 210, 0) 0%,
        #fff2f0 100%
      );
    }
    .contentTop {
      width: 100%;
      height: 120rpx;
      //background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
      //background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      box-sizing: border-box;
      padding: 24rpx 24rpx 0;
      .content {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          .detailLogo {
            width: 178rpx;
            height: 32rpx;
          }
          .modalUnit {
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #9a9a9a;
            line-height: 36rpx;
          }
        }
        .right {
          .typeChangeBox {
            display: flex;
            align-items: center;
            background: #ffffff;
            border-radius: 6rpx;
            box-sizing: border-box;
            padding: 4rpx;
            .normal {
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #786b6c;
              line-height: 36rpx;
              padding: 6rpx 16rpx;
            }
            .select {
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #160002;
              line-height: 36rpx;
              background: #f5efef;
              border-radius: 6rpx;
            }
          }
        }
      }
    }
    .contentBox {
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      .navBigList {
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        padding-bottom: 24rpx;
        border-bottom: 1px solid #f5f4f4;
        .allBox {
          width: 70rpx;
          height: 100%;
          .scrollItem {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #a69e9f;
            line-height: 40rpx;
          }
          .selectItem {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #ed3e48;
            line-height: 40rpx;
          }
        }
        .navList {
          width: 100%;
          height: 40rpx;
          display: flex;
          align-items: center;
          white-space: nowrap;
          .scrollItem {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #a69e9f;
            line-height: 40rpx;
            margin-right: 32rpx;
            display: inline-block;
          }
          .selectItem {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            //color: #226C61;
            line-height: 40rpx;
          }
        }
        .springNav {
          .selectItem {
            color: #ed3e48 !important;
          }
        }
        .qmNav {
          .selectItem {
            color: #226c61 !important;
          }
        }
        .labourNav {
          .selectItem {
            color: #d14702;
          }
        }
        .dragonBoatNav {
          .selectItem {
            color: #3e8958 !important;
          }
        }
        .summerHolidayNav {
          .selectItem {
            color: #007797 !important;
          }
        }
        .midAutumnNav {
          .selectItem {
            color: #da5015;
          }
        }
        .nationalDayNav {
          .selectItem {
            color: #d52020;
          }
        }
      }

      .sortBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
        margin-top: 24rpx;
        .sortItem {
          display: flex;
          align-items: center;
          .sortText {
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #9a9a9a;
            line-height: 36rpx;
            white-space: nowrap;
          }
          .sortIconBox {
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .upIcon {
              width: 16rpx;
              height: 12rpx;
              margin-bottom: 4rpx;
            }
            .bottomIcon {
              width: 16rpx;
              height: 12rpx;
            }
          }
        }
      }
      .scrollBox {
        .typeFirst {
          height: calc(100vh - 300px);
          .listItem {
            width: 100%;
            display: flex;
            //align-items: center;
            align-items: flex-end;
            padding: 16rpx 0;
            .noItem {
              display: flex;
              height: 120rpx;
              align-items: center;
              .noIcon {
                width: 40rpx;
                height: 40rpx;
              }
              .noOther {
                width: 40rpx;
                height: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(
                  141deg,
                  #babcc3 0%,
                  #cbccd1 45%,
                  #b5b6ba 100%
                );
                border-radius: 50%;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 24rpx;
              }
            }
            .item {
              text-align: center;
              font-size: 28rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #9a9a9a;
              line-height: 40rpx;
            }
            .firstItem {
              display: flex;
              .itemIcon {
                width: 120rpx;
                height: 120rpx;
                border-radius: 16rpx;
                overflow: hidden;
                margin-right: 8rpx;
                .itemImg {
                  width: 100%;
                  height: 100%;
                }
              }
              .itemRight {
                height: 120rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #9a9a9a;
                .firstItemText {
                  width: 100%;
                  text-align: left;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #9a9a9a;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
        .noDataBox {
          width: 100%;
          height: calc(100vh - 300px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .noDataImg {
            width: 120rpx;
            height: 120rpx;
          }
          .noDataText {
          }
        }
      }
    }
  }
}
</style>
