<template>
  <div class="main">
    <div class="top">
      <image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png"/>
      <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"/>
      </div>
      <div class="topContent" :style="{top:200+'rpx'}">
        <p class="pageTitle" >节日特刊</p>
      </div>
    </div>
    <div class="pageContent">
      <!--      服务区当日营收 Top30-->
      <div class="dailyRevenue" :style="{height:(680+(revenueList.length-5)*70) + 'rpx'}" v-if="pageType===1">
        <div class="dailyContent">
          <image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/revenueItemBg.png"/>
          <div class="list">
            <div class="listTop">
              <p class="title">{{dayName}}当日营收 Top30</p>
            </div>
            <div class="listBox">
              <div class="itemTop">
                <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/firstItemIcon.svg"/>
                <div class="revenueBox">
                  <p class="revenueValue">{{ $util.fmoney(revenueSum,2) }}</p>
                  <p class="revenueText">总营收 <span>/元</span></p>
                </div>
              </div>

              <div class="listItemTop" >
                <div class="listTopItem" v-for="(item,index) in revenueList" :key="index">
                  <div class="itemLeft">
                    <image v-if="index<3" class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
                    <div class="otherIcon" v-else>{{index + 1}}</div>
                    <!--                    <span class="type">{{item.ShopRegionName}}</span>-->
                    <span class="name">{{item.Serverpart_Name.split('服务区')[0]}}</span>
                  </div>
                  <div class="itemRight">
                    <span class="itemValue">{{$util.fmoney(item.CashPay,2)}}<span class="unit">/元</span></span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      当日入区车流量 Top30-->
      <div class="dailyEntry" v-if="pageType===2" :style="{height:(680+(entryCarList.length-5)*70) + 'rpx'}">
        <div class="dailyContent">
          <image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryIcon.png"/>
          <div class="list">
            <div class="listTop">
              <p class="title">{{dayName}}入区车流量 Top30</p>

            </div>
            <div class="listBox">
              <div class="itemTop">
                <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pass.svg"/>
                <div class="revenueBox">
                  <p class="revenueValue">{{$util.noDecimal(entrySum)}}</p>
                  <p class="revenueText">总车流量<span>/辆</span></p>
                </div>
              </div>

              <div class="listItemTop" >
                <div class="listTopItem" v-for="(item,index) in entryCarList" :key="index">
                  <div class="itemLeft">
                    <image class="itemIcon" v-if="index<3" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
                    <div class="otherIcon" v-else>{{index + 1}}</div>

                    <span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
                  </div>
                  <div class="itemRight">
                    <span class="itemValue">{{$util.noDecimal(item.Vehicle_Count) }}<span class="unit">/辆</span></span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      当日入区车流量增幅 Top30-->
      <div class="dailyEntryAdd" v-if="pageType===3" :style="{height:(500+(addList.length-5)*70) + 'rpx'}">
        <div class="dailyContent">
          <image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryAdd.png"/>
          <div class="list">
            <div class="listTop">
              <p class="title">{{dayName}}入区车流量增幅 Top30</p>
            </div>
            <div class="listBox">
              <div class="listItemTop" >
                <div class="listTopItem" v-for="(item,index) in addList" :key="index">
                  <div class="itemLeft">
                    <image class="itemIcon" v-if="index<3" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
                    <div class="otherIcon" v-else>{{index + 1}}</div>
                    <span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
                  </div>
                  <div class="itemRight">
                    <image class="addIcon" src='/static/images/examine/add.svg'/>
                    <span class="itemValue">{{item.Entry_GrowthRate}}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/util/index.js'
