<template>
  <div class="main">
    <div :class="selectFestival===0?'top springTop':selectFestival===1?'top qmTop':selectFestival===2?'top labourTop':''">
      <div :class="selectFestival===0?'header headerSpring':selectFestival===1?'header headerQm':selectFestival===2?'header headerLabour':'' " :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"/>
      </div>
    </div>

    <div class="contentPage">
      <div class="revenueDetail">
        <div :class="selectFestival===0?'revenueDetailTitleBox springTitleBox':selectFestival===1?'revenueDetailTitleBox qmTitleBox':selectFestival===2?'revenueDetailTitleBox labourTitleBox':''">
          <div class="left">
            <img class="detailLogo" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmServicepartDetail.png':selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourServerPartDetail.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===0?'navList springNav':selectFestival===1?'navList qmNav':selectFestival===2?'navList labourNav':''" :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===0?'#DB6465':selectFestival===1?'#3B9285':selectFestival===2?'#D14702':''}"></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">{{ `24年${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">{{ `23年${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){
    console.log('query',query)
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()

    if (query.type){
      this.type = Number(query.type)
    }
    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 if (this.selectFestival===1){
      this.currentScroll = 'item'+ this.lastDay
    }else if (this.selectFestival===2){
      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'
      }
    }else if(this.selectFestival===2){
      dayNumber = moment().diff("2024-04-29", "days")
      if (dayNumber<=7){
        this.howDayNumber = dayNumber
      }else{
        this.howDayNumber = 7
        this.currentScroll = 'item'+ '2024-05-05'
        this.lastDay = '2024-05-05'
      }
    }
    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-28").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 = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
      }

      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: this.useInfo.userData.ProvinceCode || '340000',
        curYear: this.curYear,
        compareYear: this.compareYear,
        HolidayType:this.selectFestival===0?2:this.selectFestival===1?3:this.selectFestival===2?4:'',
        StatisticsDate:time,
        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)
      console.log('data',data)
      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
      console.log('this.dataList',this.dataList)
      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){
      var len = list.length;

      for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          // 判断按照那个排序
          if (this.type===1){
            // 正序
            if (this.sortType===0){
              // 24年营收
              if (this.sortName===1){
                if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].RevenueINC.lYearData > list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].RevenueINC.increaseData > list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].RevenueINC.increaseRate  > list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
            else{
              // 降序
              // 24年营收
              if (this.sortName===1){
                if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].RevenueINC.lYearData < list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].RevenueINC.increaseData < list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].RevenueINC.increaseRate  < list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
          else if(this.type===2){
            // 正序
            if (this.sortType===0){
              // 24年营收
              if (this.sortName===1){
                if (list[j].AccountINC.curYearData > list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].AccountINC.lYearData  > list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].AccountINC.increaseData  > list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].AccountINC.increaseRate   > list[j + 1].AccountINC.increaseRate  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
            // 降序
            else{
              // 24年营收
              if (this.sortName===1){
                if (list[j].AccountINC.curYearData < list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].AccountINC.lYearData  < list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].AccountINC.increaseData  < list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].AccountINC.increaseRate   < list[j + 1].AccountINC.increaseRate  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
          else if(this.type===3){
            // 正序
            if (this.sortType===0){
              // 24年车流
              if (this.sortName===1){
                if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].BayonetINC.lYearData  > list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].BayonetINC.increaseData   > list[j + 1].BayonetINC.increaseData  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].BayonetINC.increaseRate > list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }else{
              // 降序
              // 24年车流
              if (this.sortName===1){
                if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 23年营收
              }else if(this.sortName===2){
                if (list[j].BayonetINC.lYearData  < list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增长
              }else if(this.sortName===3){
                if (list[j].BayonetINC.increaseData  < list[j + 1].BayonetINC.increaseData  ) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
                // 营收增幅
              }else if(this.sortName===4){
                if (list[j].BayonetINC.increaseRate < list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
                  var temp = list[j];
                  list[j] = list[j + 1];
                  list[j + 1] = temp;
                }
              }
            }
          }
        }
      }
      return list;
    },
    // 跳转去看服务区排名
    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}&serverPartList=${JSON.stringify(this.serverPartList)}&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");
  }
  .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");
    }
    .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;
      }
    }
  }
  .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%);
      }
      .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;
            }
          }
        }
        .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>
