<template>
  <view class="main">
    <view class="bigBg">
      <view class="top" :style="{height: (menu.bottom + 18) + 'px'}">
        <view class="header" :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"/>
        </view>
      </view>
      <view class="contentPage">
        <view class="revenueDetail">
          <view class="revenueDetailTitleBox">
            <view class="left">
<!--              <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
              <span class="leftText">服务区排名</span>
<!--              <img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png"/>-->
              <!--          <text class="modalUnit">{{selectDateText || ''}}</text>-->
            </view>
            <view class="right">
              <view class="typeChangeBox">
                <view :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按月统计</view>
                <view :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</view>
              </view>
            </view>
          </view>
          <view v-if="pageType===2" style="display: flex;justify-content: flex-end;box-sizing: border-box;padding-right: 16px">
            {{selectStart || defaultStart}}-{{selectEnd || defaultEnd}}
          </view>
          <view class="revenueContent">
            <view class="navBigList" v-if="pageType===1">
              <!--            <view class="allBox">-->
              <!--              <view :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</view>-->
              <!--            </view>-->
              <scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">
                <view :style="{width: `${60*scrollList.length + 40}px`,height:'100%'}">
                  <view :class="currentScroll===`item${index+1}`?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="`item${index+1}`" @click="handleChangeTime(index+1)">{{item}}</view>
                </view>
              </scroll-view>
            </view>
            <view class="modalBox">
              <view class="modalTitleBox">
                <view class="modalTitleItem" :style="{width: 'calc(100% - 300rpx)',textAlign:'left'}">
                  <view class="modalIndex"></view>
                  <text class="modalText">{{ type===1?'对客销售':type===2?'营业收入':type===3?'入区车流':'' }}</text>
                  <text class="modalUnit">{{type===3?'/万辆':'/万元'+`${type===2?' (除税)':''}`}}</text>
                </view>
              </view>

              <view class="sortBox">
                <view class="sortItem" @click="handleChangeSortName(1)">
                  <text class="sortText">{{ `${Number(curYear.toString().slice(2))}年${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">{{ `${Number(curYear.toString().slice(2)) - 1}年${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>


              <view class="modalDetail">
                <scroll-view :scroll-y="true"  class="typeFirst" :style="{height: pageType===1?'calc(100vh - 270px)':'calc(100vh - 240px)'}">
                  <view class="listItem" v-for="(item,index) in dataList" :key="index">
                    <view class="itemLeft" >
                      <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
                      <view class="nameBox">
                        <text class="serviceName" :style="{fontSize:item.ServerpartName.split('服务区')[0].length>4?'26rpx':'30rpx'}">{{item.ServerpartName ? item.ServerpartName.split('服务区')[0]:''}}</text>
                        <text class="serviceLabel">服务区</text>
                      </view>
                    </view>
                    <view class="contentRight">
                      <view 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>
                          <view 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>
                          </view>
                        </view>
                      </view>
                      <view 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">{{ curYear-1 }}</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>
                      </view>

                      <view class="otherCarBox" v-if="type!==3">
                        <view 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>
                        </view>
                        <view class="MoreBox" @click="handleGoServerPartDetail(item)">
                          <img class="goMoreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
                        </view>
                      </view>
                    </view>
                  </view>

                  <view class="load-more" v-if="allDateList && allDateList.length>10*selectIndexPage">
                    <text @click="handleGetMore">{{'点击加载更多'}}</text>
                  </view>
                </scroll-view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/util/index.js'
export default {
  data() {
    return {
      statusBarHeight:'',
      menu:{},
      pageType: 1, // 选项卡选择几
      type:1,// 页面显示数据的判断
      useInfo:{},
      currentScroll:'',// 时间横向滚动当前选择的
      scrollList:'',// 时间的横向滚动的数据
      lastDay:'',// 最近有效日期
      dataList:[],// 分页数据
      allDateList:[],// 全部数据
      thisMonth:'',// 当前月份
      curYear:'',// 当前年份
      sortType: 1,// 正序降序 0正序  1降序
      sortName: 3,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
      selectIndexPage: 1,// 页数
      query:{},// 传递的query
      selectStart:'',// 开始时间
      selectEnd:'',// 结束时间
      defaultStart:'',// 没有传入开始结束时间的时候显示的开始时间
      defaultEnd:'',// 没有传入开始结束时间的时候显示的结束时间
    }
  },
  onLoad(query){
    console.log('query',query)

    if (query.searchAll === 'true'){
      this.pageType = 2
      this.selectStart =query.selectStart
      this.selectEnd =query.selectEnd
    }
    this.query = query
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()

    // 获取用户信息
    let userInfo = uni.getStorageSync('vuex')
    userInfo = JSON.parse(userInfo)
    this.useInfo = JSON.parse(JSON.stringify(userInfo))

    this.lastDay = uni.getStorageSync('lastDay')
    const nowDate = new Date(this.lastDay)
    let nowYear = nowDate.getFullYear()
    let nowMonth = nowDate.getMonth() + 1

    this.type = Number(query.type)

    const compareDate = new Date(query.yearMonth)
    let compareYear = compareDate.getFullYear()
    let compareMonth = compareDate.getMonth() + 1
    this.curYear = compareYear

    let timeList = []
    if (compareYear<nowYear){
      for (let i = 1;i<=12;i++){
        timeList.push(`${i}月`)
      }
    }else{
      for (let i = 1;i<=nowMonth;i++){
        timeList.push(`${i}月`)
      }
    }
    this.currentScroll = 'item' + query.thisMonth
    this.thisMonth = query.thisMonth
    console.log('timeList',timeList)
    this.scrollList = timeList



    // 请求数据
    if (query.searchAll === 'true'){
      this.handleSearchAllData()
    }else{
      this.handleGetData()
    }
  },
  methods:{
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 跳转到详情
    handleGoServerPartDetail(item){
      console.log('item',item)
      this.$util.toNextRoute('navigateTo', `/pages/revenueStatistics/detail?time=${this.query.yearMonth}&&month=${this.curYear}-${this.thisMonth<10?'0'+this.thisMonth:this.thisMonth}&&id=${item.ServerpartId}&&name=${item.ServerpartName}&allSearch=${(!!(this.selectStart && this.selectEnd))}&selectStart=${this.selectStart}&selectEnd=${this.selectEnd}`)
    },
    // 点击加载更多
    handleGetMore(){
      this.selectIndexPage +=1
      this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)
    },
    // 点击月份改变时间
    handleChangeTime(month){
      this.currentScroll = 'item' + month
      this.thisMonth = month

      this.handleGetData()
    },
    // 改变按月还是统计
    handleChangeType(value){
      this.pageType = value
      if (value===1){
        this.handleGetData()
      }else{
        this.handleSearchAllData()
      }
      // 请求数据
    },
    // 获取排名信息
    async handleGetData(){
      this.dataList = []
      this.allDateList = []
      this.selectIndexPage = 1
      uni.showLoading({
        title: '正在加载...'
      })
      let monthText = this.currentScroll.split('item')[1]

      const req = {
        calcType:this.pageType,
        pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
        curYear:this.curYear,
        compareYear:this.curYear-1,
        StatisticsMonth:monthText,
        StatisticsDate:this.lastDay,
        businessRegion:1,
        Dimension: this.type===3?3:'',
        SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`
      }
      console.log('req',req)
      const data = await request.$webGet('CommercialApi/Revenue/GetMonthlySPINCAnalysis',req)
      console.log('data',data)

      this.allDateList = this.handleGetSort(data.Result_Data.List)
      this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)

      uni.hideLoading()
    },
    // 传入调统计的方法
    async handleSearchAllData(){
      this.dataList = []
      this.allDateList = []
      this.selectIndexPage = 1
      uni.showLoading({
        title: '正在加载...'
      })

      let startMonth = ''
      if (this.selectStart){
        let startDate = new Date(this.selectStart)
        let y = startDate.getFullYear()
        let m = startDate.getMonth() + 1
        startMonth = `${y}${m<10?'0'+m:m}`
      }else{
        startMonth = `${this.curYear}-01`
        this.defaultStart = startMonth
      }
      let endMonth = ''
      let endM = ''
      if (this.selectEnd){
        let endDate = new Date(this.selectEnd)
        let endY = endDate.getFullYear()
        endM = endDate.getMonth() + 1
        // endMonth = `${endY}${endM<10?'0'+endM:endM}`
      }else{
        endM = this.thisMonth
        this.defaultEnd = `${this.curYear}-${this.thisMonth<10?'0'+this.thisMonth : this.thisMonth}`
        // startMonth = `${this.curYear}-${this.thisMonth<10?'0'+this.thisMonth : this.thisMonth}`
      }


      let monthText = this.currentScroll.split('item')[1]

      const req = {
        calcType: 2,
        pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
        curYear:this.curYear,
        compareYear:this.curYear-1,
        StatisticsStartMonth: startMonth,
        StatisticsMonth: endM,
        StatisticsDate:this.lastDay,
        businessRegion:1,
        Dimension: this.type===3?3:'',
        SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`
      }
      console.log('req',req)
      const data = await request.$webGet('CommercialApi/Revenue/GetMonthlySPINCAnalysis',req)
      console.log('data',data)

      this.allDateList = this.handleGetSort(data.Result_Data.List)
      this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)

      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
      }
      this.allDateList = this.handleGetSort(this.allDateList)
      this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)
      this.$forceUpdate()
      uni.hideLoading()
    },
    // 排序方法
    handleGetSort(list){
      var len = list.length;

      for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
          // 判断按照那个排序
          if (this.type===1){
            // 正序
            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;
    },
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  background: #fff;
  .bigBg{
    width: 100%;
    height: 100%;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
    background-repeat: no-repeat;
    background-size: 100% 640rpx;
    .top{
      width: 100%;
      height: 324rpx;
      //background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
      //background-repeat: no-repeat;
      //background-position: 0 0;
      //background-size: 100% 100%;
      .header{
        position: fixed;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 640rpx;
        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;
        .revenueDetailTitleBox{
          width: 100%;
          height: 90rpx;
          background: linear-gradient(180deg, #CDE1FF 0%, #ffffff 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{
            display: flex;
            align-items: center;
            .contentMonth{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #FFFFFF;
              line-height: 24rpx;
              text-align: left;
              font-style: normal;
              padding: 2rpx 8rpx;
              border-radius: 4rpx;
              margin-right: 8rpx;
              background: #F2792E;
            }
            .leftText{
              font-family: DingTalk, DingTalk;
              font-weight: 600;
              font-size: 36rpx;
              color: #000000;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
            }
            .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: #F2F1F1;
              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: #FFFFFF;
                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: 60rpx;
              .scrollItem{
                width: 60px;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 50rpx;
                display: inline-block;
                text-align: center;
              }
              .selectItem{
                display: inline-block;
                width: 60px;
                font-size: 28rpx;
                text-align: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #AFD1FF;
                position: relative;
                line-height: 40rpx;
              }
              .selectItem:after{
                content:'';
                display: inline-block;
                width: 80%;
                position: absolute;
                height: 4rpx;
                left: 10%;
                bottom: 0px;
                background: #AFD1FF;
              }
            }
          }
          .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{
                .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{
                        width: calc(100% / 3);
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        .itemLabel{
                          font-size: 24rpx;
                          font-family: PingFangSC, PingFang SC;
                          font-weight: 400;
                          color: #9A9A9A;
                          line-height: 36rpx;
                          text-align: right;
                        }
                        .itemValue{
                          font-size: 28rpx;
                          font-family: DINAlternate, DINAlternate;
                          font-weight: bold;
                          color: #160002;
                          line-height: 32rpx;
                          margin-top: 8rpx;
                          text-align: right;
                        }
                      }
                    }
                    .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;
                        }
                      }
                    }
                  }
                }
                .load-more {
                  text-align: center;
                  width: 100%;
                  height: 80rpx;
                  color: #9999;
                  font-size: 24rpx;
                }
              }
              .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>