export default {
  name: "moreList",
  data(){
    return {
      statusBarHeight:0,
      menu:{},
      type:null,
      revenueList: [],// 营收排行
      revenueSum:0,// 营收总计
      entryCarList:[],//入区排行
      entrySum:0,// 入区总计
      addList:[],// 增幅排行
      pageType:0,// 判断显示什么
      useInfo:{},
      dayName:''
    }
  },
  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))
    this.pageType = Number(query.type)
    this.dayName = query.dayName
    if (this.pageType===1){
      uni.showLoading({
        title: '正在加载...'
      })
      this.handleGetRevenue(query.time)
    }else if (this.pageType===2 || this.pageType===3){
      uni.showLoading({
        title: '正在加载...'
      })
      this.handleGetCar(query.time)
    }
  },
  methods:{
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 拿到营收排行
    async handleGetRevenue(date){
      const req= {
        pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
        Statistics_Date:date,
        Revenue_Include:1
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetSPRevenueRank',req)
      console.log('拿到营收排行',data)
      this.revenueSum = data.Result_Data.OtherData
      this.revenueList = data.Result_Data.List.slice(0,30)
        uni.hideLoading()
    },
    // 车流排行
    async handleGetCar(date){
      const req= {
        pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
        StatisticsEndDate:date,
        ShowGrowthRate:true
      }
      const data = await request.$webGet('CommercialApi/BigData/GetBayonetGrowthAnalysis',req)
      console.log('车流排行',data)
      this.entrySum = data.Result_Data.sumEntryCount
      this.entryCarList = data.Result_Data.EntryList.slice(0,30)
      // this.addList = data.Result_Data.GrowthList.slice(0,30)
      let list  = []
      data.Result_Data.GrowthList.forEach(item=>{
        if (item.Entry_GrowthRate>100){
          list.push(item)
        }
      })
      this.addList = list.slice(0,30)
      uni.hideLoading()
    }
  }
}
</script>



