<template>
  <view class="main">
    <div  class="headerTopBox" >
      <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
        <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
        <div class="timeSelect">
          <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>
          <picker mode="date" :value="searchText"  :end="lastDay" @change="changeAllProvinceSearch" >
            <view class="time">
              <view class="text">{{ searchText }}</view>
              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
            </view>
          </picker>
        </div>
      </div>

      <div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleGoSelectService">
        <div class="selectService" >
          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
          <view class="select">
            <view class="content">
              <view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
              <p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
              <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
            </view>
          </view>
        </div>
      </div>
    </div>

    <div class="otherCharts">
      <span class="itemTitle">车流数据</span>
      <scroll-view  class="list" :scroll-y="true">
        <div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item,index)">
          <div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
            <div class="itemTop">
              <div class="itemLeft">
                <div style="display: flex;align-items: center">
                  <img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
                  <span class="serverName">{{item.Serverpart_Name || ''}}</span>
                </div>
              </div>
              <div class="itemRight">
                <div class="entryRate">
                  <text class="entryValue">{{item.Entry_Rate ||''}}%</text>
                  <text class="entryLabel">入区率</text>
                </div>
                <img class="img" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
              </div>
            </div>
          </div>

          <div class="childList" v-if="item.showChild" >
            <view class="childItem">
              <text class="childValue">{{item.RevenueAmount?$util.fmoney($util.getMoney(item.RevenueAmount/10000)):''}}</text>
              <text class="childLabel">营收 /万元</text>
            </view>
            <view class="childItem">
              <text class="childValue">{{item.AvgVehicleAmount ||''}}</text>
              <text class="childLabel">单车 /元</text>
            </view>
            <view class="childItem">
              <text class="childValue">{{item.Vehicle_Count?$util.fmoney($util.getMoney(item.Vehicle_Count/10000)):''}}</text>
              <text class="childLabel">入区 /万辆</text>
            </view>
          </div>
        </div>
      </scroll-view>
    </div>
  </view>
