<template>
  <msg-card class="item" title="冲突点监测">
    <div id="PedAndNoVehicles" class="full-h"></div>
  </msg-card>
</template>

<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import { getFontSize } from "../../../config/holo/fontSize.js";
import { getData } from "../../../dao/requestByUrl.js";
export default {
  components: { msgCard },
  data() {
    return {
      charts: {},
      colors: [
        { indexType: "1",  color1start: "#422513",
          color1end: "#ec7b2a",
          color2start: "#311b10",
          color2end: "#ac591c",},
        {
          indexType: "2",
          color1start: "#346ba4",
          color1end: "#64b1ea",
          color2start: "#123660",
          color2end: "#4a83aa",
        },
        {
          indexType: "3",
          color: "rgba(219, 207, 3, 1)"
        },
      ],
    };
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      let req = await fetch("DATA.json");
      let allData = await req.json();
      let api = allData.intersectionGroups.apis.conflictMonitor.url;
      getData(api).then(res=>{
        this.PedAndNoVehicles(res.content);
      })
    },
    // 冲突点监测
    PedAndNoVehicles(content) {
      let times = content.timeList;
      let legendData = [];
      let seriesData = [];
      for (let item of content.list) {
        legendData.push({ name: item.name });
        let targetColor = this.colors.find((colorItem) => {
          return colorItem.indexType == item.indexType;
        });
        if (item.indexType == "3") {
          seriesData.push({
            name: item.name,
            symbol: "circle",
            type: "line",
            smooth: true,
            itemStyle: {
              color: targetColor.color,
            },
            data: item.list,
          });
        } else {
          seriesData.push(
            {
              name: item.name,
              type: "bar",
              barWidth: getFontSize(7),
              data: item.list,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: targetColor.color1start, // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: targetColor.color1end, // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                },
              },
            },
            {
              type: "bar",
              barWidth: getFontSize(4),
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: targetColor.color2start, // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: targetColor.color2end, // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                },
              },
              barGap: 0,
              data: item.list,
            },
            {
              name: `${item.name}b`,
              tooltip: {
                show: false,
              },
              type: "pictorialBar",
              itemStyle: {
                borderWidth: 0,
                borderColor: targetColor.color1end,
                color: targetColor.color1end,
              },
              symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
              symbolSize: [getFontSize(11), getFontSize(3)],
              symbolOffset: [item.indexType=='1'?getFontSize(-6):getFontSize(5), getFontSize(-2)], // 左右 ，上下
              symbolRotate: 0,
              symbolPosition: "end",
              data: item.list,
              z: 3,
            }
          );
        }
      }
      this.charts.eventStudyC = echarts.init(
        document.getElementById("PedAndNoVehicles")
      );
      let option = {
        tooltip: {
          show: false,
        },
        grid: {
          right: 0,
          bottom: getFontSize(25),
          left: getFontSize(40),
          top: getFontSize(58),
        },
        legend: {
          selectedMode: false,
          data: legendData,
          height: getFontSize(20),
          itemGap: getFontSize(16),
          type: "scroll",
          itemWidth: getFontSize(12),
          itemHeight: getFontSize(12),
          textStyle: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: times,
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
          },
        ],
        yAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          nameTextStyle: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
          axisLabel: {
            show: true,
            formatter: (a) => {
              console.log(a);
              return a;
            },
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
          type: "value",
          alignTicks: true,
          axisLine: {
            show: false,
          },
        },
        series: seriesData,
      };
      option && this.charts.eventStudyC.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped></style>