<style scoped lang="scss">
@import '/static/public/fontNational/stylesheet.css';
.main {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 560rpx;
    position: relative;

    .topBg {
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .header{
      position: fixed;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: cover;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      z-index: 2;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
        position: absolute;
      }
    }

    .topContent {
      position: absolute;
      left: 32rpx;

      .pageTitle {
        font-size: 56rpx;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 68rpx;
        text-shadow: 0px 8px 20px rgba(158, 29, 0, 0.25);
        background: linear-gradient(180deg, #FEFFFE 0%, #FFC7B6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .pageContent{
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 28rpx;
    transform: translateY(-260rpx);
    .dailyRevenue{
      width: 100%;
      height: 680rpx;
      background: #fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 2px;
      .dailyContent{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(360deg, rgba(255,233,229,0) 0%, rgba(255,233,229,0.7) 21%, #FFE9E5 100%);
        border-radius: 20rpx;
        position: relative;
        .itemBg{
          width: 266rpx;
          height: 208rpx;
          position: absolute;
          right: 0;top: 0;
          z-index:1;
        }
        .list{
          position: absolute;
          width: calc(100% - 48rpx);
          z-index: 2;
          .listTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-size: 36rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #F95222;
              line-height: 44rpx;
            }
            .moreBox{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .moreIcon{
                width: 20rpx;
                height: 40rpx;
                margin-left: 4rpx;
              }

            }
          }

          .listBox{
            width: 100%;
            background: #fff;
            margin-top: 22rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 32rpx;
            .itemTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding-bottom: 36rpx;
              border-bottom: 2rpx solid #F7F4F4;
              .itemIcon{
                width: 96rpx;
                height: 96rpx;
                border-radius: 16rpx;
              }

              .revenueBox{
                .revenueValue{
                  font-size: 40rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 48rpx;
                }
                .revenueText{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 40rpx;
                  text-align: right;
                  span{
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 40rpx;
                    margin-left: 4rpx;
                  }
                }
              }
            }

            .listItemTop{
              margin-top: 34rpx;
              .listTopItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10rpx 0;
                .itemLeft{
                  display: flex;
                  align-items: center;
                  .itemIcon{
                    width: 40rpx;
                    height: 40rpx;
                  }
                  .otherIcon{
                    width: 40rpx;
                    height: 40rpx;
                    //background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/noNumberTop.svg');
                    //background-repeat: no-repeat;
                    //background-size: 100% 100%;
                    font-weight: 600;
                    line-height: 40rpx;
                    text-align: center;
                    color: #999999;
                  }
                  .name{
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    .type{
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 36rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
                .itemRight{
                  .itemValue{
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 40rpx;
                    .unit{
                      font-size: 28rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 40rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .dailyEntry{
      width: 100%;
      height: 680rpx;
      background: #fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 2px;
      margin-top: 28rpx;
      .dailyContent{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(360deg, rgba(238,242,255,0) 0%, rgba(238,242,255,0.7) 20%, #EEF2FF 100%);
        border-radius: 20rpx;
        position: relative;
        .itemBg{
          width: 320rpx;
          height: 320rpx;
          position: absolute;
          right: 0;top: 0;
          z-index:1;
        }
        .list{
          position: absolute;
          width: calc(100% - 48rpx);
          z-index: 2;
          .listTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-size: 36rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #096EF7;
              line-height: 44rpx;
            }
            .moreBox{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .moreIcon{
                width: 20rpx;
                height: 40rpx;
                margin-left: 4rpx;
              }
            }
          }
          .listBox{
            width: 100%;
            background: #fff;
            margin-top: 22rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 32rpx;
            .itemTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding-bottom: 36rpx;
              border-bottom: 2rpx solid #F7F4F4;
              .itemIcon{
                width: 96rpx;
                height: 96rpx;
                border-radius: 16rpx;
              }
              .otherIcon{
                width: 40rpx;
                height: 40rpx;
                //background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/noNumberTop.svg');
                //background-repeat: no-repeat;
                //background-size: 100% 100%;
              }
              .revenueBox{
                .revenueValue{
                  font-size: 40rpx;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #160002;
                  line-height: 48rpx;
                }
                .revenueText{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 40rpx;
                  text-align: right;
                  span{
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 40rpx;
                    margin-left: 4rpx;
                  }
                }
              }
            }
            .listItemTop{
              margin-top: 34rpx;
              .listTopItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10rpx 0;
                .itemLeft{
                  display: flex;
                  align-items: center;
                  .itemIcon{
                    width: 40rpx;
                    height: 40rpx;
                  }
                  .otherIcon{
                    width: 40rpx;
                    height: 40rpx;
                    //background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/noNumberTop.svg');
                    //background-repeat: no-repeat;
                    //background-size: 100% 100%;
                    font-weight: 600;
                    line-height: 40rpx;
                    text-align: center;
                    color: #999999;
                  }
                  .name{
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    .type{
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 36rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
                .itemRight{
                  .itemValue{
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 40rpx;
                    .unit{
                      font-size: 28rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #A69E9F;
                      line-height: 40rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .dailyEntryAdd{
      width: 100%;
      height: 500rpx;
      background: #fff;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 2px;
      margin-top: 28rpx;
      .dailyContent{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 22rpx 24rpx;
        background: linear-gradient(360deg, rgba(229,247,255,0) 0%, rgba(229,247,255,0.7) 23%, #E5F7FF 100%);
        border-radius: 20rpx;
        position: relative;
        .itemBg{
          width: 320rpx;
          height: 320rpx;
          position: absolute;
          right: 0;top: 0;
          z-index:1;
        }
        .list{
          position: absolute;
          width: calc(100% - 48rpx);
          z-index: 2;
          .listTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-size: 36rpx;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #018ABD;
              line-height: 44rpx;
            }
            .moreBox{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .text{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 36rpx;
              }
              .moreIcon{
                width: 20rpx;
                height: 40rpx;
                margin-left: 4rpx;
              }
            }
          }
          .listBox{
            width: 100%;
            background: #fff;
            margin-top: 22rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            padding: 32rpx;
            .listItemTop{
              .listTopItem{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10rpx 0;
                .itemLeft{
                  display: flex;
                  align-items: center;
                  .itemIcon{
                    width: 40rpx;
                    height: 40rpx;
                  }
                  .otherIcon{
                    width: 40rpx;
                    height: 40rpx;
                    //background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/noNumberTop.svg');
                    //background-repeat: no-repeat;
                    //background-size: 100% 100%;
                    font-weight: 600;
                    line-height: 40rpx;
                    text-align: center;
                    color: #999999;
                  }
                  .name{
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 40rpx;
                    .type{
                      font-size: 24rpx;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 36rpx;
                      margin-left: 4rpx;
                    }
                  }
                }
                .itemRight{
                  .addIcon{
                    width: 28rpx;
                    height: 28rpx;
                  }
                  .itemValue{
                    display: inline-block;
                    width: 80px;
                    text-align: left;
                    margin-left: 8rpx;
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 40rpx;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
