<template>
  <div id="carManage">
    <containerCmp v-if="agencies" :titHeader="agencies.name" active="carManage">
      <div class="centerCmp">
        <mapCmp :agencies="agencies"></mapCmp>
      </div>
      <div class="leftCmp">
        <dv-border-box-12 class="leftCmp-1">
          <pieCmp3 :carCountData="carCountData"></pieCmp3>
        </dv-border-box-12>
        <dv-border-box-12 class="leftCmp-1">
          <pieCmp2></pieCmp2>
        </dv-border-box-12>
        <dv-border-box-12 class="leftCmp-1">
          <moreCmp2></moreCmp2>
        </dv-border-box-12>
      </div>
      <div class="rightCmp">
          <dv-border-box-13 class="leftCmp-1">
            <carCapture showType="3" @onEmit="handleClick"></carCapture>
          </dv-border-box-13>
          <dv-border-box-12 class="leftCmp-1">
             <estateSearch title="车辆查询" @onSearch="onSearch"></estateSearch>
          </dv-border-box-12>
          <dv-border-box-13 class="leftCmp-1">
            <scrollBoard ref="searchList" showType="car" @onEmit="handleClick"></scrollBoard>
          </dv-border-box-13>
      </div>
    </containerCmp>
  </div>
</template>

<script>
  import containerCmp from "./common/containerCmp.vue"
import moreCmp2 from './components/moreCmp2.vue'
import videoCmp from './components/video.vue'
import pieCmp from './components/pieCmp.vue'
import estateSearch from './components/estateSearch.vue'
import pieCmp2 from './components/pieCmp2.vue'
import pieCmp3 from './components/pieCmp3.vue'
import mapCmp from './components/map.vue'
import scrollBoard from './components/scrollBoard.vue'
import carCapture from './components/carCapture.vue'
import {getResidentialCar} from '../../api/grid/index.js'
export default {
  name: 'carManage',
  components: {
    containerCmp,
    moreCmp2,
    videoCmp,
    pieCmp,
    estateSearch,
    pieCmp2,
    pieCmp3,
    mapCmp,
    scrollBoard,
    carCapture
  },
  data () {
    return {
            option: {
                   legend: {
                     data: [
                       {
                         name: '外部车辆进入',
                         color: '#00baff'
                       },
                       {
                         name: '外部车辆离开',
                         color: '#ff5ca9'
                       },
                       {
                         name: '内部车辆进入',
                         color: '#3de7c9'
                       },
                       {
                         name: '内部车辆离开',
                         color: '#f5d94e'
                       }
                     ],
                     textStyle: {
                       fill: '#fff'
                     }
                   },
                   grid: {
                     top:50,
                     bottom:70,
                   },
                   xAxis: {
                     data: [
                       '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
                     ],
                     axisLine: {
                       style: {
                         stroke: '#999'
                       }
                     },
                     axisLabel: {
                       style: {
                         fill: '#999'
                       }
                     },
                     axisTick: {
                       show: false
                     }
                   },
                   yAxis: {
                     data: 'value',
                     splitLine: {
                       show: false
                     },
                     axisLine: {
                       style: {
                         stroke: '#999'
                       }
                     },
                     axisLabel: {
                       style: {
                         fill: '#999'
                       }
                     },
                     axisTick: {
                       show: false
                     },
                     min: 0,
                     max: 8
                   },
                   series: [
                     {
                       name: '外部车辆进入',
                       data: [
                         2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
                       ],
                       type: 'bar',
                       barStyle: {
                         fill: 'rgba(0, 186, 255, 0.4)'
                       }
                     },
                     {
                       name: '外部车辆离开',
                       data: [
                         2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
                       ],
                       type: 'line',
                       lineStyle: {
                         stroke: '#ff5ca9'
                       },
                       linePoint: {
                         radius: 4,
                         style: {
                           fill: '#ff5ca9',
                           stroke: 'transparent'
                         }
                       }
                     },
                     {
                       name: '内部车辆进入',
                       data: [
                         1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3
                       ],
                       type: 'line',
                       smooth: true,
                       lineArea: {
                         show: true,
                         gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                       },
                       lineStyle: {
                         lineDash: [5, 5]
                       },
                       linePoint: {
                         radius: 4,
                         style: {
                           fill: '#00db95'
                         }
                       }
                     },
                     {
                       data: [
                         0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2
                       ],
                       type: 'line',
                       name: '内部车辆离开',
                       lineArea: {
                         show: true,
                         gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
                       },
                       lineStyle: {
                         stroke: '#f5d94e'
                       },
                       linePoint: {
                         radius: 4,
                         style: {
                           fill: '#f5d94e',
                           stroke: 'transparent'
                         }
                       }
                     }
                   ]
                 },
                 agencies:'',
                 carCountData:null
    }
  },
  created() {
    this.agencies = JSON.parse(localStorage.getItem('agencies2'))
    this.getResidentialCarData();
  },
  methods:{
    handleClick(row,params){
      this.$datavAlert({
        title:params.title,
        showType:params.type,
        detailData:row
      })
    },
    onSearch(data){
      this.$refs.searchList.loadData(data)
    },
    getResidentialCarData(){
      var _this = this;
      getResidentialCar(this.agencies.id).then((res)=>{
        _this.carCountData = res.data
      })
    },
    handleClickMap(){
      this.$router.push({path:'index3'})
    }
  }
}
</script>

<style lang="less">
#carManage {
  .leftCmp-1{
    height: 33.33%;
  }
}
</style>
