<template>
  <div id="alarm" style="width: 100%; height: 300px"></div>
</template>

<script>
import { getAlarmData } from '@/api/index';
import * as echarts from 'echarts';
import { getDate } from '@/common/times';
export default {
  props: {
    time: {
      type: Array,
    },
    all: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chartPie: null,
      alarmData: [],
      alarmTime: '',
      isAllProject: false,
    };
  },
  watch: {
    time(value) {
      this.alarmTime = value;
      this.getAlarmData();
      setTimeout(() => {
        this.drawCharts();
      }, 2000);
    },
    all(value) {
      this.isAllProject = value;
      this.getAlarmData();
      setTimeout(() => {
        this.drawCharts();
      }, 2000);
    },
  },

  mounted: function () {},
  methods: {
    async getAlarmData() {
      var projectId = sessionStorage.getItem('projectId');
      var param = {};
      if (this.isAllProject == false) {
        param = {
          start: getDate(this.alarmTime[0]),
          end: getDate(this.alarmTime[1]),
          projectId: projectId,
        };
      } else {
        param = {
          start: getDate(this.alarmTime[0]),
          end: getDate(this.alarmTime[1]),
        };
      }
      const { data } = await getAlarmData(param);
      this.alarmData = [
        {
          value: data.handle,
          name: 'processed',
        },
        {
          value: data.unHandle,
          name: 'untreated',
        },
        {
          value: data.total,
          name: 'total',
        },
      ];
    },
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById('alarm'));
      this.chartPie.setOption({
        title: {
          text: 'Alarm Statistics',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'bottom',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.alarmData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },
};
</script>

<style scoped></style>
