<!-- 信号控制状态 -->
<template>
  <div class="signalControl">
    <div class="legend-box">
      <div class="legend-item" v-for="item in legendData" :key="item.key">
        <i :style="`background-color:${item.color}`"></i>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>
<script>
import {getFontSize} from "@/common/js/utils.js";

export default {
  name: "signalControl",
  data() {
    return {
      option: {},
      legendData: [
      {name: "溢出", key: 2, color:'rgba(255, 7, 0,1)',},
        {name: "拥堵", key: 1, color:'rgba(255, 129, 0,1)',},
        {name: "失衡", key: 3, color:'rgba(254, 200, 2,1)',},
        
      ],
    };
  },
  props: ["data"],
  mounted() {
    this.timer = setInterval(() => {
      if (this.data?.length) {
        clearInterval(this.timer)
        this.initData()
      }
    }, 100)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    setData(data) {
      const processedData = data.map((item) => {
        const typeStat = {};
        item.statusByDateList.forEach((statusItem) => {
          typeStat[`${statusItem.problemDate}isCongestion`] =
              statusItem.isCongestion === 1 ? 2 : 0;
          typeStat[`${statusItem.problemDate}isSpillover`] =
              statusItem.isSpillover === 1 ? 3 : 0;
          typeStat[`${statusItem.problemDate}isUnbalance`] =
              statusItem.isUnbalance === 1 ? 1 : 0;
        });
        return {
          time: item.hourMinute,
          typeStat: typeStat,
        };
      });
      return processedData;
    },
    /**
     * 渲染图表
     */
    initData() {
      const content = this.setData(this.data);
      const xData = [];
      const yData = Object.keys(content[0].typeStat);
      const seriesData = content.flatMap((item, index) => {
        xData.push(item.time);
        return yData.map((subitem, subindex) => {
          const yIndex = subindex;
          const xIndex = index;
          const data = item.typeStat[subitem] || "-";
          return {
            name: subitem,
            xName: item.time,
            value: [xIndex, yIndex, data],
          };
        });
      });
      const yDataResult = [];
      yData.forEach((item) => {
        if (item.indexOf("isSpillover") !== -1) {
          yDataResult.push(item.split("isSpillover")[0]);
        } else {
          yDataResult.push("");
        }
      });
      let myChart = echarts.init(this.$refs.chart);
      let option = {
        tooltip: {
          position: "top",
          show: false,
          textStyle: {
            fontSize: getFontSize(16),
          },
        },
        grid: {
          top: "5%",
          bottom: "5%",
          left: "0%",
          right: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          splitArea: {
            show: true,
            areaStyle:{
              color:['rgba(4, 32, 61,0.5)','rgba(12,64,116,0.5)'],
            }
          },
          axisLabel: {
            fontSize: getFontSize(16),
            color: "#999999",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#999999",
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#999999",
            },
          },
        },
        yAxis: {
          type: "category",
          data: yDataResult,
          axisLabel: {
            fontSize: getFontSize(16),
            color: "#999999",
          },
          // splitArea: {
          //   show: true,
          //   areaStyle:{
          //     color:['rgba(4, 32, 61,0.5)','rgba(12,64,116,0.5)'],
          //   }
          // },
        },
        visualMap: {
          show: false,
          type: "continuous",
          orient: "horizontal",
          itemWidth: 15,
          itemHeight: 70,
          min: 1,
          max: 3,
          calculable: true,
          right: "7%",
          top: "0",
          color: ["rgba(255, 7, 0,1)", "rgba(255, 129, 0,1)", "rgba(254, 200, 2, 1)"],
        },
        series: [
          {
            stack: "Total",
            name: "",
            type: "heatmap",
            // data: [],
            data: seriesData,
            label: {
              show: false,
            },
            maxWidth: 10,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            name: "markLine",
            type: "line",
            data: [],
            markLine: {
              symbol: "none",
              silent: true,
              lineStyle: {
                normal: {
                  color: "#ccc",
                  width: 2,
                  type: "dashed",
                },
              },

              data: [
                {
                  label: {
                    color: 'white',
                    fontSize: getFontSize(16),
                    padding: [0, 0, 0, 55],
                    formatter: "早高峰",
                  },
                  xAxis: "07:00",
                },
                {
                  xAxis: "09:00",
                  label: {
                    show: false,
                  },
                },
                {
                  label: {
                    color: 'white',
                    fontSize: getFontSize(16),
                    padding: [0, 0, 0, 55],
                    formatter: "晚高峰",
                  },
                  xAxis: "17:00",
                },
                {
                  label: {
                    show: false,
                  },
                  xAxis: "19:00",
                },
              ],
            },

            // data: [
            //   [0, 0],
            //   [1, 1],
            // ], // Define the coordinates of the line
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", (params, charts, event) => {
        // this.toDetail(params);
        this.$emit("chartClick", params.data);
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.signalControl {
  display: flex;
  width: 100%;
  height: 100%;


  flex-direction: column;
  .legend-box {
    display: flex;
    padding: 0 200px;
    justify-content: space-around;
    align-items: center;
    height: 50px;

    .legend-item {
      margin-left: 20px;
      display: flex;
      align-items: center;

      // &:nth-child(1) {
      //   i {
      //     background: #d43030;
      //   }
      // }

      // &:nth-child(2) {
      //   i {
      //     background: #ff9121;
      //   }
      // }

      // &:nth-child(3) {
      //   i {
      //     background: #0084ff;
      //   }
      // }

      i {
        margin-right: 5px;
        display: inline-block;
        width: 10px;
        height: 10px;
      }
    }
  }

  .chart {
    flex: 1;
    width: 100%;
  }
}
</style>
