<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">新桥服务区入区车辆主要来自杭州市, 入车新桥服务区入区车辆主要来自杭州市, 入车入车新桥服务区入区车辆主要来自杭州市入车新桥服务区入区车辆主要来自杭州市</text>
        </div>
      </div>
    </div>
    <div class="charts">
      <div class="carAnalyse">
        <p class="title">入区车流分析</p>
        <div class="content">
          <div class="item">
            <canvas class="carNum" canvas-id="carNum" id="carNum"/>
          </div>
          <div class="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
import request from '@/util/index.js'
var uChartsInstance = {};
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:{},
      carNumAll : 0//一共的入区车流数
    }
  },
  onLoad(option){
    //跳转的时候带上时间
    this.time = option.time
    console.log('this.time',this.time)
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('this.menu',this.menu)
    this.getData()
  },
  onReady(){

  },
  methods:{
    bindPickerChange:function (e){
      console.log(e)
    },
    getData(){
      request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
        StatisticsDate: this.time,
        Serverpart_ID	:'432'
      }).then(result=>{
        console.log('result',result.Result_Data)
        let data = []
        let carSum = 0
        result.Result_Data.List.forEach(item=>{
          data.push({name:item.Serverpart_Region ,value:item.Vehicle_Count })
          carSum+=item.Vehicle_Count
        })
        this.carNumAll =carSum
        console.log('data',data)
        let res = {
          series: [
            {
              data: data
            }
          ]
        }
        this.drawCharts('carNum' , res)
        console.log('res',res)
      })
    },
    drawCharts(id,data){
      console.log('drawCharts')
      const ctx = uni.createCanvasContext(id, this);
      let _this = this
      uChartsInstance[id] = new uCharts({
        type: "ring",
        context: ctx,
        width: 140,
        height: 188,
        series: data.series,
        animation: true,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#CAD0DA","#1E80FF"],
        padding: [5,5,5,5],
        dataLabel: false,
        enableScroll: false,
        title: {
          name: _this.carNumAll,
          fontSize: 16,
          color: "#341D00"
        },
        subtitle: {
          name: "昨日入区车流",
          fontSize: 12,
          color: "#786B6C",
        },
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'left'

        },
        extra: {
          ring: {
            ringWidth: 12,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      });
    },
  }
}
</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: calc(100% - 32px);
      position: fixed;
      top: 0;
      .box{
        position: absolute;
        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;
    .carAnalyse{
      .title{
        font-size: 34rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 48rpx;
      }
      .content{
        width: 100%;
        height: 188px;
        display: flex;
        .item{
          width: 50%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          .carNum{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>