<template>
  <div>
      <div class="main" v-if="isHaveData">
          <div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/car.svg' +')'}">
              <div class="analyse">
                  <text class="title">分析</text>
                  <text class="content">新桥服务区入区车辆主要来自杭州市, 入车车辆主要是普通车型(30-60万)</text>
              </div>
              <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
                  <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
                      <div class="icon" @click="handleBack">
                          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
                      </div>
                      <text class="title">车流画像</text>
                      <!--  占位  -->
                      <div class="seize"></div>
                  </div>
              </div>
              <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" @click="handleGoSelectService">
                  <div class="picker">
                      <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">大龙山服务区</view>
                                  <p class="area">安庆片区</p>
                                  <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                              </view>
                          </view>
                      </div>
                  </div>
                  <div class="other">
                      <div class="label">
                          <div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
                              {{item.value}}
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="charts">
              <div class="chartsItem">
                  <p class="title">入区车流分析</p>
                  <entry-zone :carData="carData" />
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <view class="tab" >
                      <view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}{{index!==0?'区':''}}</view>
                  </view>
                  <p class="title">车辆归属地</p>
                  <home-place :homeData="homePlace" :homeCity="cityPlace" />
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <p class="title">车辆类型占比与停留时间</p>
                  <car-type-time :data="carTypeTimeData"/>
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <p class="title">车辆价值与停留时间分析</p>
                  <time-analysis :data="timeAnalysisData"/>
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <p class="title">入区率占比</p>
                  <percent-entry :data="percentEntryData" />
              </div>
          </div>
      </div>
      <div v-else class="noData">
          <div class="box">
              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
              <p class="text">抱歉,服务区采集样本过小,无法分析</p>
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import EntryZone from "./components/car/entryZone.vue";
import HomePlace from "./components/car/homePlace.vue";
import CarTypeTime from "./components/car/carTypeTime.vue";
import timeAnalysis from "./components/car/timeAnalysis.vue";
import PercentEntry from "./components/car/percentEntry.vue";
export default {
  name: "carPortrait",
    data(){
      return {
        menu:{}, //手机参数
        serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
        serviceIndex:0, //选中的服务区列表的第几个
        area:'片区', //属于哪个片区
        labelList:[{value:'杭州'},{value:'小汽车'},{value:'一般消费'},{value:'温州'},{value:'30-60万'}], //标签
        time:'',//当前时间
        Serverpart_ID:'',//服务区id
        chartData:{},
        selectTab: 0,
        tabIsTrue: true,
        tabList:[{name:'全部',value:0},{name:'东',value:1},{name:'西',value:2}],//选项卡列表
        carNumAll : 0,//一共的入区车流数
        carData:[],//入区车流的数据
        homePlaceAll:[],//车辆归属地两区总和列表
        homePlace:[],//车辆归属地
        cityPlaceAll:[],//车辆归属地的城市总和列表
        cityPlace:[],//车辆归属地的城市
        carTypeTimeDataAll:[],//车辆类型占比与停留时间总和列表
        carTypeTimeData:[],//车辆类型占比与停留时间
        timeAnalysisData:[],//  车辆价值与停留时间分析
        percentEntryData:[],//入区率占比
        percentEntryDataAll:[]//  入区率占比总的
      }
    },
    components: {PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis},
    computed:{
      isHaveData(){
         return true
      }
    },
    onLoad(option){
      //跳转的时候带上时间
      this.time = option.time
      // 服务区id
      this.Serverpart_ID = option.Serverpart_ID
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      // 把获取到的手机参数保存
      uni.setStorageSync('phoneInfo',systemInfo)
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()
      // 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据  再分批传到相对应的图标组件
      // 每个图表都是用组件的方式引入的 数据是通过prop传入的
      // 入区车流分析
      this.getCarData()
      // 车辆归属地
      this.getHomeData()
      // 车辆类型占比与停留时间
      this.getCarTypeTime()
      // 车辆价值与停留时间分析
      this.getTimeAnalysis('')
      //入区率占比
      this.getPercentEntry()
    },
    onReady(){

    },
    methods:{
      //跳转到地图
      handleGoSelectService() {
          uni.navigateTo({
              url:'/pages/map/index'
          })
      },
      handleBack(){
          uni.navigateBack({
              delta: 1
          })
      },
      //切换改变选项卡
      // 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
      handleChangeTab(value){
          let Serverpart_Region = ''
          this.tabList.forEach(item=>{
              if (item.value === value && item.value!==0){
                  Serverpart_Region = item.name
              }
          })
          // if (this.tabIsTrue){
              this.selectTab = value
              // 车辆归属地
              this.homePlace = this.homePlaceAll[this.selectTab]
              this.cityPlace = this.cityPlaceAll[this.selectTab]
              // 车辆类型占比与停留时间
              this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]
              // 车辆价值与停留时间分析
              this.getTimeAnalysis(Serverpart_Region)
              //入区率占比
              this.percentEntryData = this.percentEntryDataAll[this.selectTab]
              console.log('this.percentEntryData',this.percentEntryData)
              // this.tabIsTrue = false
              // setTimeout(()=>{
              //     this.tabIsTrue = true
              // },2000)
          // }

      },
      bindPickerChange:function (e){
        console.log(e)
      },
      getCarData(){
        request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
          StatisticsDate: this.time,
          Serverpart_ID	:this.Serverpart_ID
        }).then(res=>{
            this.carData = res.Result_Data.List
            console.log('this.carData',this.carData)
        })
      },
      getHomeData(){
          const date = new Date(this.time)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m<10){
              m='0'+m
          }
          let statistic = `${y}${m}`
          request.$webGet('CommercialApi/Revenue/GetBayonetOAList',{
              StatisticsMonth:statistic,
              Serverpart_ID:this.Serverpart_ID,
              ContainWhole:true
          }).then(res=>{
              // 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
              let result = res.Result_Data.List
              result.forEach(item=>{
                let priceAll = 0
                item.OwnerProvinceList.forEach(subItem=>{
                    priceAll+=Number(subItem.value)
                })
                item.OwnerCityList.forEach(subItem=>{
                    subItem.value = Number(subItem.value)
                    subItem.rate = ((Number(subItem.value) / item.Vehicle_Count)*100)
                })
                item.OwnerProvinceList.forEach(subItem=>{
                    subItem.rate = ((Number(subItem.value) / priceAll)*100).toFixed(2)
                    subItem.name = subItem.name +' '+subItem.rate+'%'
                })
              })
              let dataList = []
              let cityList = []
              result.forEach(item=>{
                  let list = []
                  item.OwnerProvinceList.forEach(subItem=>{
                      list.push({name:subItem.name,value:Number(subItem.value)})
                  })
                  cityList.push(item.OwnerCityList)
                  dataList.push(list)
              })
              //城市
              this.cityPlaceAll = cityList
              this.cityPlace = cityList[this.selectTab]
              //省份
              this.homePlaceAll = dataList
              this.homePlace = dataList[this.selectTab]

          })
      },
      getCarTypeTime(){
          request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
              StatisticsDate:this.time,
              Serverpart_ID:this.Serverpart_ID,
              ContainWhole:true
          }).then(res=>{
              let result = res.Result_Data.List
              let series = []
              result.forEach(item=>{
                  let stayTime = []
                  let carType = []
                  let typeAll = 0
                  item.StayTimesList.forEach(subItem=>{
                      stayTime.push(Number(subItem.value))
                  })
                  item.VehicleCountList.forEach(subItem=>{
                      typeAll+=Number(subItem.value)
                  })

                  item.VehicleCountList.forEach(subItem=>{
                      subItem.rate = ((Number(subItem.value) / typeAll)*100).toFixed(2)
                      carType.push(Number(subItem.rate))
                  })

                  series.push({
                      index:1,
                      name:'停留时间',data:stayTime
                  })
                  series.push({
                      index:0,
                      name:'车辆类型',data:carType
                  })
              })
              this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[1],series[0]]}
              this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[3],series[2]]}
              this.carTypeTimeDataAll[2] ={categories:result[2].Vehicle_Type, series:[series[5],series[4]]}
              this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]
              console.log('this.carTypeTimeData',this.carTypeTimeData)
          })
          // categories: ["小型车","中型车","大货车","新能源车"],
          //     series: [{name:'新能源',data:[30,38,20,10]},
          //     {name:'燃油车',data:[20,17,23,32]},
          //     {name:'停留时间',data:[62,38,50,84]}]
      },
      getTimeAnalysis(data){
        const date = new Date(this.time)
        let y = date.getFullYear()
        let m = date.getMonth()+1
        m = m<10?'0'+m:m
        request.$webGet('CommercialApi/Revenue/GetBayonetSTAnalysis',{
            StartMonth:`${y}${m}`,
            EndMonth:`${y}${m}`,
            Province_Code:'340000',
            Serverpart_ID:this.Serverpart_ID,
            Serverpart_Region: data
        }).then(res=>{
            let result = res.Result_Data.List
            this.timeAnalysisData = result
            console.log('resulttimeAnalysisData',result)
        })


        // let res = [
        //     {name:'小型车',data:[[3,3,10],[10,1.5,10],[18,0.5,5],[22,2.5,10]]},
        //     {name:'中型车',data:[[3,1.5,10],[4,2.7,10],[14,2.3,10],[18,1.4,0.50]]},
        //     {name:'大型车',data:[[2,0.7,2],[5,0.2,1],[7,0.7,3],[22,1.9,6]]}
        // ]
      },
      getPercentEntry(){
          request.$webGet('CommercialApi/Revenue/GetSPBayonetList',{
              Statistics_Date: this.time,
              Province_Code:'340000',
              Serverpart_ID	:this.Serverpart_ID,
              GroupType:2
          }).then(res=>{
              console.log('getPercentEntry',res)
              this.percentEntryDataAll = [ res.Result_Data.List, [res.Result_Data.List[0]], [res.Result_Data.List[1]]]
              console.log('this.percentEntryDataAll',this.percentEntryDataAll)
              console.log('this.percentEntryDataAll[this.selectTab]',this.percentEntryDataAll[2])
              this.percentEntryData = this.percentEntryDataAll[this.selectTab]
          })
      }
    }
}
</script>

