<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"></div>
          <text class="title">车流画像</text>
          <!--  占位  -->
          <div class="seize"></div>
        </div>
      </div>
      <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}">
        <div class="selectService">
          <image class="img" src="/static/images/commercial/fixed.svg"></image>
          <view class="select">
            <picker  @change="bindPickerChange" :value="serviceIndex" :range="serviceArray">
              <view class="content">
                <view class="uni-input">{{serviceArray[serviceIndex]}}</view>
                <text class="area">{{area}}</text>
                <image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
              </view>
            </picker>
          </view>
        </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>
          <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}}</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:'',//当前时间
        chartData:{},
        selectTab: 1,
        tabList:[{name:'全部',value:0},{name:'东区',value:1},{name:'西区',value:2}],//选项卡列表
        carNumAll : 0,//一共的入区车流数
        carData:[],//入区车流的数据
        homePlaceAll:[],//车辆归属地两区总和列表
        homePlace:[],//车辆归属地
        cityPlaceAll:[],//车辆归属地的城市总和列表
        cityPlace:[],//车辆归属地的城市
        carTypeTimeDataAll:[],//车辆类型占比与停留时间总和列表
        carTypeTimeData:[],//车辆类型占比与停留时间
        timeAnalysisData:[],//  车辆价值与停留时间分析
        percentEntryData:[]//入区率占比
      }
    },
    components: {PercentEntry, CarTypeTime, HomePlace, EntryZone, analyse,timeAnalysis},
    onLoad(option){
      //跳转的时候带上时间
      this.time = option.time
      //  获取手机参数对页面进行适配
      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:{
      //切换改变选项卡
      handleChangeTab(value){
          this.selectTab = value
          this.homePlace = this.homePlaceAll[this.selectTab - 1]
          this.cityPlace = this.cityPlaceAll[this.selectTab - 1]
      },
      bindPickerChange:function (e){
        console.log(e)
      },
      getCarData(){
        request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
          StatisticsDate: this.time,
          Serverpart_ID	:'432'
        }).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:432
          }).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)
                  })
                  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.homePlaceAll = dataList
              this.homePlace = dataList[this.selectTab-1]
              this.cityPlaceAll = cityList
              this.cityPlace = cityList[this.selectTab-1]
          })
      },
      getCarTypeTime(){
          request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
              StatisticsDate:this.time,
              Serverpart_ID:'432'
          }).then(res=>{
              console.log('res',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({
                      name:'停留时间',data:stayTime
                  })
                  series.push({
                      name:'车辆类型',data:carType
                  })
              })
              console.log('series',series)
              this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[0],series[1]]}
              this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[2],series[3]]}
              this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab - 1]
              console.log('carTypeTimeData',this.carTypeTimeData)
          })


          // categories: ["小型车","中型车","大货车","新能源车"],
          //     series: [{name:'新能源',data:[30,38,20,10]},
          //     {name:'燃油车',data:[20,17,23,32]},
          //     {name:'停留时间',data:[62,38,50,84]}]
      },
      getTimeAnalysis(){
        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]]}
        ]
        this.timeAnalysisData = res
      },
      getPercentEntry(){
          request.$webGet('CommercialApi/Revenue/GetSPBayonetList',{
              Statistics_Date: this.time,
              Province_Code:'340000',
              Serverpart_ID	:'432'
          }).then(res=>{
              this.percentEntryData = res.Result_Data.List
          })
      }
    }
}
</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;
          background: red;
        }
        .title{
          font-size: 36rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #1C2130;
          line-height: 56rpx;
        }
        .seize{
          width: 24px;
          height: 24px;
        }
      }
    }
    .serviceArea{
      width: calc(100% - 32px);
      position: absolute;
      box-sizing: border-box;
      .selectService{
        display: flex;
        align-items: center;
        .img{
          width: 40px;
          height: 40px;
          z-index: 2;
        }
        .select{
          width: 174px;
          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;
          position: relative;
          .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;
              height: 40px;
              line-height: 40px;
            }
            .area{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 40px;
              margin-left: 4px;
            }
            .rightArrow{
              width: 24px;
              height: 12px;
              position: absolute;
              right: 11px;
            }
          }

        }
      }
      .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: 100%;
        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>