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

<script setup>
import { dateFormat } from "../../../../utils/tools.js";
import * as echarts from "echarts";
import { ref, onMounted, defineProps, watch } from "vue";
import { pcsyjpm } from "../../../../api/yjxx.js";
import { getRecentDay } from "../../../../utils/tools";
import router from "../../../../router/index.js";
const props = defineProps({
  type: {
    type: Number,
    default: 0,
  },
});
watch(
  () => props.type,
  (val) => {
    getList();
  }
);
function lineChartFn() {
  var chartDom = document.getElementById("lineChartsPcs");
  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: xdata.value,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "派出所预警总数",
        type: "line",
        data: datas.value,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#177FFF",
          },
        },
      },
    ],
  };
  myChart.on("click", "series.line", function (params) {
    let row = {};
    tempList.value.forEach((item) => {
      if (item.ssbm === params.name) {
        row.yj_ssbmdm = item.ssbmdm;
        row.yj_ssbm = item.ssbm;
      }
    });

    router.push({
      path: "/yyzx/yjtjInfo/pcsyjinfo",
      query: row,
    });
  });
  option && myChart.setOption(option);
  document
    .getElementById("lineChartsPcs")
    .setAttribute("_echarts_instance_", "");
}
const tempList = ref([]);
const xdata = ref([]);
const datas = ref([]);
function getList() {
  pcsyjpm({
    kssj: getRecentDay(props.type, "ymd"),
    jssj: getRecentDay(0, "ymd"),
  }).then((res) => {
    tempList.value = res;
    if (tempList.value && tempList.value.length > 0) {
      tempList.value.forEach((item) => {
        xdata.value.push(item.ssbm);
        datas.value.push(item.total);
      });
      lineChartFn();
    }
  });
}
onMounted(() => {
  getList();
  lineChartFn();
});
</script>

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