<style scoped lang="scss">
.main{
  width:100%;
  background: #fff;
  .header{
    width: 100%;
    height: calc(1.056 * 100vw);
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    .car{
      width: 100vw;
      height: 100%;
      position: absolute;
      z-index: 0;
      top: 0;left: 0;
    }
    .analyse{
      width: calc(100vw - 32px);
      height: 48px;
      box-sizing: border-box;
      padding: 6px 12px;
      background: #fff;
      margin-top: 16px;
      border-radius: 4px;
      display: flex;
      position: absolute;
      bottom: 16px;
      .title{
        width: 28px;
        height: 18px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 18px;
        padding: 0 4px;
        text-align: center;
        border-radius: 4px;
        background:rgba(6, 93, 255, 0.1);
      }
      .content{
        width: calc(100% - 46px);
        padding-left: 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #786B6C;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }
    }

    .headerTop{
      width: 100vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999999999999;
      background: linear-gradient(180deg, #A2B9E8 0%, #B2C6ED 100%);
      .box{
        padding: 0 16px;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transform: translateY(-50%);
        .icon{
          width: 24px;
          height: 24px;
          .img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          font-size: 36rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #1C2130;
          line-height: 56rpx;
        }
        .seize{
          width: 24px;
          height: 24px;
        }
      }
    }
    .serviceArea{
      position: absolute;
      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;
              }
            }

          }
        }
      }
      .other{
        margin-top: 12px;
        width: calc(100vw - 32px);
        text-align: center;
        .label{
          height: 54px;
          position: relative;
          .item{
            position: absolute;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 44rpx;
            padding: 4px 12px;
            border-radius: 8rpx 8rpx 0rpx 8rpx;
          }
          .item{
            background: linear-gradient(180deg, #3190FF 0%, #1657FF 100%);
            top: 0px;
          }
          .item0{
            left: 50%;
            top: 50%;
            transform: translateX(-50%);
            z-index:3;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.8) 0%, rgba(22, 87, 255, 0.8) 100%);
          }
          .item1{
            left: 25%;
            top: 80%;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.7) 0%, rgba(22, 87, 255, 0.7) 100%);
          }
          .item2{
            right: 15%;
            top: 80%;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
          }
          .item3{
            right: 2%;
            top:100%;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
          }
          .item4{
            left: 2%;
            top:100%;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.4) 0%, rgba(22, 87, 255, 0.4) 100%);
          }
        }
        .car{
          width: 228px;
          height: 95px;
        }
      }
    }
  }
  .charts{
    width: 100%;
    box-sizing: border-box;
    padding: 28px 16px 0;
    .chartsItem{
      .tab{
        width: 100%;
        height: 38px;
        background: #F2F1F1;
        border-radius: 4px;
        box-sizing: border-box;
        padding:4px;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .tabItem{
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(100% / 3);
          height: 30px;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
        }
        .tabItemActive{
          color:#160002;
          background: #FFFFFF;
        }
      }
      .title{
        font-size: 34rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 48rpx;
      }
      .homePlace{

      }
    }
    .chartsItem:last-child{
      padding-bottom: 32px;
    }
  }
}
.noData{
  width: 100%;
  height: 100vh;
  position: relative;
    .box{
        margin: 30vh auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .img{
            width: 20vw;
            height: 24vw;
            margin-bottom: 15px;
        }
        .text{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #6C737A;
            line-height: 20px;
        }
    }

}
</style>
