<template>
  <view class="main">
    <view class="bigBg">
      <view class="top">
        <view class="header" :style="{height: menu.bottom + 5 +'px'}">
          <view class="headerContent" :style="{height: (menu.bottom - menu.top) + 'px'}">
            <image class="leftIcon" @click="handleBack" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
          </view>
        </view>
        <view :style="{paddingTop: menu.bottom + 5 + 8 +'px'}">
          <view class="tabBox" >
            {{ServerpartName || ''}}
<!--            <image :class="selectTab===1?'selectTabItem':'tabItem'" @click="handleChangeTab(1)" :src="selectTab===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/activeFirstTab.png':'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/firstTab.png'"/>-->
            <div class="timeSelect">
              <span class="moreText" @click="handleShowPopup">更多筛选</span>
              <!--              <uni-datetime-picker />-->

            </div>
          </view>
          <scroll-view class="scrollView" :current="currentScroll" scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
            <view class="bigView" :style="{width: `${60*selectList.length +20}px`}">
              <view  :id="'item'+index" :class="currentScroll===`item${index}`?'selectScrollItem':'scrollItem'" v-for="(item,index) in selectList" :key="index" @click="handleChangMonth(index)">{{item}}</view>
            </view>
          </scroll-view>
        </view>

      </view>

      <view class="content">
          <!--  对客营收  -->
          <view class="customerRevenue">
            <view class="contentRevenue">
              <view class="contentTop">
                <view class="contentTopLeft">
<!--                  <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
                  <span class="contentTitle">对客销售<span class="contentUnit">/万元</span></span>
                </view>

              </view>

              <view class="dataBox">
                <view class="dataItem" style="width: 40%">
                  <span class="dataBigValue" :style="{color:topDetail.RevenueINC.increaseRate>0?'#E83944':topDetail.RevenueINC.increaseRate<0?'#0E9976':''}">{{topDetail.RevenueINC && topDetail.RevenueINC.increaseRate?topDetail.RevenueINC.increaseRate<0?`${topDetail.RevenueINC.increaseRate}%`:`+${topDetail.RevenueINC.increaseRate}%` :'-'}}</span>
                  <span class="dataLabel">同比去年</span>
                </view>
                <view class="dataItem" style="width: 30%">
                  <span class="dataValue">{{topDetail.RevenueINC ? $util.getMoney(topDetail.RevenueINC.curYearData /10000):'-'}}</span>
                  <span class="dataLabel">2024年</span>
                </view>
                <view class="dataItem" style="width: 30%">
                  <span class="dataValue">{{topDetail.RevenueINC ? $util.getMoney(topDetail.RevenueINC.lYearData / 10000):'-'}}</span>
                  <span class="dataLabel">2023年</span>
                </view>
              </view>

              <view class="addBox">
                <span>
                  增长
                  <span class="addNumber" :style="{color:topDetail.RevenueINC.increaseData>0?'#E83944':topDetail.RevenueINC.increaseData<0?'#0E9976':''}">{{topDetail.RevenueINC ? `${topDetail.RevenueINC.increaseData<0?'':'+'}${$util.getMoney(topDetail.RevenueINC.increaseData / 10000)}`:'-'}}</span>
                </span>
                <span class="staticTimeText" v-if="currentScroll==='item0'">
                  {{ `统计口径：${selectStart}月至${selectEnd}月累计` }}
                </span>
              </view>

              <view class="line"></view>

              <view class="tableBox">
                <view class="tableTop">
                  <span class="tableTitle">营收明细</span>
                  <span class="tableUnit">/万元</span>
                </view>

                <view class="tableContent">
                  <view class="tableLeft">
                    <view class="label">类别</view>
                    <view class="firstLabel">自营</view>
                    <view class="secondLabel">便利店</view>
                    <view class="secondLabel">餐饮客房</view>
                    <view class="firstLabel">外包</view>
                    <view class="secondLabel">商铺租赁</view>
                  </view>
                  <scroll-view class="tableRight" scroll-x="true">
                    <view class="labelBox">
                      <span class="label">2024年</span>
                      <span class="label">2023年</span>
                      <span class="label">增长</span>
                      <span class="label">增幅</span>
                    </view>

                    <view :class="item.type===1?'firstLabelBox':'secondLabelBox'" v-for="(item,index) in pageRevenueList" :key="index">
                      <span :class="item.type===1?'firstLabel':'secondLabel'">{{item.curYearData?$util.getMoney(item.curYearData/10000):'-'}}</span>
                      <span :class="item.type===1?'firstLabel':'secondLabel'">{{item.lYearData?$util.getMoney(item.lYearData/10000):'-'}}</span>
                      <span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseData>0?'#E83944':item.increaseData<0?'#0E9976':''}">{{item.increaseData?`${item.increaseData<0?'':'+'}${$util.getMoney(item.increaseData/10000)}`:'-'}}</span>
                      <span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseRate>0?'#E83944':item.increaseRate<0?'#0E9976':''}">{{item.increaseRate?`${item.increaseRate<0?'':'+'}${item.increaseRate}%`:'-'}}</span>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>

          <!--  营业收入  -->
          <view class="customerRevenue" style="margin-top: 24rpx">
            <view class="contentRevenue" style="background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg2.png')">
              <view class="contentTop">
                <view class="contentTopLeft">
