<template>
  <div class="zl">
    <div id="pie" style="width: 100%; height: 55vw"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch,defineProps } from "vue";
import * as echarts from "echarts";
import { zlZqtjxx } from "../../../../api/zlzx.js";
const props = defineProps({
  timeType: {
    type: String,
    default: "1",
  },
})
watch(
  () => props.timeType,
  () => {
    getData();
  },{deep:true}
);
const D_BZ_ZLLY = [
  { label: "巡逻方案", value: "01" },
  { label: "人员预警", value: "02" },
  { label: "车辆预警", value: "03" },
  { label: "事件预警", value: "04" },
  { label: "警情", value: "05" },
  { label: "人员", value: "06" },
  { label: "事务", value: "08" },
];
const data = reactive({
  data1: [0, 0, 0, 0, 0, 0, 0],
  data2: [0, 0, 0, 0, 0, 0, 0],
  data3: [0, 0, 0, 0, 0, 0, 0],
  data4: [0, 0, 0, 0, 0, 0, 0],
  data5: [0, 0, 0, 0, 0, 0, 0],
  data6: [0, 0, 0, 0, 0, 0, 0],
  data7: [0, 0, 0, 0, 0, 0, 0],
  data8: [0, 0, 0, 0, 0, 0, 0],
  time:[1,2,3,4,5,6,7]
});
function lineChartFn() {
  var chartDom = document.getElementById("pie");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    grid: {
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "40%",
      containLabel: true,
    },
    legend: {
      show: true,
      textStyle: {
        color: "#333",
      },
    },
    tooltip: {},
    xAxis: {
      type: "category",
      data: data.time,
      axisLine: {
        show: true,
        axisTick: {
          show: false,
        },
      },
      axisLabel: {
        color: "#333",
      },
      axisLabel: {
        interval: 0,
        rotate: 30, // 主要是这个 设置角度即可 - 90 ~ 90 旋转方向也不同
      },
    },
    yAxis: {
      show: true,
      minInterval: 1,
      axisLine: {
        show: true,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#333",
      },
    },
    series: [
      {
        name: "巡逻方案",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#ffcc40",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data1,
      },
      {
        name: "人员预警",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#F6426C",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data2,
      },
      {
        name: "车辆预警",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#177FFF",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data3,
      },
      {
        name: "事件预警",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#FF18F1",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data4,
      },
      {
        name: "警情",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#45E3FF",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data5,
      },
      {
        name: "人工",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#45E30F",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data6,
      },
      {
        name: "人员管控",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#fff981",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data7,
      },
      {
        name: "事务",
        type: "bar",
        barWidth: 4,
        itemStyle: {
          normal: {
            color: "#f56925",
            barBorderRadius: [15, 15, 15, 15],
          },
        },
        data: data.data8,
      },
    ],
  };
  option && myChart.setOption(option);
  document.getElementById("pie").setAttribute("_echarts_instance_", "");
}
//获取近一周日期集合
function getWeek() {
  const time = new Date().getTime();
  var timeArr = [];
  for (let i = 0; i < 7; i++) {
    const timen = new Date(time - i * 60 * 60 * 24 * 1000);
    var y = timen.getFullYear();
    var m =
      timen.getMonth() < 9 ? "0" + timen.getMonth() + 1 : timen.getMonth() + 1;
    var d = timen.getDate() < 10 ? "0" + timen.getDate() : timen.getDate();
    timeArr.unshift(y + "-" + m + "-" + d);
  }
  return timeArr;
}
function getData() {
  zlZqtjxx({ type: props.timeType }).then((res) => {
    ({
      data1: data.data1,
      data2: data.data2,
      data3: data.data3,
      data4: data.data4,
      data5: data.data5,
      data6: data.data6,
      data7: data.data7,
      data8: data.data8,
    } = res);
    data.time = res.time
    lineChartFn();
  });
}
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.zl {
  margin: 5px 0;
  padding-top: 8px;
}
</style>