</template>
<script>
import request from '@/util/index.js'
export default {
  name: "serviceMessage",
  data(){
    const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
    return {
      menu:{}, //手机参数
      serviceInfo:{},
      lastDay:lastDay,
      searchText:'',
      regionList:[]
    }
  },
  onLoad(){
    this.menu = uni.getMenuButtonBoundingClientRect()
    let storeServiceInfo = uni.getStorageSync('currentService')
    let nearServiceInfo = uni.getStorageSync('nearService')
    if (!storeServiceInfo){
      this.serviceInfo = nearServiceInfo
    }else{
      this.serviceInfo = storeServiceInfo
    }
    let storeTime = uni.getStorageSync('lastDay')
    if (storeTime){
      this.time = storeTime
    }
    this.searchText = this.time
    console.log('this.serviceInfo',this.serviceInfo)
  },
  onShow(){
    let storeServiceInfo = uni.getStorageSync('currentService')
    let nearServiceInfo = uni.getStorageSync('nearService')
    if (!storeServiceInfo){
      this.serviceInfo = nearServiceInfo
    }else{
      this.serviceInfo = storeServiceInfo
    }
    this.getCarData()
  },
  methods:{
    handleBack(){
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    async changeAllProvinceSearch(e){
      this.searchText = e.detail.value
    },
    handleGoSelectService() {
      uni.navigateTo({
        url:`/pages/map/index?chartType=${true}&page=/pages/commercialBINew/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
      })
    },
    getCarData(){
      this.regionList=[]
      uni.showLoading({
        title:'加载中'
      })
      const date = new Date(this.time)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      if (m<10){
        m = '0' + m
      }
      let req
      if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
        req = {
          StatisticsMonth:`${y}${m}`,
        }
      }else{
        req = {
          StatisticsMonth:`${y}${m}`,
          Serverpart_ID	:this.serviceInfo.Serverpart_ID || "",
        }
      }
      request.$webGet('CommercialApi/BigData/GetProvinceMonthAnalysis',req).then(res=>{
        console.log('res',res)
        this.carData = res.Result_Data.List
        this.carData.forEach(item=>{
          item.Serverpart_ID = this.serviceInfo.Serverpart_ID
          item.showChild = false
        })
        this.regionList = this.carData
        console.log('this.carData',this.carData)
        uni.hideLoading()
        // let sumObj = {
        //   Serverpart_Name:'',
        //   Serverpart_Region:'',
        //   SectionFlow_Count:0,
        //   Vehicle_Count:0,
        //   showChild:false
        // }
        // this.carData.forEach(item=>{
        //   sumObj.Serverpart_Name = item.Serverpart_Name
        //   sumObj.Serverpart_Region = item.Serverpart_Region
        //   sumObj.SectionFlow_Count += item.SectionFlow_Count
        //   sumObj.Vehicle_Count += item.Vehicle_Count
        // })
        // if (sumObj.Vehicle_Count && sumObj.SectionFlow_Count){
        //   sumObj.Entry_Rate = ((sumObj.Vehicle_Count / sumObj.SectionFlow_Count)*100).toFixed(2)
        // }
        // console.log('sumObj',sumObj)
        // sumObj.Vehicle_Count = this.$util.fmoney(this.$util.getMoney(sumObj.Vehicle_Count / 10000),2)
        // this.regionList = [sumObj]
      })
    },
    handleNoneChild(obj,selectIndex){
      this.regionList.forEach((item,index)=>{
        if (item.name === obj.name && index===selectIndex){
          item.showChild = !item.showChild
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  background: #fff;
  min-height: 100vh;
  overflow: hidden;
  .headerTopBox{
    width: 100%;
    //height: 152px;
    height: 324px;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
    .header{
      position: absolute;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }
      .timeSelect{
        display: flex;
        align-items: center;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
            color: #fff;
          }
          .icon{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
    .picker{
      position: absolute;
      left: 16px;
      .selectService{
        display: flex;
        align-items: center;
        .img{
          width: 40px;
          height: 40px;
          z-index: 2;
        }
        .select{
          height: 32px;
          background: #F8F8FA;
          border-radius: 0 16px 16px 0;
          transform: translateX(-20px);
          box-sizing: border-box;
          padding-left: 25px;
          display: flex;
          align-items: center;
          .content{
            display: flex;
            align-items: center;
            .uni-input{
              padding: 0;
              background: transparent;
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
            }
            .area{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 40px;
              margin-left: 4px;
            }
            .rightArrow{
              width: 24px;
              height: 12px;
            }
          }

        }
      }
    }
  }

  .otherCharts{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    /*日结上传*/
    .chartsTop {
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        justify-content: flex-start;
        .serviceArea{
          box-sizing: border-box;
          .picker{
            .selectService{
              display: flex;
              align-items: center;
              .img{
                width: 40px;
                height: 40px;
                z-index: 2;
              }
              .select{
                height: 32px;
                background: #F8F8FA;
                border-radius: 0 16px 16px 0;
                transform: translateX(-20px);
                box-sizing: border-box;
                padding-left: 25px;
                display: flex;
                align-items: center;
                .content{
                  display: flex;
                  align-items: center;
                  .uni-input{
                    padding: 0;
                    background: transparent;
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                  }
                  .area{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 40px;
                    margin-left: 4px;
                  }
                  .rightArrow{
                    width: 24px;
                    height: 12px;
                  }
                }

              }
            }
          }
        }

      }
      .right{
        .time {
          display: flex;
          align-items: center;
          margin-right: 4px;
          .day {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            line-height: 44rpx;
            margin-right: 4px;
          }
          .uni-input {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ae664e;
            line-height: 36rpx;
          }
          .icon {
            width: 24px;
            height: 16px;
          }
        }
      }
    }
    .itemTitle{
      display: block;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #160002;
      margin-top: 12px;
    }
    .list{
      width: 100%;
      height: calc(100ch - 400px);
      margin-top: 24px;
      box-sizing: border-box;
      padding-bottom: 12px;
      .listItem{
        margin-bottom: 12px;
        border: 1px solid #D9DBE0;
        border-radius: 8px;
        position: relative;
        .bg{
          position: absolute;
          right: 0;top: 0;
          width: 97px;
          height: 97px;
        }
        .listBox{
          width: 100%;
          box-sizing: border-box;
          padding: 12px 16px;
          background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
          border-bottom: 1px solid #D9DBE0;
          border-radius: 8px;
          .itemTop{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .itemLeft{
              display: inline-block;
              padding: 4px 12px;
              background: rgba(26, 95, 255, 0.1);
              border-radius: 14px;
              .itemFixed{
                width: 12px;
                height: 14px;
                margin-right: 4px;
              }
              .serverName{
                font-size: 16px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                white-space: nowrap;
                color: #1A5FFF;
                line-height: 22px
              }
            }
            .itemRight{
              display: flex;
              align-items: center;
              .entryRate{
                display: flex;
                flex-direction: column;
                .entryValue{
                  font-size: 16px;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: red;
                  line-height: 24px;
                  white-space: nowrap;
                }
                .entryLabel{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 20px;
                }
              }
              .img{
                width: 26px;
                height: 14px;
              }

            }
          }
          .itemDetail{
            margin-top: 16px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .message{
              display: flex;
              flex-direction: column;
              .cirRate{
                width: 40px;
                height: 40px;
              }
              .label{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 20px
              }
              .value{
                font-size: 20px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 24px;
                white-space: nowrap;
              }
            }
          }
        }
        .childList{
          border-radius: 8px 8px 0 0;
          box-sizing: border-box;
          margin-left: 16px;
          width: calc(100% - 32px);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px;
          .childItem{
            width: calc(100% / 3);
            display: flex;
            flex-direction: column;
            .childLabel{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 20px
            }
            .childValue{
              font-size: 18px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
}
</style>
