<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 + 24 + 'px', top: 0 + 'px' }">
        <image :style="{ top: menu.top + '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"
          :style="{ top: (menu.bottom - menu.height) - (40 - menu.height) + 'px' }">
          <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="{ top: (menu.bottom - menu.height) - (40 - menu.height) + 'px' }"
          @click="handleGoMap">
          <image class="searchIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/searchIconService.svg" />
          <text class="searchText">请输入想看的服务区</text>
        </view>
        <image v-if="selectFestival === 1 || selectFestival === 2" class="titleSvg" :style="{ bottom: '-20rpx' }"
          src="https://eshangtech.com/ShopICO/ahyd-BID/examine/serviceDetail.svg" />
      </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/examine/merchantRevenue.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% - 120rpx)', textAlign: 'left' }">
                <!-- :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)' }">
                  <div class="firstItemText">{{
                    item.ServerpartShopName || "-"
                    }}</div>

                  <div style="display: flex;">
                    <div class="item" style="width: 110rpx">{{
                      item.RevenueINC.curYearData
                        ? item.RevenueINC.curYearData < 100 ? `${item.RevenueINC.curYearData}(元)` :
                          $util.getMoney(item.RevenueINC.curYearData / 10000) : "" }}</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>
                    </div>
                  </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) {
      // 1. 确定数据源和字段
      const dataSource = this.type === 1 ? 'RevenueINC'
        : this.type === 2 ? 'AccountINC'
          : 'BayonetINC';

      const field = this.sortName === 1 ? 'curYearData'
        : this.sortName === 2 ? 'lYearData'
          : this.sortName === 3 ? 'increaseData'
            : 'increaseRate';

      // 2. 分组:有值 vs 无值(null/undefined 算无值,0 算有值)
      const hasValue = list.filter(item => {
        const value = item[dataSource]?.[field];
        return value !== null && value !== undefined;
      });

      const noValue = list.filter(item => {
        const value = item[dataSource]?.[field];
        return value === null || value === undefined;
      });

      // 3. 对有值组排序
      hasValue.sort((a, b) => {
        const aValue = a[dataSource][field];
        const bValue = b[dataSource][field];
        // 根据 sortType 决定升序或降序
        return this.sortType === 0 ? aValue - bValue : bValue - aValue;
      });

      // 4. 合并:有值组 + 无值组
      return [...hasValue, ...noValue];
    },
    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;
        height: 80rpx;
        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;
        }
      }


      .titleSvg {
        width: 208rpx;
        height: 48rpx;
        position: absolute;
        left: 40rpx;
      }

      .picker {
        position: absolute;
        // bottom: 0;
        left: 45px;

        .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: 138rpx;
            height: 30rpx;
          }

          .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;
                  line-height: 36rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #9a9a9a;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  // overflow: hidden;
                  // white-space: nowrap;
                  // text-overflow: ellipsis;
                }

                .item {
                  text-align: center;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #9a9a9a;
                  line-height: 40rpx;
                }
              }
            }
          }
        }

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