<template>
  <div id="lineCharts" class="chartsBox"></div>
</template>

<script setup>
import { dateFormat } from "../../../../utils/tools.js";
import { getGsdYj } from "../../../../api/yjxx.js";
import * as echarts from "echarts";
import { ref, onMounted, defineProps, watch } from "vue";
import { getListHotMap } from "../../../../api/yjxx.js";
const props = defineProps({
  type: {
    type: Number,
    default: 0,
  }
});
watch(()=> props.type, (val)=>{
  getList()
})
function lineChartFn() {
  var chartDom = document.getElementById("lineCharts");
  var myChart = echarts.init(chartDom, "");
  var option;
  option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["人员预警", "车辆预警", "事件预警"],
    },
    grid: {
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "18%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "人员预警",
        type: "line",
        data: manList.value,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#177FFF",
          },
        },
      },
      {
        name: "车辆预警",
        type: "line",
        data: carList.value,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#ffcc40",
          },
        },
      },
      {
        name: "事件预警",
        type: "line",
        data: evtList.value,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#F6426C",
          },
        },
      },
    ],
  };
  option && myChart.setOption(option);
  document.getElementById("lineCharts").setAttribute("_echarts_instance_", "");
}
const timeList = [
  "0",
  "2",
  "4",
  "6",
  "8",
  "10",
  "12",
  "14",
  "16",
  "18",
  "20",
  "22",
];
const manList = ref([]);
const carList = ref([]);
const evtList = ref([]);
function getList() {
  let tempList = ref([]);
  let m = [];
  let c = [];
  let e = [];
  getGsdYj({
    // kssj: dateFormat() + " " + "00:00:00",
    // jssj: dateFormat() + " " + "23:59:59",
    type: props.type + 1,
  }).then((res) => {
    tempList.value = res;
    if (tempList.value && tempList.value.length > 0) {
      tempList.value.forEach((el) => (el.sj = el.h));
      tempList.value.forEach((item) => {
        if (item.type === "1") {
          m.push(item);
        }
        if (item.type === "2") {
          c.push(item);
        }
        if (item.type === "3") {
          e.push(item);
        }
      });
      manList.value = compareArray(timeList, m);
      carList.value = compareArray(timeList, c);
      evtList.value = compareArray(timeList, e);
      lineChartFn();
    }
  });
}
function compareArray(timeList, targetList) {
  let list = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  for (let item of targetList) {
    let _index = timeList.findIndex((c) => c == item.sj);
    if (_index > -1) {
      list[_index] = item.total;
    }
  }
  return list;
}
onMounted(() => {
  getList();
  lineChartFn();
});
</script>

<style lang="scss" scoped>
.chartsBox {
  height: 55vw;
  padding: 10px 0 0 0;
  box-sizing: border-box;
}
</style>
