<template>
  <div class="lun-main">
    <div style="padding: 10px 10px">
      <span style="color: #000; font-size: 18px">月超速统计</span>
      <div style="margin-top: 60px; width: 100px; text-align: center">
        <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">{{ totalVehicle }}</div>
        <div style="color: #000; font-size: 14px">整体超速次数</div>
      </div>
      <div style="margin-top: 20px; width: 100px; text-align: center">
        <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">{{ deptVehicle }}</div>
        <div style="color: #000; font-size: 14px">平均超速次数</div>
      </div>
    </div>
    <div style="padding: 10px 10px 10px 0">
      <a-range-picker
        style="width: 100%"
        @change="changaPicker"
        v-model="daterangeCreateTime"
        valueFormat="YYYY-MM-DD"
        format="YYYY-MM-DD"
        allow-clear
      />
      <a-spin :spinning="spinning" size="large">
        <div ref="chart" class="item" style="width: 380px; height: 260px" />
      </a-spin>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { getOverSpeedStatistics } from '@/api/iot'
export default {
  props: { OfDeptId: String },
  data() {
    return {
      daterangeCreateTime: [
        moment().month(moment().month()).startOf('month').format('YYYY-MM-DD 00:00:00'),
        moment().month(moment().month()).endOf('month').format('YYYY-MM-DD 23:59:59'),
      ],
      deptId: '',
      list: [],
      spinning: false,
      totalVehicle:0,
      deptVehicle:0
    }
  },

  watch: {
    OfDeptId: {
      handler(val) {
        if (val&&val.indexOf('dept' > 0)) {
          this.deptId = val.substring(5)
        } else {
          this.deptId = '100'
        }
        this.funLunarNum()
      },
      immediate: true,
      deep: true,  
    },
  },
  mounted() {
    // 获取dom容器
    this.funLunarNum()
    const chartDom = this.$refs.chart
    // 初始化图表实例
    this.chart = echarts.init(chartDom)
    // console.log("da======ta", this.processData, this.maxNum);
  },
  methods: {
    initChart(datas) {
      const data = datas.map(item=>{
        return item.value
      })
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: datas.map(item=>{
            return item.deptName
          }),
          //坐标轴
          axisLine: {
            lineStyle: {
              color: '#3eb2e8',
            },
          },
          //坐标值标注
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 0,
            textStyle: {
              color: '#3eb2e8',
              fontSize: 12,
            },
          },
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
        },
        series: [
          {
            name: 'a',
            tooltip: {
              show: true,
            },
            type: 'bar',
            barWidth: 18.5,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#0B4EC3', // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#138CEB', // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#17AAFE', // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: data,
            barGap: 0,
          },
        ],
      }

      this.chart.setOption(option)
    },
    funLunarNum() {
      this.spinning = true
      const params = {
        deptId: this.deptId || '100',
        startTime: this.daterangeCreateTime[0],
        endTime: this.daterangeCreateTime[1],
      }
      getOverSpeedStatistics(params)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.data.data
            this.totalVehicle = res.data.totalCount //总体
            this.deptVehicle = res.data.totalAvg
            this.$nextTick(() => {
              // 获取dom容器
              const chartDom = this.$refs.chart
              // 初始化图表实例
              this.chart = echarts.init(chartDom)
              this.initChart(this.list)
            })
            this.spinning = false
          }
        })
        .catch((error) => {
          this.spinning = false
        })
    },
    changaPicker(ev) {
      let startTime = `${ev[0]} 00:00:00`
      let endTime = `${ev[1]} 23:59:59`
      this.daterangeCreateTime = [startTime, endTime]
      this.funLunarNum()
    },
  },
}
</script>

<style lang="less" scoped>
.lun-main {
  width: 500px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  //   background-color: aqua;
  //   border-right: 1px solid #ccc;
  pointer-events: all;
  padding-right: 10px;
}
</style>
