<template>
  <div id="moreCmp2" @click="jump">
    <cmpTitle title="机动车通行情况" position="absolute"></cmpTitle>
    <div id="cmp" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapState
  } from "vuex";
  import cmpTitle from "../common/cmpTitle.vue"
  import {getCarTendency} from "@/api/grid/index.js";
  export default {
    components:{
      cmpTitle
    },
    name: 'moreCmp2',
    data () {
      return {
        option : {
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            grid: {
              top:'20%',
              bottom:'20%',
            },
            legend: {
                data: ['外部车辆进入', '外部车辆离开', '内部车辆进入', '内部车辆离开'],
                textStyle:{//图例文字的样式
                    color:'#fff',
                    fontSize:10
                },
                width:'60%',
                itemWidth:16,
                itemHeight:10,
                top:0,
                right:0
            },

            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize:8
                        },
                        rotate:40
                    },
                    splitLine:{
                      show:false,
                       lineStyle:{
                        color:'#3ca8c7',
                        width: 1
                       }
                    }
                }
            ],
            yAxis: [
                {
                    minInterval:1,
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    splitLine:{
                      show:true,
                       lineStyle:{
                        color:'#3ca8c7',
                        width: 1
                       }
                    },
                }
            ],
            series: [
                {
                    name: '外部车辆进入',
                    type: 'bar',
                    barGap: 0,
                    data: [],
                    barWidth :5,
                    itemStyle: {
                        normal: {
                        	barBorderRadius: 6,
                          color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                              offset: 0, color: '#f45c3d' // 0% 处的颜色
                          }, {
                              offset: 1, color: '#f9bf6b' // 100% 处的颜色
                          }],
                          globalCoord: true // 缺省为 false
                        },
                      }
                    }
                },
                {
                    name: '外部车辆离开',
                    type: 'bar',
                    data: [],
                     barWidth :5,
                    itemStyle: {
                        normal: {
                        	barBorderRadius: 6,
                            color: {
        					    type: 'linear',
        					    x: 0,
        					    y: 0,
        					    x2: 0,
        					    y2: 1,
        					    colorStops: [{
        					        offset: 0, color: '#63f367' // 0% 处的颜色
        					    }, {
        					        offset: 1, color: '#7ed180' // 100% 处的颜色
        					    }],
        					    globalCoord: true // 缺省为 false
        					},
                        }
                    }
                },
                {
                    name: '内部车辆进入',
                    type: 'bar',
                    data: [],
                     barWidth :5,
                    itemStyle: {
                        normal: {
                        	barBorderRadius: 6,
                            color: {
        					    type: 'linear',
        					    x: 0,
        					    y: 0,
        					    x2: 0,
        					    y2: 1,
        					    colorStops: [{
        					        offset: 0, color: '#54cbca' // 0% 处的颜色
        					    }, {
        					        offset: 1, color: '#36e6e4' // 100% 处的颜色
        					    }],
        					    globalCoord: true // 缺省为 false
        					},
                        }
                    }
                },
                {
                    name: '内部车辆离开',
                    type: 'bar',
                    data: [],
                     barWidth :5,
                    itemStyle: {
                        normal: {
                        	barBorderRadius: 6,
                            color: {
        					    type: 'linear',
        					    x: 0,
        					    y: 0,
        					    x2: 0,
        					    y2: 1,
        					    colorStops: [{
        					        offset: 0, color: '#0474d0' // 0% 处的颜色
        					    }, {
        					        offset: 1, color: '#2b97ef' // 100% 处的颜色
        					    }],
        					    globalCoord: true // 缺省为 false
        					},
                }
              }
            }
          ]
        },
      }
    },
    props:{
      showType:{
        type:String,
        default:"2"
      }
    },
    mounted(){
      this.requireData()
    },
    computed: {
      ...mapGetters([
        "userInfo",
      ])
    },
    methods: {
      requireData(){
        this.agencies = JSON.parse(localStorage.getItem('agencies2'))
        var _this =this;
        let params = {};
        if(this.showType=="1"){
          this.agencies = JSON.parse(localStorage.getItem('agencies1'))
          params['agencyId'] = this.agencies.id
        }else{
          this.agencies = JSON.parse(localStorage.getItem('agencies2'))
          params['residentialId'] = this.agencies.id
        }
        params['tenantId'] = this.userInfo.tenant_id
        getCarTendency(params).then((res)=>{
          let data = res.data.data;
          _this.option.xAxis[0].data = data.dateList.reverse()
          _this.option.series.map((item,index)=>{
            switch(index){
              case 0:
              item.data = data.departCarOfOutside.reverse();
              break;
              case 1:
              item.data = data.enterCarOfOutside.reverse();
              break;
              case 2:
              item.data = data.enterCarOfInside.reverse();
              break;
              case 3:
              item.data = data.departCarOfInside.reverse();
              break;
            }
          })
          _this.drawLine()
        })
      },
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('cmp'))
          // 绘制图表
          myChart.setOption(this.option);
      },
      jump(){
        this.$router.push({path:'/community/carenterrecord'})
      }
    }
  }
</script>

<style lang="less">
  #moreCmp2{
    width: 100%;
    height:100%;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
  }
</style>
