<template>
  <div class="layer-group">
    <modulen :loading="loading" :error="error" :info="bsMeta && bsMeta['utilities']">
      <template #title>事件统计</template>
      <!-- <div class="header">
        <div class="header-item">
          <img src="@/assets/images/anchor_num.png" style=" width:42px;height:36px" />
          <div class="header-title">
            <span class="c94">今日地质/火灾数量</span>
            <span>
              <span style="font-size:24px;">{{esData.dizhi}}/{{esData.huozai}}</span>
              <span class="c94">件</span>
            </span>
          </div>
        </div>
        <div class="header-item">
          <img src="@/assets/images/accident.png" style=" width:42px;height:36px" />
          <div class="header-title">
            <span class="c94">今日交通事故</span>
            <span>
              <span style="font-size:24px">{{esData.jiaotong}}</span>
              <span class="c94">件</span>
            </span>
          </div>
        </div>
      </div> -->
      <!-- <div>
        <Ect :options="esOption" />
      </div> -->
      <EventTotal />
    </modulen>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getEventStatistics,
  getEventStatisticsList
} from "@/api/operationMonitor";
import moment from "moment";
import EventTotal from './EventTotal.vue'

export default {
  components: {EventTotal},
  data() {
    return {
      esData: {},
      esOption: {}
    };
  },
  computed: {
    ...mapState({
      selectRoadId: state => state.road.selectRoadId,
      appDate: state => state.appDate
    })
  },
  watch: {
    selectRoadId(newVal) {
      this.init();
    },
    appDate(newVal) {
      this.init();
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
   
      const level = this.selectRoadId.length;
      const queryParam = {
        level, //0全国1省份2公司3路段
        dimension: level ? this.selectRoadId[level - 1] : null,
        // queryDate: moment(new Date(this.appDate)).format("yyyy-MM")
      };
      this.getBlockData(queryParam);
      this.getDetailList(queryParam);
    },
    async getBlockData(queryParam) {
      const { msgContent } = await getEventStatistics(queryParam);
      const dizhi = msgContent.find(i => i.seventkind.indexOf("地质") > -1);
      const huozai = msgContent.find(i => i.seventkind.indexOf("火灾") > -1);
      const jiaotong = msgContent.find(i => i.seventkind.indexOf("交通") > -1);
    
      this.esData = {
        dizhi: dizhi?.count || 0,
        huozai: huozai?.count || 0,
        jiaotong: jiaotong?.count || 0
      };

    },

    async getDetailList(queryParam) {
      const { msgContent } = await getEventStatisticsList(queryParam);
      const dizhi = (
        msgContent.filter(i => i.seventkind?.indexOf("地质") > -1) || []
      ).sort((a, b) => a.date - b.date);
 
      const huozai = (
        msgContent.filter(i => i.seventkind?.indexOf("火灾") > -1) || []
      ).sort((a, b) => a.date - b.date);
      const jiaotong = (
        msgContent.filter(i => i.seventkind?.indexOf("交通") > -1) || []
      ).sort((a, b) => a.date - b.date);
      const xAxisData = [...new Set(msgContent.map(item => item.date))];
      const defaultData = new Array(xAxisData.length).fill(0);

      this.esOption = {
        title: {
          text: "最近一年事件发生趋势",
          top: 30,
          left: 10,
          textStyle: {
            color: "#909FAC",
            fontSize: "16px"
          }
        },
        tooltip: {
          show: true,
          trigger: "axis"
        },
        legend: {
          data: ["地质", "火灾", "交通事故"],
          top: 30,
          right: 0,
          textStyle: {
            color: "#909FAC"
          },
          
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          axisLabel: {
            color: "#909FAC"
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#909FAC"
          }
        },
        series: [
          {
            name: "地质",
            data: dizhi.length ? dizhi.map(i => i.count) : defaultData,
            type: "line",
            color: "#00a1ff",
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            pointer: "cursor",
            axisLine: {
              show: true
            },
            areaStyle: {
              color: "#41FFF8",
              opacity: 0.05
            }
          },
          {
            name: "火灾",
            data: huozai.length ? huozai.map(i => i.count) : defaultData,
            type: "line",
            color: "#41FFF8",
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            pointer: "cursor",
            axisLine: {
              show: true
            },
            areaStyle: {
              color: "#41FFF8",
              opacity: 0.05
            }
          },
          {
            name: "交通事故",
            data: jiaotong.length ? jiaotong.map(i => i.count) : jiaotong,
            type: "line",
            color: "#00C8FF",
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            pointer: "cursor",
            areaStyle: {
              color: "#428BE7",
              opacity: 0.05
            },
            axisLine: {
              show: true
            }
          }
        ]
      };
    }
  }
};
</script>

<style lang="postcss" scoped>
.layer-group {
  width: 100%;
  height: 290px;
}
.module-box {
  height: 100%;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
}
.header-item {
  display: flex;
  align-items: center;
}
.header-title {
  display: flex;
  flex-direction: column;
  margin-left: 9px;
  padding-top: 5px;
}
.c94 {
  color: #94a8c6;
  font-size: 12px;
  line-height: 12px;
}
.absolute {
  margin-top: 29px;
}
</style>
