<template>
  <div class="main">
    <div class="header">
      <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="/static/images/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'}">
          <picker class="picker"  @change="bindPickerChange" :value="serviceIndex" :range="serviceArray">
              <div class="selectService">
                  <image class="img" src="/static/images/commercial/fixed.svg"></image>
                  <view class="select">
                      <view class="content">
                          <view class="uni-input">大龙山服务区</view>
                          <p class="area">安庆片区</p>
                          <image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
                      </view>
                  </view>
              </div>
          </picker>
        <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>
          <image class="car" src="/static/images/commercial/car.svg"></image>
        </div>
        <div class="analyse">
          <text class="title">分析</text>
          <text class="content">新桥服务区入区车辆主要来自杭州市, 入车车辆主要是普通车型(30-60万)</text>
        </div>
      </div>
    </div>
    <div class="charts">
      <div class="chartsItem">
        <p class="title">入区车流分析</p>
        <entry-zone :carData="carData" />
        <analyse />
      </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" />
          <analyse />
      </div>
      <div class="chartsItem" style="margin-top: 32px">
          <p class="title">车辆类型占比与停留时间</p>
          <car-type-time :data="carTypeTimeData"/>
          <analyse />
      </div>
      <div class="chartsItem" style="margin-top: 32px">
          <p class="title">车辆价值与停留时间分析</p>
          <time-analysis :data="timeAnalysisData"/>
          <analyse />
      </div>
      <div class="chartsItem" style="margin-top: 32px">
          <p class="title">入区率占比</p>
          <percent-entry :data="percentEntryData" />
          <analyse />
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import analyse from "./components/analyse.vue";
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, analyse,timeAnalysis},
    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()
      // 入区车流分析
      this.getCarData()
      // 车辆归属地
      this.getHomeData()
      // 车辆类型占比与停留时间
      this.getCarTypeTime()
      // 车辆价值与停留时间分析
      this.getTimeAnalysis('')
      //入区率占比
      this.getPercentEntry()
    },
    onReady(){

    },
    methods:{
      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
        })
      },
      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
        })


        // 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
          }).then(res=>{
              console.log('getPercentEntry',res)
              this.percentEntryDataAll = [ res.Result_Data.List, [res.Result_Data.List[1]], [res.Result_Data.List[2]]]
              this.percentEntryData = this.percentEntryDataAll[this.selectTab]
          })
      }
    }
}
</script>

<style scoped lang="scss">
.main{
  width:100%;
  .header{
    width: 100%;
    height: 396px;
    padding: 0 16px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #A1B9E8 0%, #F0F5FF 100%);
    position: relative;
    .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: 100%;
        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%;
            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: 15%;
            top: 24px;
            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: 24px;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
          }
          .item3{
            right: 0;
            top: 46px;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
          }
          .item4{
            left: 0;
            top: 46px;
            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;
        }
      }
      .analyse{
        width: calc(100vw - 32px);
        height: 48px;
        box-sizing: border-box;
        padding: 6px 12px;
        background: #fff;
        margin-top: 16px;
        border-radius: 4px;
        display: flex;
        .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;
        }
      }
    }
  }
  .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: #160002;
        }
        .tabItemActive{
          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;
    }
  }
}
</style>