<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 summerHolidayBoat'
                : selectFestival === 7
                  ? 'header midAutumnBoat'
                  : selectFestival === 8
                    ? 'header nationalDayBoat'
                    : ''
        " :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" />
        <image v-if="selectFestival === 1 || selectFestival === 2"
          :style="{ bottom: (statusBarHeight - 24) / 4 + 'px' }" class="titleSvg"
          src="https://eshangtech.com/ShopICO/ahyd-BID/examine/customerSales.svg" />
      </div>
    </div>

    <div class="contentPage">
      <div class="revenueDetail">
        <div :class="selectFestival === 1 || selectFestival === 2
          ? 'revenueDetailTitleBox springTitleBox'
          : selectFestival === 3
            ? 'revenueDetailTitleBox qmTitleBox'
            : selectFestival === 4
              ? 'revenueDetailTitleBox labourTitleBox'
              : selectFestival === 5
                ? 'revenueDetailTitleBox dragonBoatTitleBox'
                : selectFestival === 6
                  ? 'revenueDetailTitleBox summerHolidayTitleBox'
                  : selectFestival === 7
                    ? 'revenueDetailTitleBox midAutumnTitleBox'
                    : selectFestival === 8
                      ? 'revenueDetailTitleBox nationalDayTitleBox'
                      : ''
          ">
          <div class="left">
            <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 class="revenueContent">
          <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>
          <!--            <span class="dateText">{{selectDateText || ''}}</span>-->
          <div class="modalBox">
            <div class="modalTitleBox">
              <div class="modalTitleItem" :style="{ width: 'calc(100% - 390rpx)', textAlign: 'left' }">
                <div class="modalIndex" :style="{
                  background:
                    selectFestival === 1 || selectFestival === 2
                      ? '#DB6465'
                      : selectFestival === 3
                        ? '#3B9285'
                        : selectFestival === 4
                          ? '#D14702'
                          : selectFestival === 5
                            ? '#3E8958'
                            : selectFestival === 6
                              ? '#007797'
                              : selectFestival === 7
                                ? '#3E8958'
                                : selectFestival === 8
                                  ? '#3E8958'
                                  : '',
                }"></div>
                <text class="modalText">{{
                  type === 1
                    ? "对客销售"
                    : type === 2
                      ? "营业收入"
                      : type === 3
                        ? "入区车流"
                        : ""
                }}</text>
                <text class="modalUnit">{{
                  type === 3 ? "/万辆" : "/万元"
                  }}</text>
              </div>
            </div>

            <view class="sortBox">
              <view class="sortItem" @click="handleChangeSortName(1)">
                <text class="sortText">{{
                  `${curYear}年${type === 1
                    ? "销售"
                    : type === 2
                      ? "营收"
                      : type === 3
                        ? "车流"
                        : ""
                  }`
                }}</text>
                <view class="sortIconBox">
                  <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" @click="handleChangeSortName(2)">
                <text class="sortText">{{
                  `${compareYear}年${type === 1
                    ? "销售"
                    : type === 2
                      ? "营收"
                      : type === 3
                        ? "车流"
                        : ""
                  }`
                }}</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" @click="handleChangeSortName(3)">
                <text class="sortText">{{
                  `${type === 1
                    ? "销售"
                    : type === 2
                      ? "营收"
                      : type === 3
                        ? "车流"
                        : ""
                  }增长`
                }}</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" @click="handleChangeSortName(4)">
                <text class="sortText">{{
                  `${type === 1
                    ? "销售"
                    : type === 2
                      ? "营收"
                      : type === 3
                        ? "车流"
                        : ""
                  }增幅`
                }}</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="modalDetail">
              <!--              <div class="modalDetailTitle">-->
              <!--                <div class="titleItem"  :style="{width: 'calc(100% - 440rpx)',textAlign:'left'}">服务区</div>-->
              <!--                <div class="titleItem"  style="width: 110rpx">2024年</div>-->
              <!--                <div class="titleItem"  style="width: 110rpx">2023年</div>-->
              <!--                <div class="titleItem"  style="width: 110rpx">增长</div>-->
              <!--                <div class="titleItem"  style="width: 110rpx">增幅</div>-->
              <!--              </div>-->
              <scroll-view :scroll-y="true" class="typeFirst">
                <div class="listItem" v-for="(item, index) in dataList" :key="index">
                  <div class="itemLeft">
                    <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg" />
                    <view class="nameBox">
                      <text class="serviceName">{{
                        item.ServerpartName
                          ? item.ServerpartName.split("服务区")[0]
                          : ""
                      }}</text>
                      <text class="serviceLabel">服务区</text>
                    </view>
                  </div>
                  <div class="contentRight">
                    <div class="rightTop">
                      <view class="rightTopLeft">
                        <view class="indexBox" :style="{
                          backgroundImage: `url(${index === 0
                            ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/1stBg.svg'
                            : index === 1
                              ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/2stBg.svg'
                              : index === 2
                                ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/3stBg.svg'
                                : 'https://eshangtech.com/ShopICO/ahyd-BID/car/4stBg.svg'
                            })`,
                        }">{{ index + 1 }}</view>
                      </view>
                      <view class="rightTopRight">
                        <text class="entryRateLabel">增幅</text>
                        <div class="entryRateValue">
                          <span :style="{
                            color:
                              type === 1
                                ? item.RevenueINC.increaseRate > 0
                                  ? '#E83944'
                                  : '#0E9976'
                                : type === 2
                                  ? item.AccountINC.increaseRate > 0
                                    ? '#E83944'
                                    : '#0E9976'
                                  : type === 3
                                    ? item.BayonetINC.increaseRate > 0
                                      ? '#E83944'
                                      : '#0E9976'
                                    : '-',
                          }">
                            {{
                              type === 1
                                ? item.RevenueINC.increaseRate > 0
                                  ? "+"
                                  : ""
                                : type === 2
                                  ? item.AccountINC.increaseRate > 0
                                    ? "+"
                                    : ""
                                  : type === 3
                                    ? item.BayonetINC.increaseRate > 0
                                      ? "+"
                                      : ""
                                    : "-"
                            }}
                          </span>
                          <span :style="{
                            color:
                              type === 1
                                ? item.RevenueINC.increaseRate > 0
                                  ? '#E83944'
                                  : '#0E9976'
                                : type === 2
                                  ? item.AccountINC.increaseRate > 0
                                    ? '#E83944'
                                    : '#0E9976'
                                  : type === 3
                                    ? item.BayonetINC.increaseRate > 0
                                      ? '#E83944'
                                      : '#0E9976'
                                    : '-',
                          }">
                            {{
                              type === 1
                                ? item.RevenueINC.increaseRate
                                  ? item.RevenueINC.increaseRate
                                  : "-"
                                : type === 2
                                  ? item.AccountINC.increaseRate
                                    ? item.AccountINC.increaseRate
                                    : "-"
                                  : type === 3
                                    ? item.BayonetINC.increaseRate
                                      ? item.BayonetINC.increaseRate
                                      : "-"
                                    : "-"
                            }}%
                          </span>
                        </div>
                      </view>
                    </div>
                    <div class="rightBottom">
                      <view class="rightBottomItem">
                        <text class="itemLabel">{{ curYear }}</text>
                        <text class="itemValue">
                          {{
                            type === 1
                              ? item.RevenueINC.curYearData
                                ? $util.getMoney(
                                  item.RevenueINC.curYearData / 10000
                                )
                                : "0.00"
                              : type === 2
                                ? item.AccountINC.curYearData
                                  ? $util.getMoney(
                                    item.AccountINC.curYearData / 10000
                                  )
                                  : "0.00"
                                : type === 3
                                  ? item.BayonetINC.curYearData
                                    ? $util.getMoney(
                                      item.BayonetINC.curYearData / 10000
                                    )
                                    : "0.00"
                                  : "-"
                          }}
                        </text>
                      </view>
                      <view class="rightBottomItem">
                        <text class="itemLabel">{{ compareYear }}</text>
                        <text class="itemValue">
                          {{
                            type === 1
                              ? item.RevenueINC.lYearData
                                ? $util.getMoney(
                                  item.RevenueINC.lYearData / 10000
                                )
                                : "0.00"
                              : type === 2
                                ? item.AccountINC.lYearData
                                  ? $util.getMoney(
                                    item.AccountINC.lYearData / 10000
                                  )
                                  : "0.00"
                                : type === 3
                                  ? item.BayonetINC.lYearData
                                    ? $util.getMoney(
                                      item.BayonetINC.lYearData / 10000
                                    )
                                    : "0.00"
                                  : "-"
                          }}
                        </text>
                      </view>
                      <view class="rightBottomItem">
                        <text class="itemLabel">增长</text>
                        <text class="itemValue">
                          {{
                            type === 1
                              ? item.RevenueINC.increaseData
                                ? $util.getMoney(
                                  item.RevenueINC.increaseData / 10000
                                )
                                : "0.00"
                              : type === 2
                                ? item.AccountINC.increaseData
                                  ? $util.getMoney(
                                    item.AccountINC.increaseData / 10000
                                  )
                                  : "0.00"
                                : type === 3
                                  ? item.BayonetINC.increaseData
                                    ? $util.getMoney(
                                      item.BayonetINC.increaseData / 10000
                                    )
                                    : "0.00"
                                  : "-"
                          }}
                        </text>
                      </view>
                    </div>

                    <div class="otherCarBox" v-if="type !== 3">
                      <div class="left">
                        <span class="carLabel">车流增幅</span>
                        <span :style="{
                          color:
                            item.BayonetINC.increaseRate > 1000
                              ? ''
                              : item.BayonetINC.increaseRate > 0
                                ? '#E83944'
                                : item.BayonetINC.increaseRate < 0
                                  ? '#0E9976'
                                  : '',
                        }">
                          {{
                            item.BayonetINC.increaseRate > 1000
                              ? ""
                              : item.BayonetINC.increaseRate > 0
                                ? "+"
                                : ""
                          }}
                        </span>
                        <span :style="{
                          color:
                            item.BayonetINC.increaseRate > 1000
                              ? ''
                              : item.BayonetINC.increaseRate > 0
                                ? '#E83944'
                                : item.BayonetINC.increaseRate < 0
                                  ? '#0E9976'
                                  : '',
                        }">
                          {{
                            item.BayonetINC.increaseRate
                              ? item.BayonetINC.increaseRate > 1000
                                ? "-"
                                : item.BayonetINC.increaseRate
                              : "-"
                          }}%
                        </span>
                      </div>
                      <div class="MoreBox" @click="handleGoServerPartDetail(item)">
                        <img class="goMoreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
                      </div>
                    </div>
                  </div>
                </div>
                <!--                <div class="row" v-for="(item,index) in dataList" :key="index">-->
                <!--                  <div class="valueItem bigFather" :style="{width: 'calc(100% - 430rpx)',textAlign:'left'}">{{item.ServerpartName.split('服务区')[0]}}</div>-->
                <!--                  <div class="compareItem" style="width: 110rpx">-->
                <!--                    {{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':-->
                <!--                      type===2?'':-->
                <!--                      type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}-->
                <!--                  </div>-->
                <!--                  <div class="compareItem" style="width: 110rpx">-->
                <!--                    {{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':-->
                <!--                      type===2?'':-->
                <!--                      type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}-->
                <!--                  </div>-->
                <!--                  <div class="compareItem" style="width: 110rpx">-->
                <!--                    <span>{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':-->
                <!--                        type===2?'':-->
                <!--                        type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}</span>-->
                <!--                  </div>-->
                <!--                  <div class="addItem" style="width: 110rpx">-->
                <!--                    <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
                <!--                      {{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}-->
                <!--                    </span>-->
                <!--                    <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
                <!--                      {{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :-->
                <!--                        type===2?'':-->
                <!--                        type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%-->
                <!--                    </span>-->
                <!--                  </div>-->
                <!--                </div>-->
              </scroll-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/util/index.js";
import moment from "moment";
export default {
  name: "rankPage",
  data() {
    return {
      scrollList: [],
      selectDateText: "",
      currentScroll: "",
      lastDay: "",
      allDateDay: "",
      dataList: [],
      type: 0,
      useInfo: {},
      curYear: "",
      compareYear: "",
      ServerpartIds: "",
      sortType: 1, // 正序降序 0正序  1降序
      sortName: 3, // 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
      statusBarHeight: 0,
      menu: "",
      pageType: 1, // 选择的类型
      serverPartList: [], // 服务区列表
      selectFestival: 0, // 选择的节日
    };
  },
  onLoad(query) {
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = Number(systemInfo.statusBarHeight);
    this.menu = uni.getMenuButtonBoundingClientRect();

    if (query.type) {
      this.type = Number(query.type);
    }
    if (query.festivalObj) {
      this.festivalObj = JSON.parse(query.festivalObj);
      this.selectFestival = this.festivalObj.HolidayType;
      this.curYear = this.festivalObj.curYear;
      this.compareYear = this.festivalObj.compareYear;
    }
    if (query.time) {
      this.currentScroll = "item" + query.time;
      this.allDateDay = this.currentScroll.split("item")[1];
    }

    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;
      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;
      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;
    this.handleGetData();
    return;

    this.lastDay = uni.getStorageSync("lastDay");
    // this.lastDay = '2024-04-03'

    if (query.festivalType) {
      this.selectFestival = Number(query.festivalType);
    }
    if (this.selectFestival === 0) {
      if (query.time) {
        this.currentScroll = "item" + query.time;
      } else {
        this.currentScroll = "item" + "2024-03-05";
      }
    } 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
    // }

    this.ServerpartIds = query.ServerpartIds;

    // 获取用户信息
    let userInfo = uni.getStorageSync("vuex");
    userInfo = JSON.parse(userInfo);
    this.useInfo = JSON.parse(JSON.stringify(userInfo));
    // 拿到是春运开始的第几天
    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}`})
      // }
    }
    if (dateList && dateList.length > 0) {
      this.scrollList = dateList;
      this.selectDateText = dateList[this.howDayNumber - 1].value;
    }
    this.handleGetData();
  },
  methods: {
    // 点击了累计还是选择了日期
    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 = date;
      }

      this.handleGetData(date);
    },
    // 获取排名信息
    async handleGetData(date) {
      uni.showLoading({
        title: "正在加载...",
      });
      let time = date
        ? date === "all"
          ? this.lastDay
          : 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: this.allDateDay,
        businessRegion: 1,
        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/GetServerpartINCAnalysis",
        req
      );
      if (data.Result_Data) {
        this.dataList = this.handleGetSort(data.Result_Data.List);
        let list = [];
        if (data.Result_Data.List && data.Result_Data.List.length > 0) {
          data.Result_Data.List.forEach((item) => {
            list.push({ name: item.ServerpartName, value: item.ServerpartId });
          });
        }
        this.serverPartList = list;
      }
      uni.hideLoading();
    },
    // 修改排序字段
    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();
    },
    // 切换模块
    handleChangeType(value) {
      this.pageType = value;
      if (value === 2) {
        this.handleGetData("all");
      } else {
        this.handleGetData();
      }
    },
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 排序方法 - 优化版(分组排序:有值数据排序后,无值数据放最后)
    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];
    },
    // 跳转去看服务区排名
    handleGoServerPartDetail(obj) {
      let springObj = {
        SERVERPART_NAME: obj.ServerpartName,
        SPREGIONTYPE_NAME: obj.SPRegionTypeName,
        SPRegionType_ID: obj.SPRegionTypeId,
        Serverpart_ID: obj.ServerpartId,
      };
      uni.setStorageSync("springService", springObj); //当前选中服务区信息
      this.$util.toNextRoute(
        "navigateTo",
        `/pages/nationalPage/merchantRevenue?ServerpartId=${obj.ServerpartId
        }&type=${this.type}&festivalObj=${JSON.stringify(
          this.festivalObj
        )}&currentScroll=${this.currentScroll}&festivalType=${this.selectFestival
        }`
      );
    },
  },
};
</script>


<style scoped lang="scss">
.main {
  width: 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/smallQmBg.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/smallQmBg.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;

    .headerSpring {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
    }

    .headerQm {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.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");
    }

    .summerHolidayBoat {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
    }

    .midAutumnBoat {
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
    }

    .nationalDayBoat {
      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/smallQmBg.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 324rpx;
      display: flex;
      align-items: center;
      z-index: 2;

      .backArrow {
        width: 24px;
        height: 24px;
        margin-right: 16px;
        position: absolute;
      }

      .titleSvg {
        width: 166rpx;
        height: 48rpx;
        position: absolute;
        left: 100rpx;
      }
    }

  }

  .contentPage {
    width: 100%;
    box-sizing: border-box;
    transform: translateY(-120rpx);

    .revenueDetail {
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 2rpx;
      margin-top: 24rpx;

      .springTitleBox {
        background: linear-gradient(360deg,
            rgba(255, 200, 198, 0) 0%,
            #ffc8c6 100%);
      }

      .qmTitleBox {
        background: linear-gradient(360deg,
            rgba(204, 231, 224, 0) 0%,
            #cce7e0 100%);
      }

      .labourTitleBox {
        background: linear-gradient(360deg,
            rgba(255, 236, 208, 0) 0%,
            #ffecd0 100%);
      }

      .dragonBoatTitleBox {
        background: linear-gradient(360deg,
            rgba(225, 241, 237, 0) 0%,
            #e1f1ed 100%);
      }

      .summerHolidayTitleBox {
        background: linear-gradient(360deg,
            rgba(214, 238, 243, 0) 0%,
            #d1e9ee 100%);
      }

      .midAutumnTitleBox {
        background: linear-gradient(360deg,
            rgba(255, 215, 180, 0) 0%,
            #fff3e9 100%);
      }

      .nationalDayTitleBox {
        background: linear-gradient(360deg,
            rgba(255, 218, 210, 0) 0%,
            #fff2f0 100%);
      }

      .revenueDetailTitleBox {
        width: 100%;
        height: 90rpx;
        //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: 14rpx 14rpx 0rpx 0rpx;
        box-sizing: border-box;
        padding: 36rpx 34rpx 22rpx;
        position: relative;
        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;
            position: absolute;
            left: 220rpx;
            top: 30rpx;
          }
        }

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

      .revenueContent {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx 24rpx;

        .navBigList {
          width: 100%;
          height: 40rpx;
          display: flex;
          align-items: center;
          margin-top: 32rpx;

          .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;
            padding-bottom: 24rpx;
            border-bottom: 1px solid #f5f4f4;

            .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: #ED3E48;
              //color: #226C61;
              line-height: 40rpx;
            }
          }

          .springNav {
            .selectItem {
              color: #ed3e48 !important;
            }
          }

          .qmNav {
            .selectItem {
              color: #226c61 !important;
            }
          }

          .labourNav {
            .selectItem {
              color: #d14702 !important;
            }
          }

          .dragonBoatNav {
            .selectItem {
              color: #3e8958 !important;
            }
          }

          .summerHolidayNav {
            .selectItem {
              color: #007797 !important;
            }
          }

          .midAutumnNav {
            .selectItem {
              color: #da5015;
            }
          }

          .nationalDayNav {
            .selectItem {
              color: #d52020;
            }
          }
        }

        .dateText {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #a69e9f;
          margin: 16rpx 0;
          display: inline-block;
        }

        .modalBox {
          margin-top: 40rpx;

          .modalTitleBox {
            width: 100%;
            box-sizing: border-box;
            padding: 0 24rpx;
            margin-bottom: 16rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .modalTitleItem {
              display: flex;
              align-items: center;

              .modalIndex {
                width: 12rpx;
                height: 12rpx;
                background: #db6465;
                border-radius: 50%;
                margin-right: 12rpx;
              }

              .modalText {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
                margin-right: 4rpx;
              }

              .modalUnit {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9a9a9a;
                line-height: 36rpx;
              }
            }

            .moreBox {
              display: flex;
              align-items: center;

              .moreText {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9a9a9a;
                line-height: 36rpx;
              }

              .moreIcon {
                width: 24rpx;
                height: 36rpx;
                margin-left: 4rpx;
              }
            }

            .modalTitleItem1 {
              font-size: 24rpx;
              text-align: center;
            }
          }

          .sortBox {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16rpx;

            .sortItem {
              display: flex;
              align-items: center;

              .sortText {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9a9a9a;
                line-height: 36rpx;
              }

              .sortIconBox {
                display: flex;
                flex-direction: column;
                margin-left: 16rpx;

                .upIcon {
                  width: 16rpx;
                  height: 12rpx;
                  margin-bottom: 4rpx;
                }

                .bottomIcon {
                  width: 16rpx;
                  height: 12rpx;
                }
              }
            }
          }

          .modalDetail {
            width: 100%;
            box-sizing: border-box;

            .modalDetailTitle {
              display: flex;
              align-items: center;
              padding: 8rpx 0;

              .titleItem {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9a9a9a;
                line-height: 32rpx;
                text-align: center;
              }
            }

            .typeFirst {
              height: calc(100vh - 300px);

              .row {
                margin-top: 32rpx;
                display: flex;
                align-items: center;
                margin-top: 32rpx;

                .valueItem {
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: center;
                  text-indent: 8rpx;
                }

                .bigFather {
                  position: relative;
                  font-weight: 600;
                }

                .bigFather:before {
                  position: absolute;
                  top: 50%;
                  left: -8rpx;
                  transform: translateY(-50%);
                  content: "";
                  display: inline-block;
                  width: 8rpx;
                  height: 8rpx;
                  border-radius: 50%;
                  background: #db6465;
                }

                .father {
                  position: relative;
                  font-weight: 600;
                }

                .father:before {
                  position: absolute;
                  top: 50%;
                  left: -8rpx;
                  transform: translateY(-50%);
                  content: "";
                  display: inline-block;
                  width: 8rpx;
                  height: 8rpx;
                  border-radius: 50%;
                  background: #3188ff;
                }

                .son {
                  position: relative;
                }

                .son:before {
                  position: absolute;
                  top: 50%;
                  left: -8rpx;
                  transform: translateY(-50%);
                  content: "";
                  display: inline-block;
                  width: 8rpx;
                  height: 8rpx;
                  border-radius: 50%;
                  background: orangered;
                }

                .compareItem {
                  font-size: 24rpx;
                  font-family: DINAlternate, DINAlternate;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: center;
                }

                .addItem {
                  font-size: 24rpx;
                  font-family: DINAlternate, DINAlternate;
                  color: #e83944;
                  line-height: 40rpx;
                  text-align: center;
                }
              }

              .listItem {
                width: 100%;
                padding: 24rpx;
                box-sizing: border-box;
                border-radius: 16rpx;
                background: #f7f7f7;
                margin-bottom: 24rpx;
                display: flex;

                .itemLeft {
                  width: 160rpx;
                  height: 160rpx;
                  border-radius: 16rpx;
                  //border: 2rpx solid #E6E6E6;
                  position: relative;
                  background-repeat: no-repeat;
                  background-size: cover;

                  .bg {
                    position: absolute;
                    width: 160rpx;
                    height: 160rpx;
                    top: 0;
                    left: 0;
                    z-index: 1;
                  }

                  .statueBox {
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    right: 0;
                    width: 76rpx;
                    height: 32rpx;
                    font-size: 20rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 28rpx;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    text-align: center;
                  }

                  .nameBox {
                    position: absolute;
                    z-index: 2;
                    top: 32rpx;
                    left: 20rpx;
                    display: flex;
                    flex-direction: column;

                    .serviceName {
                      font-size: 30rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 500;
                      color: #7f020b;
                      line-height: 30rpx;
                      margin-bottom: 6rpx;
                    }

                    .serviceLabel {
                      font-size: 20rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 500;
                      color: #7f020b;
                      line-height: 20rpx;
                    }
                  }
                }

                .contentRight {
                  width: calc(100% - 176rpx);
                  margin-left: 16rpx;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;

                  .rightTop {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .rightTopLeft {
                      display: flex;
                      align-items: center;

                      .indexBox {
                        width: 36rpx;
                        height: 32rpx;
                        font-size: 24rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #feffff;
                        line-height: 28rpx;
                        text-align: center;
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                      }

                      .areaName {
                        font-size: 28rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #160002;
                        line-height: 40rpx;
                        margin-left: 8rpx;
                      }
                    }

                    .rightTopRight {
                      display: flex;
                      align-items: center;

                      .entryRateLabel {
                        font-size: 24rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #9a9a9a;
                        line-height: 32rpx;
                      }

                      .entryRateValue {
                        font-size: 28rpx;
                        font-family: DINAlternate, DINAlternate;
                        font-weight: bold;
                        color: #e83944;
                        line-height: 32rpx;
                        margin-left: 4rpx;
                      }
                    }
                  }

                  .rightBottom {
                    display: flex;
                    justify-content: space-between;

                    .rightBottomItem {
                      display: flex;
                      flex-direction: column;
                      align-items: center;

                      .itemLabel {
                        font-size: 24rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #9a9a9a;
                        line-height: 36rpx;
                      }

                      .itemValue {
                        font-size: 28rpx;
                        font-family: DINAlternate, DINAlternate;
                        font-weight: bold;
                        color: #160002;
                        line-height: 32rpx;
                        margin-top: 8rpx;
                      }
                    }
                  }

                  .otherCarBox {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .left {
                      font-size: 24rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      color: #9a9a9a;
                      line-height: 36rpx;
                    }

                    .MoreBox {
                      width: 30%;
                      height: 32rpx;
                      display: flex;
                      align-items: center;
                      justify-content: flex-end;

                      .goMoreIcon {
                        width: 32rpx;
                        height: 32rpx;
                      }
                    }
                  }
                }
              }
            }

            .typeSecond {
              .listValueBox {
                width: 100%;

                .row {
                  width: 100%;
                  display: flex;
                  margin-top: 32rpx;

                  .rowItem {
                    text-align: center;
                    font-size: 24rpx;
                    font-family: DINAlternate, DINAlternate;
                    color: #160002;
                    line-height: 40rpx;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
