<template>
  <div id="moreCmp" @click="jump">
    <cmpTitle title="人员进出记录" position="absolute"></cmpTitle>
    <dv-charts :option="option" />
  </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: 'moreCmp',
  computed: {
    ...mapGetters([
      "userInfo",
    ])
  },
  data () {
    return {
      option:{
        legend: {
                data: [
                  {
                    name: '人员进出记录',
                    color: '#00baff'
                  },
                  // {
                  //   name: '内部人员离开',
                  //   color: '#ff5ca9'
                  // },
                  // {
                  //   name: '外部人员进入',
                  //   color: '#3de7c9'
                  // },
                  // {
                  //   name: '外部人员离开',
                  //   color: '#f5d94e'
                  // }
                ],
                textStyle: {
                  fill: '#fff'
                },
                bottom:0
              },
              grid: {
                top:50,
                bottom:70,
              },
              xAxis: {
                data: [],
                axisLine: {
                  style: {
                    stroke: '#999'
                  }
                },
                axisLabel: {
                  style: {
                    fill: '#fff',
                    rotate:340
                  },
                },
                axisTick: {
                  show: false
                },
              },
              yAxis: {
                min:0,
                data: 'value',
                splitLine: {
                  show: false
                },
                axisLine: {
                  style: {
                    stroke: '#999'
                  }
                },
                axisLabel: {
                  style: {
                    fill: '#fff'
                  }
                },
                axisTick: {
                  show: false
                },
              },
              series: [
                {
                  name: '人员进出记录',
                  data: [],
                  type: 'bar',
                  barStyle: {
                    fill: 'rgba(0, 186, 255, 0.4)'
                  }
                },
                // {
                //   name: '内部人员离开',
                //   data: [],
                //   type: 'line',
                //   lineStyle: {
                //     stroke: '#ff5ca9'
                //   },
                //   linePoint: {
                //     radius: 4,
                //     style: {
                //       fill: '#ff5ca9',
                //       stroke: 'transparent'
                //     }
                //   }
                // },
                // {
                //   name: '外部人员进入',
                //   data: [],
                //   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: [],
                //   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'
                //     }
                //   }
                // }
              ]
      },
    }
  },
  props:{
    title:{
      type:String,
      default:'人员通行量情况'
    },
    showType:{
      type:String,
      default:"2"
    }
    // option:{
    //   type:Object,
    //   default: {}
    // }
  },
  mounted() {
    this.requireData()
  },
  methods:{
    requireData(){
      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;
        console.log(data)
        _this.option.xAxis.data = data.dateList.reverse()
        _this.option.series.map((item,index)=>{
          switch(index){
            case 0:
            item.data = data.peopleNUm.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.$set(_this.option)
      })
    },
    jump(){
      this.$router.push({path:'/smartapplication/capturerecord'})
    }
  }
}
</script>

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

}
</style>
