<template>
  <div style="height: 260px" ref="fireTime"></div>
</template>

<script>
import * as echarts from "echarts";
import { hzsd } from "@/api/hzfx";
import toolUtils from "@/utils/echartsTooltip";
export default {
  name: "FireTime",
  props: {
    qx: String,
    type: Number,
  },
  data() {
    return {
      list: [],
      chart: null,
      // 火灾时段
      modeType: 1,
      hours: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
      ],
      option: []
    };
  },
  mounted() {
    this.reload();
    // 自动轮播
    toolUtils.autoHover(this.chart, this.option, 24, 2000);
  },
  watch: {
    qx: {
      handler() {
        this.loadData();
      },
      immediate: true,
    },
    type: {
      handler(idx) {
        this.modeType = idx;
        this.loadData();
      },
      immediate: true,
    },
  },
  methods: {
    loadData() {
      hzsd({
        qx: this.qx === "重庆市" ? "" : this.qx,
        type: this.modeType,
      }).then((res) => {
        if (this.modeType === 1 || this.modeType === 2) {
          this.list = res.data.year;
        } else if (this.modeType === 3) {
          this.list = res.data;
        }
        this.reload();
      });
    },
    init() {},
    reload() {
      this.chart = echarts.init(this.$refs.fireTime);
      let seriesData = [];
      if (this.modeType === 1 || this.modeType === 2) {
        const data = [];
        this.list.forEach((p) => {
          const iData = [`${p.xs}:00`, p.sl];
          data.push(iData);
        });
        seriesData = [
          {
            type: "line",
            symbol: "circle",
            itemStyle: {
              color: "#44F1FF",
            },
            stack: "a",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,213,255,0.80)",
                },
                {
                  offset: 1,
                  color: "rgba(0,213,255,0)",
                },
              ]),
            },
            data: data,
          },
        ];
      } else if (this.modeType === 3) {
        const data = [
          {
            name: "春季",
            data: this.hours.map((item) => {
              const idx = this.list.spring.findIndex((i) => i.xs === item);
              if (idx >= 0) {
                return [`${item}:00`, this.list.spring[idx].sl];
              } else {
                return [`${item}:00`, 0];
              }
            }),
            color: "#a9f045",
            bg: "rgba(169, 240, 69,0.80)",
          },
          {
            name: "夏季",
            data: this.hours.map((item) => {
              const idx = this.list.autum.findIndex((i) => i.xs === item);
              if (idx >= 0) {
                return [`${item}:00`, this.list.autum[idx].sl];
              } else {
                return [`${item}:00`, 0];
              }
            }),
            color: "#ff0b0b",
            bg: "rgba(255, 11, 11, 0.80)",
          },
          {
            name: "秋季",
            data: this.hours.map((item) => {
              const idx = this.list.summer.findIndex((i) => i.xs === item);
              if (idx >= 0) {
                return [`${item}:00`, this.list.summer[idx].sl];
              } else {
                return [`${item}:00`, 0];
              }
            }),
            color: "#ff833d",
            bg: "rgba(255, 131, 61, 0.80)",
          },
          {
            name: "冬季",
            data: this.hours.map((item) => {
              const idx = this.list.winter.findIndex((i) => i.xs === item);
              if (idx >= 0) {
                return [`${item}:00`, this.list.winter[idx].sl];
              } else {
                return [`${item}:00`, 0];
              }
            }),
            color: "#44F1FF",
            bg: "rgba(0,213,255,0.80)",
          },
        ];
        seriesData = data.map((item) => ({
          name: item.name,
          type: "line",
          symbol: "circle",
          itemStyle: {
            color: item.color,
          },

          stack: item.name,
          data: item.data,
        }));
      }
      this.option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "30%"];
          },
          backgroundColor: "rgba(0,224,255,0.46)",
          borderColor: "rgba(0,213,255, .6)",
          extraCssText: "z-index: 1000;",
          confine: true,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          right: "20px",
          bottom: "20px",
          top: "20px",
          left: "50px",
        },
        title: {
          bottom: "-2%",
          left: "1%",
          text: "火灾总计/时间",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 12,
          },
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#35709caa",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#35709caa",
              },
            },
            data: this.hours.map(item => `${item}:00`)
          },
        ],
        yAxis: {
          type: "value",
          boundaryGap: [0, "10%"],
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#35709caa",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: seriesData,
      };
      this.chart.setOption(this.option, true);
    },
  }
};
</script>

<style scoped lang="less">
.unit {
  padding: 10px;
  font-size: 12px;
  display: flex;
  justify-content: end;
}
</style>
