<template>
  <div id="topBar">
    <cmpTitle title="当日动态" position="absolute"></cmpTitle>
    <div id="containers"></div>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapState
  } from "vuex";
  import {getUserInfo} from "../../../util/util.js"
  import cmpTitle from "../common/cmpTitle.vue"
  import {getTodayData} from "@/api/grid/index.js";
  var seriesLabel = {
      normal: {
          show: true,
          textBorderColor: '#333',
          textBorderWidth: 2
      }
  };
  export default {
    components:{
      cmpTitle
    },
    name: 'topBar',
    data () {
      return {
        option: {
            color:['#4368c1','#4bbbab'],
            title: {
                text: '',
                textStyle:{
                  color:'#fff',
                  fontSize:16,
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['内部', '外部'],
                top:0,
                textStyle:{//图例文字的样式
                    color:'#fff'
                }
            },
            grid: {
                top:40,
                left: 70,
                bottom:20,
                right:10
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                name: 'Days',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                splitLine:{
                  show:true,
                   lineStyle:{
                    color:'#3ca8c7',
                    width: 1
                   }
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data: ['驶入车辆', '驶出车辆','人员统计'],
                axisLabel: {
                    margin: 20,
                    textStyle: {
                          color: '#ffffff'
                      }
                }
            },
            series: [
                {
                    name: '内部',
                    type: 'bar',
                    data: [0,0,0],
                    label: seriesLabel,
                },
                {
                    name: '外部',
                    type: 'bar',
                    label: seriesLabel,
                    data: [0,0,0]
                },
            ]
        },
      }
    },
    mounted(){
      // if(getUserInfo()){
        this.requireData()
      // }
    },
    computed: {
      ...mapGetters([
        "userInfo",
      ])
    },
    methods: {
      requireData(){
        this.agencies = JSON.parse(localStorage.getItem('agencies1'))
        var _this =this;
        let params = {};
        params['tenantId'] = this.userInfo.tenant_id
        params['agencyId'] = this.agencies.id
        getTodayData(params).then((res)=>{
          console.log(res)
          let data = res.data.data;
          this.option.series[0].data =  [data.enterCarOfInside,data.departCarOfInside,data.peopleNum]
          this.option.series[1].data =  [data.enterCarOfOutside,data.departCarOfOutside,data.peopleNum]
          _this.drawLine()
        })
      },
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('containers'))
          // 绘制图表
          myChart.setOption(this.option);
      }
    }
  }
</script>

<style lang="less">
  #topBar{
    width: 100%;
    height:100%;
    position: relative;
    box-sizing: border-box;
    #containers{
      width: 100%;
      height:100%
    }
  }

</style>