<!--                  <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
                  <span class="contentTitle">营业收入<span class="contentUnit">/万元</span></span>
                </view>

              </view>

              <view class="dataBox">
                <view class="dataItem"  style="width: 40%">
                  <span class="dataBigValue" :style="{color:topDetail.AccountINC.increaseRate>0?'#E83944':topDetail.AccountINC.increaseRate<0?'#0E9976':''}">{{topDetail.AccountINC && topDetail.AccountINC.increaseRate?topDetail.AccountINC.increaseRate<0?`${topDetail.AccountINC.increaseRate}%`:`+${topDetail.AccountINC.increaseRate}%` :'-'}}</span>
                  <span class="dataLabel">同比去年</span>
                </view>
                <view class="dataItem"  style="width: 30%">
                  <span class="dataValue">{{topDetail.AccountINC ? $util.getMoney(topDetail.AccountINC.curYearData /10000):'-'}}</span>
                  <span class="dataLabel">2024年</span>
                </view>
                <view class="dataItem" style="width: 30%">
                  <span class="dataValue">{{topDetail.AccountINC ? $util.getMoney(topDetail.AccountINC.lYearData /10000):'-'}}</span>
                  <span class="dataLabel">2023年</span>
                </view>
              </view>

              <view class="addBox">
                增长
                <span class="addNumber"  :style="{color:topDetail.AccountINC.increaseData>0?'#E83944':topDetail.AccountINC.increaseData<0?'#0E9976':''}">{{topDetail.AccountINC ? `${topDetail.AccountINC.increaseData<0?'':'+'}${ $util.getMoney(topDetail.AccountINC.increaseData / 10000)}`:'-'}}</span>
              </view>

              <view class="line"></view>

              <view class="tableBox">
                <view class="tableTop">
                  <span class="tableTitle">营收明细</span>
                  <span class="tableUnit">/万元</span>
                </view>

                <view class="tableContent" >
                  <view class="tableLeft">
                    <view class="label">类别</view>
                    <view class="firstLabel">自营</view>
                    <view class="secondLabel">便利店</view>
                    <view class="secondLabel">餐饮客房</view>
                    <view class="firstLabel">外包</view>
                    <view class="secondLabel">商铺租赁</view>
                  </view>
                  <scroll-view class="tableRight" scroll-x="true">
                    <view class="labelBox">
                      <span class="label">2024年</span>
                      <span class="label">2023年</span>
                      <span class="label">增长</span>
                      <span class="label">增幅</span>
                    </view>
                    <view :class="item.type===1?'firstLabelBox':'secondLabelBox'" v-for="(item,index) in pageAccountList" :key="index">
                      <span :class="item.type===1?'firstLabel':'secondLabel'">{{item.curYearData?$util.getMoney(item.curYearData/10000):'-'}}</span>
                      <span :class="item.type===1?'firstLabel':'secondLabel'">{{item.lYearData?$util.getMoney(item.lYearData/10000):'-'}}</span>
                      <span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseData>0?'#E83944':item.increaseData<0?'#0E9976':''}">{{item.increaseData?`${item.increaseData<0?'':'+'}${$util.getMoney(item.increaseData/10000)}`:'-'}}</span>
                      <span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseRate>0?'#E83944':item.increaseRate<0?'#0E9976':''}">{{item.increaseRate?`${item.increaseRate<0?'':'+'}${item.increaseRate}%`:'-'}}</span>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>

          <!--  入区车流  -->
          <view class="customerRevenue" style="margin-top: 24rpx">
            <view class="contentRevenue" style="background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg3.png');background-size: cover;padding-bottom: 24rpx">
              <view class="contentTop">
                <view class="contentTopLeft">
