<template>
  <div class="main">
    <div class="top">
      <div 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"/>
        <img class="pageTitle" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/pageTitle.png"/>
      </div>
    </div>

    <div class="pageContent">
      <div class="springTravelBox">
        <div class="overAllData">
          <div class="overAllDataTop">
            <div class="titleBox">
              <img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />
              <text class="titleNotice">{{`/统计到${allDateDay}`}}</text>
            </div>
            <div class="contentTitleBox">
              <text class="contentTitle">对客销售金额</text>
              <div class="YOYBox">
                <text class="YOYBoxText">同比去年</text>
                <text class="YOYBoxValue">
                  {{`${revenueAdd>0?'+':''}${revenueAdd?revenueAdd:'-'}%`}}
                </text>
              </div>
            </div>
          </div>

          <div class="overAllDataBottom">
            <div class="pkBox">
              <div class="leftBox">
                <text class="value">{{pageData.lYearRevenue.data?$util.getMoney(pageData.lYearRevenue.data / 10000):'0.00'}}</text>
                <text class="label">2023年/万元</text>
              </div>
              <div class="rightBox">
                <text class="value">{{pageData.curYearRevenue.data?$util.getMoney(pageData.curYearRevenue.data / 10000):'0.00'}}</text>
                <text class="label">2024年/万元</text>
              </div>
              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/national/vs.svg"/>
            </div>

            <div class="otherListBox">
              <div class="listTitleBox">
                <div class="titleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
                <div class="titleItem" style="width: 130rpx">2023年</div>
                <div class="titleItem" style="width: 130rpx">2024年</div>
                <div class="titleItem" style="width: 130rpx">同比去年</div>
              </div>

              <div class="listValueBox">
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营营业额</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.lYearSelfRevenue.data?$util.getMoney(pageData.lYearSelfRevenue.data / 10000):'0.00'}}</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.curYearSelfRevenue.data?$util.getMoney(pageData.curYearSelfRevenue.data / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:selfRevenueAdd>0?'#E83944':selfRevenueAdd<0?'#0E9976':''}">{{selfRevenueAdd>0?'+':selfRevenueAdd<0?'':''}}</span>
                    <span :style="{color:selfRevenueAdd>0?'#E83944':selfRevenueAdd<0?'#0E9976':''}">{{`${selfRevenueAdd || '-'}%`}}</span>
                  </div>
                </div>

                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">驿达春运营收</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.lYearAccount.data?$util.getMoney(pageData.lYearAccount.data / 10000):'0.00'}}</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.curYearAccount.data?$util.getMoney(pageData.curYearAccount.data / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:springRevenueAdd>0?'#E83944':springRevenueAdd<0?'#0E9976':''}">{{springRevenueAdd>0?'+':springRevenueAdd<0?'':''}}</span>
                    <span :style="{color:springRevenueAdd>0?'#E83944':springRevenueAdd<0?'#0E9976':''}">{{`${springRevenueAdd || '-'}%`}}</span>
                  </div>
                </div>

                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">商铺租赁</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.lYearCoopRevenue.data?$util.getMoney(pageData.lYearCoopRevenue.data / 10000):'0.00'}}</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.curYearCoopRevenue.data?$util.getMoney(pageData.curYearCoopRevenue.data / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:CoopRevenueAdd>0?'#E83944':CoopRevenueAdd<0?'#0E9976':''}">{{CoopRevenueAdd>0?'+':CoopRevenueAdd<0?'':''}}</span>
                    <span :style="{color:CoopRevenueAdd>0?'#E83944':CoopRevenueAdd<0?'#0E9976':''}">{{`${CoopRevenueAdd || '-'}%`}}</span>
                  </div>
                </div>

                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">万佳城市</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.lYearWJRevenue.data?$util.getMoney(pageData.lYearWJRevenue.data / 10000):'0.00'}}</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.curYearWJRevenue.data?$util.getMoney(pageData.curYearWJRevenue.data / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:WJCityAdd>0?'#E83944':WJCityAdd<0?'#0E9976':''}">{{WJCityAdd>0?'+':WJCityAdd<0?'':''}}</span>
                    <span :style="{color:WJCityAdd>0?'#E83944':WJCityAdd<0?'#0E9976':''}">{{`${WJCityAdd || '-'}%`}}</span>
                  </div>
                </div>

                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">入区车流</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.lYearBayonet.data?$util.getMoney(pageData.lYearBayonet.data / 10000):'0.00'}}</div>
                  <div class="valueItemBox" style="width: 130rpx">{{pageData.curYearBayonet.data?$util.getMoney(pageData.curYearBayonet.data / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:entryCarAdd>0?'#E83944':entryCarAdd<0?'#0E9976':''}">{{entryCarAdd>0?'+':entryCarAdd<0?'':''}}</span>
                    <span :style="{color:entryCarAdd>0?'#E83944':entryCarAdd<0?'#0E9976':''}">{{`${entryCarAdd || '-'}%`}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="revenueDetail">
          <div class="revenueDetailTitleBox">
            <img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueDetailLogo.png"/>
            <img class="detailIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueDetailIcon.png"/>
          </div>
          <div class="revenueContent">
            <scroll-view scroll-x="true" class="navList" :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 class="modalBox">
              <div class="modalTitleBox">
                <div class="modalIndex"></div>
                <text class="modalText">自营营业额</text>
                <text class="modalUnit">/万元</text>
              </div>

              <div class="modalDetail">
                <div class="modalDetailTitle">
                  <div class="titleItem"  :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
                  <div class="titleItem"  style="width: 130rpx">2023年</div>
                  <div class="titleItem"  style="width: 130rpx">2024年</div>
                  <div class="titleItem"  style="width: 130rpx">同比去年</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营餐饮</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.lYearSCAccount.value?$util.getMoney(pageData.lYearSCAccount.value / 10000):'0.00'}}</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearSCAccount.value?$util.getMoney(pageData.curYearSCAccount.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:SCAccountAdd>0?'#E83944':SCAccountAdd<0?'#0E9976':''}">{{SCAccountAdd>0?'+':SCAccountAdd<0?'':''}}</span>
                    <span :style="{color:SCAccountAdd>0?'#E83944':SCAccountAdd<0?'#0E9976':''}">{{`${SCAccountAdd || '-'}%`}}</span>
                  </div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营便利店</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.lYearCVSAccount.value?$util.getMoney(pageData.lYearCVSAccount.value / 10000):'0.00'}}</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearCVSAccount.value?$util.getMoney(pageData.curYearCVSAccount.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:CVSAccountAdd>0?'#E83944':CVSAccountAdd<0?'#0E9976':''}">{{CVSAccountAdd>0?'+':CVSAccountAdd<0?'':''}}</span>
                    <span :style="{color:CVSAccountAdd>0?'#E83944':CVSAccountAdd<0?'#0E9976':''}">{{`${CVSAccountAdd || '-'}%`}}</span>
                  </div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.lYearSCAccount.value || pageData.lYearCVSAccount.value?$util.getMoney((Number(pageData.lYearSCAccount.value) + Number(pageData.lYearCVSAccount.value)) / 10000):'0.00'}}</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearSCAccount.value || pageData.curYearCVSAccount.value?$util.getMoney((Number(pageData.curYearSCAccount.value) + Number(pageData.curYearCVSAccount.value)) / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:SCCVSAccountAdd>0?'#E83944':SCCVSAccountAdd<0?'#0E9976':''}">{{SCCVSAccountAdd>0?'+':SCCVSAccountAdd<0?'':''}}</span>
                    <span :style="{color:SCCVSAccountAdd>0?'#E83944':SCCVSAccountAdd<0?'#0E9976':''}">{{`${SCCVSAccountAdd || '-'}%`}}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="modalBox">
              <div class="modalTitleBox">
                <div class="modalIndex"></div>
                <text class="modalText">驿达春运营收</text>
                <text class="modalUnit">/万元</text>
              </div>

              <div class="modalDetail">
                <div class="modalDetailTitle">
                  <div class="titleItem"  :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
                  <div class="titleItem"  style="width: 130rpx">2023年</div>
                  <div class="titleItem"  style="width: 130rpx">2024年</div>
                  <div class="titleItem"  style="width: 130rpx">同比去年</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营餐饮</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营便利店</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">商铺租赁营收</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.lYearCoopRevenue.value?$util.getMoney(pageData.lYearCoopRevenue.value / 10000):'0.00'}}</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearCoopRevenue.value?$util.getMoney(pageData.curYearCoopRevenue.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:CoopRevenueDayilyAdd>0?'#E83944':CoopRevenueDayilyAdd<0?'#0E9976':''}">{{CoopRevenueDayilyAdd>0?'+':CoopRevenueDayilyAdd<0?'':''}}</span>
                    <span :style="{color:CoopRevenueDayilyAdd>0?'#E83944':CoopRevenueDayilyAdd<0?'#0E9976':''}">{{`${CoopRevenueDayilyAdd || '-'}%`}}</span>
                  </div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">万佳城市店</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.lYearWJRevenue.value?$util.getMoney(pageData.lYearWJRevenue.value / 10000):'0.00'}}</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearWJRevenue.value?$util.getMoney(pageData.curYearWJRevenue.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">
                    <span :style="{color:WjCityDayilyAdd>0?'#E83944':WjCityDayilyAdd<0?'#0E9976':''}">{{WjCityDayilyAdd>0?'+':WjCityDayilyAdd<0?'':''}}</span>
                    <span :style="{color:WjCityDayilyAdd>0?'#E83944':WjCityDayilyAdd<0?'#0E9976':''}">{{`${WjCityDayilyAdd || '-'}%`}}</span>
                  </div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
              </div>
            </div>

            <div class="modalBox">
              <div class="modalTitleBox">
                <div class="modalIndex"></div>
                <text class="modalText">加盟餐饮</text>
                <text class="modalUnit">/万元</text>
              </div>

              <div class="modalDetail">
                <div class="modalDetailTitle">
                  <div class="titleItem"  :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
                  <div class="titleItem"  style="width: 130rpx">2023年</div>
                  <div class="titleItem"  style="width: 130rpx">2024年</div>
                  <div class="titleItem"  style="width: 130rpx">同比去年</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营餐饮</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearFCRevenue.value?$util.getMoney(pageData.curYearFCRevenue.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">客房其他</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearGRORevenue.value?$util.getMoney(pageData.curYearGRORevenue.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearFCRevenue.value || pageData.curYearGRORevenue.value?$util.getMoney((Number(pageData.curYearFCRevenue.value) + Number(pageData.curYearGRORevenue.value)) / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
              </div>
            </div>

            <div class="modalBox">
              <div class="modalTitleBox">
                <div class="modalIndex"></div>
                <text class="modalText">自营提成</text>
                <text class="modalUnit">/万元</text>
              </div>

              <div class="modalDetail">
                <div class="modalDetailTitle">
                  <div class="titleItem"  :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
                  <div class="titleItem"  style="width: 130rpx">2023年</div>
                  <div class="titleItem"  style="width: 130rpx">2024年</div>
                  <div class="titleItem"  style="width: 130rpx">同比去年</div>
                </div>
                <div class="row">
                  <div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
                  <div class="compareItem" style="width: 130rpx">-</div>
                  <div class="compareItem" style="width: 130rpx">{{pageData.curYearSelfCoopRevenue.value?$util.getMoney(pageData.curYearSelfCoopRevenue.value / 10000):'0.00'}}</div>
                  <div class="addItem" style="width: 130rpx">-</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/util/index.js'
import moment from "moment";
export default {
  name: "springTravel",
  data(){
    return {
      statusBarHeight:0,
      menu:{},
      scrollList:[
        {label: '1月26日',value:'2024-01-26'},
        {label: '1月27日',value:'2024-01-27'},
        {label: '1月28日',value:'2024-01-28'},
        {label: '1月29日',value:'2024-01-29'},
        {label: '1月30日',value:'2024-01-30'},
        {label: '1月31日',value:'2024-01-31'},
        {label: '2月1日',value:'2024-02-1'},
        {label: '2月2日',value:'2024-02-2'},
      ],
      currentScroll:'',
      selectIndex: 2,
      curYear:2024,
      compareYear:2023,
      lastDay:'',
      allDateDay:'',
      pageData:{},// 当天的数据
      yesDayPageData:{},// 前一天的数据
      revenueAdd: 0,// 对客销售金额增长
      selfRevenueAdd: 0,// 自营营业额增长
      springRevenueAdd: 0,// 春运营收增长
      CoopRevenueAdd:0,// 商铺租赁营收增长
      WJCityAdd: 0,// 万佳城市增长
      entryCarAdd:0,// 入区车流增长
      SCAccountAdd:0,// 自营餐饮增长
      CVSAccountAdd:0,// 自营便利店增长
      SCCVSAccountAdd:0,// 自营餐饮和自营便利店的合计增长
      YDCVSAccountAdd:0,// 驿达自营便利店
      WjCityDayilyAdd:0,// 万佳城市店每日
      CoopRevenueDayilyAdd:0,// 商铺租赁每日
    }
  },
  onLoad(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))
    if (query.selectType){
      this.selectIndex = Number(query.selectType)
    }

    const date = new Date()
    let y = date.getFullYear()
    this.curYear = y
    this.compareYear = y - 1
    console.log('query',query)
    console.log('this.selectIndex',this.selectIndex)

    this.lastDay = uni.getStorageSync('lastDay')
    this.currentScroll = 'item'+ uni.getStorageSync('lastDay')
    console.log('this.currentScroll',this.currentScroll)
    const lastDate = new Date(this.lastDay)
    let lastM = lastDate.getMonth() + 1
    let lastD = lastDate.getDate()
    this.allDateDay = `${lastM<10?'0'+lastM:lastM}月${lastD<10?'0'+lastD:lastD}日`

    this.handleGetPageData()
  },
  methods:{
    async handleGetPageData(date){
      uni.showLoading({
        title: '正在加载...'
      })
      let req = {
        pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
        curYear:this.curYear,
        compareYear:this.compareYear,
        HolidayType:this.selectIndex,
        StatisticsDate:date || this.lastDay
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetHolidayAnalysis',req)
      console.log('data',data)
      this.pageData = data.Result_Data
      console.log('this.pageData',this.pageData)
      // 对客销售金额增长
      this.revenueAdd = Number((((this.pageData.curYearRevenue.data / this.pageData.lYearRevenue.data)-1)*100).toFixed(2))
      // 自营营业额增长
      this.selfRevenueAdd = Number((((this.pageData.curYearSelfRevenue.data / this.pageData.lYearSelfRevenue.data)-1)*100).toFixed(2))
      // 春运营收增长
      this.springRevenueAdd = Number((((this.pageData.curYearAccount.data / this.pageData.lYearAccount.data)-1)*100).toFixed(2))
      // 商铺租赁营收增长
      this.CoopRevenueAdd = Number((((this.pageData.curYearCoopRevenue.data / this.pageData.lYearCoopRevenue.data)-1)*100).toFixed(2))
      // 万佳城市增长
      this.WJCityAdd = Number((((this.pageData.curYearWJRevenue.data / this.pageData.lYearWJRevenue.data)-1)*100).toFixed(2))
      // 入区车流增长
      this.entryCarAdd = Number((((this.pageData.curYearBayonet.data / this.pageData.lYearBayonet.data)-1)*100).toFixed(2))


      // 当日
      // 自营餐饮
      this.SCAccountAdd = Number((((this.pageData.curYearSCAccount.value / this.pageData.lYearSCAccount.value)-1)*100).toFixed(2))
      // 自营便利店增长
      this.CVSAccountAdd = Number((((this.pageData.curYearCVSAccount.value / this.pageData.lYearCVSAccount.value)-1)*100).toFixed(2))
      // 自营餐饮和自营便利店的合计增长
      this.SCCVSAccountAdd = Number(((((Number(this.pageData.curYearCVSAccount.value) + Number(this.pageData.curYearSCAccount.value)) / (Number(this.pageData.lYearCVSAccount.value) + Number(this.pageData.lYearSCAccount.value)))-1)*100).toFixed(2))
      // 驿达自营便利店
      this.YDCVSAccountAdd = Number((((this.pageData.curYearCVSAccount.value / this.pageData.lYearCVSAccount.value)-1)*100).toFixed(2))
      // 万佳城市店
      this.WjCityDayilyAdd = Number((((this.pageData.curYearWJRevenue.value / this.pageData.lYearWJRevenue.value)-1)*100).toFixed(2))
      // 商铺租赁每日
      this.CoopRevenueDayilyAdd = Number((((this.pageData.curYearCoopRevenue.value / this.pageData.lYearCoopRevenue.value)-1)*100).toFixed(2))
      uni.hideLoading()
    },
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
  //   切换时间的方法
    handleChangeTime(value){
      console.log('value',value)
      this.currentScroll = 'item'+value
      this.pageData = null
      this.revenueAdd = 0
      this.selfRevenueAdd = 0
      this.springRevenueAdd = 0
      this.CoopRevenueAdd = 0
      this.WJCityAdd = 0
      this.entryCarAdd = 0
      this.SCAccountAdd = 0
      this.CVSAccountAdd = 0
      this.SCCVSAccountAdd = 0
      this.YDCVSAccountAdd = 0
      this.WjCityDayilyAdd = 0
      this.CoopRevenueDayilyAdd = 0
      this.handleGetPageData(value)
    }
  }
}
</script>
<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  .top{
    width: 100%;
    height: 432rpx;
    background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/springTravelBg.png") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    //z-index:3;
    .topBg{
      width: 100%;
      height: 100%;
      z-index: 4;
    }
    .header{
      position: fixed;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/springTravelBg.png") !important;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 432rpx;
      display: flex;
      align-items: center;
      z-index: 2;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
        position: absolute;
      }
      .pageTitle{
        position: absolute;
        width: 280rpx;
        height: 80rpx;
        margin-left: 16rpx;
        bottom: -3px;
        left: 40px;
      }
    }
  }

  .pageContent{
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 28rpx;
    transform: translateY(-110rpx);
    .springTravelBox{
      .overAllData{
        width: 100%;
        box-sizing: border-box;
        padding: 2rpx;
        background: #fff;
        border-radius: 16rpx;
        .overAllDataTop{
          width: 100%;
          height: 160rpx;
          background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FEDEDD 100%);
          border-radius: 14rpx 14rpx 16rpx 16rpx;
          box-sizing: border-box;
          padding: 22rpx;
          .titleBox{
            width: 100%;
            display: flex;
            .titleImg{
              width: 216rpx;
              height: 74rpx;
            }
            .titleNotice{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #9A9A9A;
              line-height: 36rpx;
            }
          }
          .contentTitleBox{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .contentTitle{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #160002;
              line-height: 36rpx;
            }
            .YOYBox{
              .YOYBoxText{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .YOYBoxValue{
                font-size: 36rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #E83944;
                line-height: 40rpx;
              }
            }
          }
        }

        .overAllDataBottom{
          width: 100%;
          box-sizing: border-box;
          padding: 0 24rpx 24rpx;
          .pkBox{
            width: 100%;
            height: 140rpx;
            position: relative;
            box-sizing: border-box;
            .pkLogo{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: 56rpx;
              height: 56rpx;
            }
            .leftBox,.rightBox{
              width: 50%;
              height: 100%;
              box-sizing: border-box;
              padding: 24rpx 32rpx;
              display: flex;
              flex-direction: column;
              position: absolute;
            }
            .leftBox{
              left: 0;top: 0;
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vsLeft.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              .value{
                font-size: 44rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #FF5A3C;
                line-height: 52rpx;
              }
              .label{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FF5A3C;
                line-height: 40rpx;
              }
            }

            .rightBox{
              right: 0;top: 0;
              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vsRight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              align-items: flex-end;
              .value{
                font-size: 44rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 52rpx;
              }
              .label{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 40rpx;
              }
            }
          }

          .otherListBox{
            width: 100%;
            background: #F8F8F8;
            border-radius: 16rpx;
            padding: 24rpx;
            box-sizing: border-box;
            margin-top: 24rpx;
            .listTitleBox{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .titleItem{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9A9A9A;
                line-height: 32rpx;
                text-align: center;
              }
            }

            .listValueBox{
              width: 100%;
              .row{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 32rpx;
                .valueItem{
                  text-align: center;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                }
                .valueItemBox{
                  text-align: center;
                  font-size: 28rpx;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 40rpx;
                }
                .addItem{
                  text-align: center;
                  font-size: 28rpx;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  line-height: 40rpx;
                }
              }
            }
          }
        }
      }

      .revenueDetail{
        width: 100%;
        background: #fff;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 2rpx;
        margin-top: 24rpx;
        .revenueDetailTitleBox{
          width: 100%;
          height: 90rpx;
          background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FEDEDD 100%);
          border-radius: 14rpx 14rpx 0rpx 0rpx;
          box-sizing: border-box;
          padding: 22rpx;
          position: relative;
          .detailLogo{
            width: 144rpx;
            height: 72rpx;
          }
          .detailIcon{
            width: 104rpx;
            height: 104rpx;
            position: absolute;
            right: 22rpx;
            top: 22rpx;
          }
        }
        .revenueContent{
          width: 100%;
          box-sizing: border-box;
          padding: 0 22rpx 24rpx;
          .navList{
            width: 100%;
            height: 40rpx;
            display: flex;
            align-items: center;
            white-space: nowrap;
            padding-bottom: 12rpx;
            border-bottom: 1px solid #F5F4F4;
            margin-bottom: 32rpx;
            .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;
              line-height: 40rpx;
            }
          }

          .modalBox{
            margin-top: 40rpx;
            .modalTitleBox{
              width: 100%;
              display: flex;
              align-items: center;
              margin-bottom: 16rpx;
              .modalIndex{
                width: 12rpx;
                height: 12rpx;
                background: #DB6465;
                border-radius: 50%;
                margin-right: 12rpx;
              }
              .modalText{
                font-size: 28rpx;
                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;
              }
            }

            .modalDetail{
              width: 100%;
              box-sizing: border-box;
              padding: 24rpx;
              background: #F8F8F8;
              .modalDetailTitle{
                display: flex;
                align-items: center;
                .titleItem{
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #9A9A9A;
                  line-height: 32rpx;
                  text-align: center;
                }
              }
              .row{
                margin-top: 32rpx;
                display: flex;
                align-items: center;
                margin-top: 32rpx;
                .valueItem{
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: center;
                }
                .compareItem{
                  font-size: 28rpx;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: center;
                }
                .addItem{
                  font-size: 28rpx;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  color: #E83944;
                  line-height: 40rpx;
                  text-align: center;
                }
              }
            }
          }
        }

      }
    }
  }
}
</style>