<!--                  <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
                  <span class="contentTitle">入区车流
                <span class="contentUnit">/万辆</span>
              </span>
                </view>

              </view>

              <view class="dataBox">
                <view class="dataItem" style="width: 40%">
                  <span class="dataBigValue"  :style="{color:topDetail.BayonetINC.increaseRate>0?'#E83944':topDetail.BayonetINC.increaseRate<0?'#0E9976':''}">{{topDetail.BayonetINC && topDetail.BayonetINC.increaseRate?`${topDetail.BayonetINC.increaseRate<0?'':'+'}${topDetail.BayonetINC.increaseRate}%` :'-'}}</span>
                  <span class="dataLabel">同比去年</span>
                </view>
                <view class="dataItem" style="width: 30%">
                  <span class="dataValue">{{topDetail.BayonetINC ? $util.getMoney(topDetail.BayonetINC.curYearData /10000):'-'}}</span>
                  <span class="dataLabel">2024年</span>
                </view>
                <view class="dataItem" style="width: 30%">
                  <span class="dataValue">{{topDetail.BayonetINC ?  $util.getMoney(topDetail.BayonetINC.lYearData /10000):'-'}}</span>
                  <span class="dataLabel">2023年</span>
                </view>
              </view>

              <view class="addBox">
                增长
                <span class="addNumber" :style="{color:topDetail.BayonetINC.increaseData>0?'#E83944':topDetail.BayonetINC.increaseData<0?'#0E9976':''}">{{topDetail.BayonetINC ? `${topDetail.BayonetINC.increaseData<0?'':'+'}${$util.getMoney(topDetail.BayonetINC.increaseData / 10000)}`:'-'}}</span>
              </view>
            </view>
          </view>
      </view>
    </view>

    <uniPopup class="popupBox" type="bottom" :round="true" :showIndex="1" :show="showPop" @hidePopup="hidePopup">
      <view class="popupContentBox">
        <view class="label">统计时间：</view>
        <view class="popupTitleBox">
          <view class="timeSelectBox">
            <picker mode="date" fields="month" class="screen-unit" :end="endTime" @change="handleChangeSelectStart($event)">
              <text class="time">{{ selectStart || '开始时间' }}</text>
            </picker>
          </view>

          <span class="unit" style="margin: 0 4px">-</span>
          <view class="timeSelectBox">
            <picker mode="date" fields="month" class="screen-unit" :start="selectStart" :end="endTime" @change="handleChangeSelectEnd($event)">
              <text class="time">{{ selectEnd || '结束时间' }}</text>
            </picker>
          </view>
        </view>

        <view class="searchButton" @click="handleSearchTime">查询</view>
      </view>
    </uniPopup>
  </view>
</template>
<script>
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
export default {
  components:{
    uniPopup
  },
  data(){
    return {
      statusBarHeight: '',
      menu: {},
      lastDay: '',
      searchText: '',
      pageDataObj: {},
      OwnerListSum: {},
      MerchantSum: {},
      thisMonth: 0,
      selectTab: 1,// 选择的tab
      selectIndex:0,// 选择的月份 或者累计
      selectList:[],// 滚动的数组
      currentScroll:'',// 当前滚动到的地方
      useInfo:{},
      topDetail:{},// tab是1 的时候 三块的顶部详情
      pageRevenueList:[],// 页面上显示的对客营收
      pageAccountList:[],// 页面上营业收入
      curYear:2024,// 当前年
      ServerpartId:'',
      ServerpartName:'',// 服务区名称
      selectStart:'',// 开始时间
      selectEnd:'',// 结束时间
      showPop: false,// 低层的弹出框
      endTime:''
    }
  },
  async onLoad(option){
    console.log('option',option)
    uni.showLoading({
      title:'正在加载'
    })
    // 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    uni.setStorageSync('phoneInfo',systemInfo)
    this.menu = uni.getMenuButtonBoundingClientRect()

    // 获取用户信息
    let userInfo = uni.getStorageSync('vuex')
    userInfo = JSON.parse(userInfo)
    this.useInfo = JSON.parse(JSON.stringify(userInfo))
    if (option.time){
      this.lastDay = option.time
      const date = new Date(this.lastDay)
      let m = date.getMonth() + 1
    }
    if (option.id){
      this.ServerpartId = option.id
    }
    if (option.name){
      this.ServerpartName = option.name
    }

    if (option.month){
      this.searchText = option.month
      const selectDate = new Date(option.month)
      let selectYear = selectDate.getFullYear()
      this.curYear = selectYear

      const nowDate = new Date()
      let nowYear = nowDate.getFullYear()
      let nowMonth = nowDate.getMonth() + 1
      this.endTime = `${nowYear}-${nowMonth<10?'0'+nowMonth:nowMonth}`
      let monthNumber = 0
      if (nowYear>selectYear){
        monthNumber = 12
      }else{
        monthNumber = selectDate.getMonth() + 1
      }
      let selectMonth = selectDate.getMonth() + 1

      this.thisMonth = selectMonth
      this.selectIndex = selectMonth
      this.currentScroll = 'item' + this.thisMonth

      for (let i=1;i<=nowMonth;i++){
        this.selectList.push(`${i}月`)
      }
      this.selectList.unshift('累计')
    }

    if (option.allSearch==='true'){
      this.selectStart = option.selectStart
      this.selectEnd = option.selectEnd
      this.currentScroll = 'item0'
    }

    if (option.allSearch==='true'){
      await this.handleGetSearchAll()
    }else{
      console.log('this.selectList',this.selectList)
      await this.handleGetRevenueData()
    }

    // await this.handleGetTableData()
    uni.hideLoading()
  },
  methods:{
    // 点击查询调用的方法
    async handleSearchTime(){
      if (this.selectStart && this.selectEnd){
        this.hidePopup()
        this.currentScroll = 'item0'
        uni.showLoading({
          title:'正在加载'
        })
        await this.handleGetSearchAll()
        uni.hideLoading()
      }
    },
    async handleChangeSelectStart(e){
      this.selectStart = e.detail.value
    },
    async handleChangeSelectEnd(e){
      this.selectEnd = e.detail.value
    },
    // 弹出框点击打开
    handleShowPopup(){
      this.showPop = true
    },

    // 弹出框点击蒙层关闭
    hidePopup(){
      this.showPop = false
    },
    // 跳转到服务区排名
    handleGoSort(type){
      this.$util.toNextRoute('navigateTo', `/pages/revenueStatistics/servicePartList?type=${type}&yearMonth=${this.searchText}&thisMonth=${this.thisMonth}`)
    },
    // 查累计的
    async handleGetSearchAll(){
      let startDate = new Date(this.selectStart)
      let y = startDate.getFullYear()
      let m = startDate.getMonth() + 1
      let startMonth = `${y}${m<10?'0'+m:m}`

      let endDate = new Date(this.selectEnd)
      let endY = endDate.getFullYear()
      let endM = endDate.getMonth() + 1
      let endMonth = `${endY}${endM<10?'0'+endM:endM}`
      let lastDay = uni.getStorageSync('lastDay')
      const req = {
        calcType: 2,
        pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
        curYear: this.curYear,//本年年份
        compareYear: this.curYear-1,//历年年份
        StatisticsStartMonth:startMonth,
        StatisticsMonth: endM,//结算月份
        StatisticsDate: lastDay,
        ServerpartId:this.ServerpartId
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetMonthlyBusinessAnalysis',req)
      let res = data.Result_Data.List
      if (res && res.length>0){
        let everyTop = {}// 每一块顶部内容的汇总对象
        let revenueList = [{},{},{},{},{}]// 对客营收
        let accountList = [{},{},{}]// 营业收入
        res.forEach(item=>{
          if (item.ServerpartName==='累计'){
            everyTop = item
          }else if(item.SPRegionTypeId===1){
            // SPRegionTypeId===1 自营
            revenueList[0] = {...item.RevenueINC, type:1}
            accountList[0] = {...item.AccountINC, type:1}
          }else if(item.SPRegionTypeId===2){
            // SPRegionTypeId===2 外包
            revenueList[3] = {...item.RevenueINC, type:1}
            accountList[3] = {...item.AccountINC, type:1}
          }else if(item.ServerpartId===1){
            revenueList[1] = {...item.RevenueINC, type:2}
            accountList[1] = {...item.AccountINC, type:2}
          }else if(item.ServerpartId===2){
            revenueList[2] = {...item.RevenueINC,type:2}
            accountList[2] = {...item.AccountINC,type:2}
          }else if(item.ServerpartId===3){
            revenueList[4] = {...item.RevenueINC,type:2}
            accountList[4] = {...item.AccountINC,type:2}
          }
        })
        this.topDetail = everyTop
        this.pageRevenueList = revenueList
        this.pageAccountList = accountList
      }
    },
    async handleGetRevenueData(){
      const date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      const type = this.currentScroll.split('item')[1]==='0'?2:1
      let lastDay = uni.getStorageSync('lastDay')
      const req = {
        calcType: type,//计算方式：1【当月】，2【累计】
        pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
        curYear: this.curYear,//本年年份
        compareYear: this.curYear-1,//历年年份
        StatisticsMonth:this.thisMonth===0?y>this.curYear?12:m:this.thisMonth,//结算月份
        StatisticsDate: lastDay,
        ServerpartId:this.ServerpartId
      }
      console.log('req',req)
      const data = await request.$webGet('CommercialApi/Revenue/GetMonthlyBusinessAnalysis',req)
      console.log('data',data)
      let res = data.Result_Data.List
      if (res && res.length>0){
        let everyTop = {}// 每一块顶部内容的汇总对象
        let revenueList = [{},{},{},{},{}]// 对客营收
        let accountList = [{},{},{}]// 营业收入
        res.forEach(item=>{
          if (item.ServerpartName==='累计'){
            everyTop = item
          }else if(item.SPRegionTypeId===1){
            // SPRegionTypeId===1 自营
            revenueList[0] = {...item.RevenueINC, type:1}
            accountList[0] = {...item.AccountINC, type:1}
          }else if(item.SPRegionTypeId===2){
            // SPRegionTypeId===2 外包
            revenueList[3] = {...item.RevenueINC, type:1}
            accountList[3] = {...item.AccountINC, type:1}
          }else if(item.ServerpartId===1){
            revenueList[1] = {...item.RevenueINC, type:2}
            accountList[1] = {...item.AccountINC, type:2}
          }else if(item.ServerpartId===2){
            revenueList[2] = {...item.RevenueINC,type:2}
            accountList[2] = {...item.AccountINC,type:2}
          }else if(item.ServerpartId===3){
            revenueList[4] = {...item.RevenueINC,type:2}
            accountList[4] = {...item.AccountINC,type:2}
          }
        })
        this.topDetail = everyTop
        this.pageRevenueList = revenueList
        this.pageAccountList = accountList
      }
    },
    async handleChangMonth(index){
      this.selectIndex = index
      this.currentScroll = 'item' + index
      this.thisMonth = index
      uni.showLoading({
        title:'正在加载'
      })
      if (index===0){
        await this.handleGetSearchAll
      }else{
        await this.handleGetRevenueData()
      }
      // await this.handleGetTableData()
      uni.hideLoading()
    },
    handleChangeTab(value){
      this.selectTab = value
      // if (value===1){
      //   this.handleGetRevenueData()
      // }else{
      //   this.handleGetTableData()
      // }
    },
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    handleGoMerchantAccount(){
      uni.navigateTo({
        url: '/pages/merchantAccount/index'
      })
    },
    bindDateChange(e){
      this.OwnerListSum = {}
      this.MerchantSum = {}
      this.pageDataObj = {}
      this.searchText = e.detail.value
      this.handleGetTableData()
    },
    async handleGetTableData(){

      const date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      const type = this.currentScroll.split('item')[1]==='0'?2:1
      const req = {
        calcType: type,//计算方式：1【当月】，2【累计】
        pushProvinceCode:'340000',
        StatisticsMonth:`${this.curYear}${this.thisMonth===0?y>this.curYear?12:`${m<10?'0'+m:m}`:`${this.thisMonth<10?'0'+this.thisMonth:this.thisMonth}`}`,
        StatisticsDate:this.lastDay
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetAccountReceivable',req)
      if (data.Result_Code===100){
        this.pageDataObj = data.Result_Data
        let OwnerAcountSum = 0
        let OwnerEntrySum = 0
        let OwnerReceivableSum = 0

        let MerchantAcountSum = 0
        let MerchantEntrySum = 0
        let MerchantReceivableSum = 0
        this.pageDataObj.OwnerList.AcountList.forEach(item=>{
          OwnerAcountSum+=Number(item.value)
        })
        this.pageDataObj.OwnerList.EntryList.forEach(item=>{
          OwnerEntrySum+=Number(item.value)
        })
        this.pageDataObj.OwnerList.ReceivableList.forEach(item=>{
          OwnerReceivableSum+=Number(item.value)
        })

        this.pageDataObj.MerchantList.AcountList.forEach(item=>{
          MerchantAcountSum+=Number(item.value)
        })
        this.pageDataObj.MerchantList.EntryList.forEach(item=>{
          MerchantEntrySum+=Number(item.value)
        })
        this.pageDataObj.MerchantList.ReceivableList.forEach(item=>{
          MerchantReceivableSum+=Number(item.value)
        })
        let OwnerListSum = {
          AcountSum:this.$util.getMoney(OwnerAcountSum/ 10000),
          EntrySum:this.$util.getMoney(OwnerEntrySum/ 10000),
          ReceivableSum:this.$util.getMoney(OwnerReceivableSum / 10000)
        }
        let MerchantSum = {
          AcountSum:this.$util.getMoney(MerchantAcountSum/ 10000),
          EntrySum:this.$util.getMoney(MerchantEntrySum/ 10000),
          ReceivableSum:this.$util.getMoney(MerchantReceivableSum/ 10000)
        }
        this.OwnerListSum = OwnerListSum
        this.MerchantSum = MerchantSum
      }
    }
  }
}
</script>
<style scoped lang="scss">
@import '/static/public/revenueStatistics/stylesheet.css';
.main{
  height: 100%;
  background: #f5f5f5;
  .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: 640rpx;
      //position: relative;
      box-sizing: border-box;
      //background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
      //background-repeat: no-repeat;
      //background-size: 100% 100%;

      //background: linear-gradient(#FF7F37 0%, #FDA03E 60%, #F5F5F5 100%);
      .header{
        position: fixed;
        top: 0;left: 0;
        width: 100%;
        z-index: 9999;
        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
        background-repeat: no-repeat;
        background-size: cover;
        box-sizing: border-box;
        .headerContent{
          width: 100%;
          box-sizing: border-box;
          padding: 0 32rpx;
          position: absolute;
          bottom: 5px;
          display: flex;
          align-items: center;
          .leftIcon{
            width: 24px;
            height: 24px;
          }
          .headerTimeBox{
            margin-left: 24rpx;
            .time{
              display: flex;
              align-items: center;
              .timeIcon{
                width: 40rpx;
                height: 40rpx;
                margin-right: 8rpx;
              }
              .text{
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 44rpx;
              }
              .icon{
                width: 24rpx;
                height: 24rpx;
                margin-left: 16rpx;
              }
            }
          }
        }

      }
      .pageTitle{
        font-size: 56rpx;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 68rpx;
        position: absolute;
        left: 32rpx;
      }
      .tabBox{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 48rpx;
        color: #FFFFFF;
        line-height: 68rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        margin-left: 32rpx;

        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .tabItem{
          width: 204rpx;
          height: 68rpx;
          margin-right: 48rpx;
        }
        .selectTabItem{
          width: 204rpx;
          height: 68rpx;
          margin-right: 48rpx;
        }
        .timeSelect{
          position: absolute;
          right: 32rpx;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          .moreText{
            font-size: 16px;
            font-weight: bold;
            color: #fff;
          }
          .time{
            font-size: 14px;
            color: #fff;
          }
        }
      }
      .scrollView{
        width: calc(100vw - 64rpx);
        height: 70rpx;
        margin-top: 24rpx;
        margin-left: 32rpx;
        .bigView{
          height: 100%;
          .scrollItem{
            width: 60px;
            display: inline-block;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #AFD1FF;
            line-height: 44rpx;
            font-style: normal;
            text-align: center;
          }
          .selectScrollItem{
            width: 60px;
            display: inline-block;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            height: 50rpx;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            position: relative;
          }
          .selectScrollItem:after{
            content:'';
            display: inline-block;
            width: 80%;
            position: absolute;
            height: 4rpx;
            left: 10%;
            bottom: -5px;
            background: #fff;
          }
        }
      }
    }
    .content{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx 48rpx;
      margin-top: 24rpx;
      //position: relative;
      //top: -268rpx;
      //transform: translateY(-260rpx);
      .revenueBox{
        width: 100%;
        height: 100%;
        background:#fff;
        border-radius: 24rpx;
        box-sizing: border-box;
        padding: 4rpx;
        .bigBox{
          position: relative;
          width: 100%;
          height: 100%;
        }
        .revenueBoxHeader{
          width: 100%;
          border-radius: 12rpx 12rpx 0 0;
          box-sizing: border-box;
          padding: 22rpx 24rpx;
          .headerTitle{
            font-size: 36rpx;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            line-height: 44rpx;
          }
          .revenueImg{
            position: absolute;
            top: 0;right: 0;
            width: 266rpx;
            height: 208rpx;
          }
          .revenueContent{
            z-index: 2;
            width: 100%;
            position: relative;
            .contentTitleBox{
              display: flex;
              align-items: center;
              .selectMonth{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 24rpx;
                text-align: left;
                font-style: normal;
                padding: 4rpx 8rpx;
                border-radius: 4rpx;
                background: #F2792E;
                margin-right: 8rpx;
              }
              .contentTitle{
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #160002;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
                margin-right: 4rpx;
              }
              .contentUnit{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #9A9A9A;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }
            .sumBox{
              width: 100%;
              box-sizing: border-box;
              padding: 32rpx 24rpx;
              background: #fff;
              border-radius: 12rpx;
              margin-top: 32rpx;
              display: flex;
              justify-content: space-between;
              .left{
                display: flex;
                align-items: center;
                .sumLogo{
                  width: 96rpx;
                  height: 96rpx;
                }
                .headerTitle{
                  font-size: 36rpx;
                  font-family: Alimama ShuHeiTi;
                  font-weight: bold;
                  line-height: 44rpx;
                  margin-left: 12rpx;
                }
              }

              .sumText{
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                .sumMoney{
                  font-size: 36rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 44rpx;
                }
                .sumUnit{
                  margin-top: 8rpx;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                  .unit{
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 40rpx;
                    margin-left: 4rpx;
                  }
                }
              }
            }
            .revenueAmount{
              width: 100%;
              margin-top: 62rpx;
              .amountItem{
                .itemTop{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .itemTopLeft{
                    display: flex;
                    align-items: center;
                    .leftIcon{
                      width: 72rpx;
                      height: 72rpx;
                      margin-right: 16rpx;
                    }
                    .itemTitle{
                      font-size: 32rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 600;
                      color: #160002;
                      line-height: 44rpx;
                    }
                    .itemUnit{
                      font-size: 28rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      margin-left: 4rpx;
                      line-height: 40rpx;
                    }
                  }
                  .itemTopRight{
                    font-size: 36rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 44rpx;
                  }
                }
                .itemBottom{
                  margin-top: 24rpx;
                  .itemBottomItem{
                    width: 25%;
                    display: inline-block;
                    .bottomItemTitle{
                      font-size: 28rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 40rpx;
                      margin-bottom: 4rpx;
                    }
                    .bottomItemValue{
                      font-size: 32rpx;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      color: #160002;
                      line-height: 40rpx;
                    }
                  }
                }
              }
            }
          }
        }

      }
      .ydRevenue{
        .revenueBoxHeader{
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg4.png");
          background-repeat: no-repeat;
          background-size: contain;
          //background: linear-gradient(#FCF3E5 0%, #FDF6EC 22%,#FFFFFF 40%, #FFFFFF 100%);
          .headerTitle{
            color: #EC6C00;
          }
        }
      }
      .merchantRevenue{
        .revenueBoxHeader{
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg5.png");
          background-repeat: no-repeat;
          background-size: contain;
          //background: linear-gradient(#E9F5F9 0%, #E9F5F9 22%,#FFFFFF 40%, #FFFFFF 100%);
          .headerTitle{
            color: #018ABD;
          }
        }
      }
      .otherData{
        .revenueBoxHeader{
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg6.png");
          background-repeat: no-repeat;
          background-size: contain;
          //background: linear-gradient(#F1F7FF 0%, #FFFFFF 20% , #FFFFFF 100%);
          .headerTitle{
            color: #096EF7;
          }
        }
      }


      .customerRevenue{
        width: 100%;
        padding: 2rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 16rpx;
        .contentRevenue{
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg1.png");
          background-repeat: no-repeat;
          background-size: contain;
          box-sizing: border-box;
          padding: 30rpx 22rpx 0;
          .contentTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .contentTopLeft{
              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;
              }
              .contentTitle{
                display: flex;
                align-items: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #160002;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
                margin-right: 8rpx;
                .contentUnit{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9A9A9A;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
            }
            .contentTopRight{
              display: flex;
              align-items: center;
              .moreText{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #2C99FE;
                line-height: 40rpx;
              }
              .moreIcon{
                width: 24rpx;
                height: 24rpx;
                margin-left: 4rpx;
              }
            }
          }

          .dataBox{
            width: 100%;
            display: flex;
            align-items: center;
            .dataItem{
              display: flex;
              flex-direction: column;
              margin-top: 32rpx;
              .dataBigValue{
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 50rpx;
                color: #E83944;
                line-height: 64rpx;
                text-align: left;
                font-style: normal;
              }
              .dataLabel{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #9A9A9A;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
              .dataValue{
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 36rpx;
                color: #160002;
                line-height: 64rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }

          .addBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #9A9A9A;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-top: 16rpx;
            .addNumber{
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 28rpx;
              color: #E83944;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
              margin-left: 8rpx;
            }
            .staticTimeText{

              font-weight: 400;
              font-size: 24rpx;
              color: #9A9A9A;
            }
          }

          .line{
            width: 100%;
            height: 2rpx;
            background: #F5F4F4;
            margin: 40rpx 0;
          }

          .tableBox{
            .tableTop{
              display: flex;
              align-items: center;
              .tableTitle{
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                color: #160002;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
              .tableUnit{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #9A9A9A;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                margin-left: 4rpx;
              }
            }

            .tableContent{
              margin-top: 16rpx;
              width: 100%;
              height: 460rpx;
              display: flex;
              .tableLeft{
                width: 192rpx;
                height: 100%;
                background: #FFFFFF;
                box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(0,0,0,0.05);
                box-sizing: border-box;
                padding: 24rpx 0 24rpx;
                .label{
                  width: 100%;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #57607B;
                  line-height: 50rpx;
                  text-align: left;
                  font-style: normal;
                  display: inline-block;
                  height: 50rpx;
                }
                .firstLabel{
                  width: 100%;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  font-size: 28rpx;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                  margin: 32rpx 0;
                }
                .secondLabel{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                  padding-left: 16rpx;
                  margin: 32rpx 0;
                }
              }

              .tableRight{
                width: calc(100% - 192rpx);
                height: 100%;
                box-sizing: border-box;
                padding: 24rpx 24rpx 0;
                .labelBox{
                  width: 592rpx;
                  .label{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #57607B;
                    text-align: right;
                    font-style: normal;
                    display: inline-block;
                    width: 148rpx;
                  }
                }
                .firstLabelBox{
                  width: 592rpx;
                  height: 40rpx;
                  margin: 32rpx 0;
                  .firstLabel{
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    font-size: 26rpx;
                    color: #160002;
                    line-height: 40rpx;
                    text-align: right;
                    font-style: normal;
                    display: inline-block;
                    width: 148rpx;
                  }
                }
                .secondLabelBox{
                  width: 592rpx;
                  height: 40rpx;
                  margin: 32rpx 0;
                  .secondLabel{
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    font-size: 26rpx;
                    color: #160002;
                    line-height: 40rpx;
                    text-align: right;
                    font-style: normal;
                    display: inline-block;
                    width: 148rpx;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .popupContentBox{
    box-sizing: border-box;
    padding: 16px;
    width: 100%;
    height: 200px;
    position: relative;
    .label{
      font-size: 16px;
      font-weight: 600;
      display: flex;
      width: 100%;
      justify-content: flex-start;
    }
    .popupTitleBox{
      display: flex;
      align-items: center;
      .timeSelectBox{
        width: 45%;
      }
      .unit{
        width: 10%;
        display: inline-block;
        text-align: center;
      }
    }

    .searchButton{
      position: absolute;
      left: 10%;
      bottom: 0;
      //margin-left: 10%;
      //margin-top: 40px;
      width: 80%;
      font-weight: 600;
      font-size: 32rpx;
      color: #FFFFFF;
      padding: 6px 0;
      text-align: center;
      background: #1890FF;
      border-radius: 8rpx;
    }
  }
}
</style>
