<template>
  <div :id="id" class="station"></div>
</template>

<script>
import util from "@/helper/util.js";
import { Graph } from "@antv/x6";
import partten from "@/helper/partten.js";
import stationimg from "@/assets/images/station.png";

export default {
  // 名称
  name: "station",
  // 使用组件
  components: {},
  // 数据
  props: {
    width: {
      type: String,
      default: "100%",
    },
    // 高度 默认9.722vh
    height: {
      type: String,
      default: "175px",
    },
  },
  data() {
    return {
      id: "",
      list: [
        {
          id: "root",
          type: "img",
          image: stationimg,
          x: 10,
          y: 70,
        },
        // 线A
        {
          id: "A1",
          type: "circle",
          x: 120,
          y: 40,
          connects: ["root"],
        },
        {
          id: "A2",
          type: "circle",
          x: 180,
          y: 30,
          connects: ["A1"],
        },
        {
          id: "A3",
          type: "circle",
          x: 200,
          y: 15,
          connects: ["A2"],
        },
        {
          id: "A3-1",
          type: "circle",
          x: 200,
          y: 35,
          connects: ["A3"],
        },
        {
          id: "A3-2",
          type: "circle",
          x: 240,
          y: 35,
          connects: ["A3-1"],
        },
        {
          id: "A3-3",
          type: "circle",
          x: 260,
          y: 45,
          connects: ["A3-2"],
        },
        {
          id: "A4",
          type: "circle",
          x: 260,
          y: 15,
          connects: ["A3"],
        },
        {
          id: "A5",
          type: "circle",
          x: 280,
          y: 5,
          connects: ["A4"],
        },
        {
          id: "A6",
          type: "circle",
          x: 310,
          y: 5,
          connects: ["A5"],
        },
        {
          id: "A7",
          type: "circle",
          x: 330,
          y: 20,
          connects: ["A6"],
        },
        {
          id: "A8",
          type: "circle",
          x: 350,
          y: 15,
          connects: ["A7"],
        },
        {
          id: "A9",
          type: "circle",
          x: 350,
          y: 15,
          connects: ["A8"],
        },
        {
          id: "A10",
          type: "circle",
          x: 370,
          y: 5,
          connects: ["A9"],
        },
        {
          id: "A11",
          type: "circle",
          x: 400,
          y: 0,
          connects: ["A10"],
        },
        // 线B
        {
          id: "B1",
          type: "circle",
          x: 150,
          y: 60,
          connects: ["root"],
        },
        {
          id: "B2",
          type: "circle",
          x: 180,
          y: 70,
          connects: ["B1"],
        },
        {
          id: "B3",
          type: "circle",
          x: 220,
          y: 55,
          connects: ["B2"],
        },
        {
          id: "B4",
          type: "circle",
          x: 240,
          y: 75,
          connects: ["B3"],
        },
        {
          id: "B5",
          type: "circle",
          x: 280,
          y: 45,
          connects: ["B4"],
        },
        {
          id: "B6",
          type: "circle",
          x: 310,
          y: 60,
          connects: ["B5"],
        },
        {
          id: "B6-1",
          type: "circle",
          x: 310,
          y: 50,
          connects: ["B6"],
        },
        {
          id: "B6-2",
          type: "circle",
          x: 370,
          y: 40,
          connects: ["B6-1"],
        },
        {
          id: "B7",
          type: "circle",
          x: 330,
          y: 60,
          connects: ["B6"],
        },
        {
          id: "B8",
          type: "circle",
          x: 370,
          y: 50,
          connects: ["B7"],
        },
        {
          id: "B9",
          type: "circle",
          x: 390,
          y: 70,
          connects: ["B8"],
        },
        {
          id: "B10",
          type: "circle",
          x: 420,
          y: 65,
          connects: ["B9"],
        },
        // 线C
        {
          id: "C1",
          type: "circle",
          x: 150,
          y: 75,
          connects: ["root"],
        },
        {
          id: "C2",
          type: "circle",
          x: 220,
          y: 85,
          connects: ["C1"],
        },
        {
          id: "C3",
          type: "circle",
          x: 290,
          y: 95,
          connects: ["C2"],
        },
        {
          id: "C4",
          type: "circle",
          x: 330,
          y: 130,
          connects: ["C3"],
        },
        {
          id: "C5",
          type: "circle",
          x: 350,
          y: 110,
          connects: ["C4"],
        },
        // 线D
        {
          id: "D1",
          type: "circle",
          x: 150,
          y: 130,
          connects: ["root"],
        },
        {
          id: "D2",
          type: "circle",
          x: 190,
          y: 125,
          connects: ["D1"],
        },
        {
          id: "D3",
          type: "circle",
          x: 230,
          y: 120,
          connects: ["D2"],
        },
        {
          id: "D4",
          type: "circle",
          x: 270,
          y: 115,
          connects: ["D3"],
        },
        {
          id: "D5",
          type: "circle",
          x: 310,
          y: 115,
          connects: ["D4"],
        },
        {
          id: "D6",
          type: "circle",
          x: 360,
          y: 90,
          connects: ["D5"],
        },
        {
          id: "D7",
          type: "circle",
          x: 410,
          y: 85,
          connects: ["D6"],
        },
        // 线E
        {
          id: "E1",
          type: "circle",
          x: 145,
          y: 145,
          connects: ["root"],
        },
        {
          id: "E2",
          type: "circle",
          x: 180,
          y: 140,
          connects: ["E1"],
        },
        {
          id: "E3",
          type: "circle",
          x: 240,
          y: 150,
          connects: ["E2"],
        },
        {
          id: "E4",
          type: "circle",
          x: 265,
          y: 140,
          connects: ["E3"],
        },
        {
          id: "E5",
          type: "circle",
          x: 300,
          y: 145,
          connects: ["E4"],
        },
        {
          id: "E6",
          type: "circle",
          x: 325,
          y: 140,
          connects: ["E5"],
        },
        {
          id: "E7",
          type: "circle",
          x: 350,
          y: 125,
          connects: ["E6"],
        },
        {
          id: "E8",
          type: "circle",
          x: 390,
          y: 120,
          connects: ["E7"],
        },
        {
          id: "E9",
          type: "circle",
          x: 410,
          y: 140,
          connects: ["E8"],
        },
        {
          id: "E10",
          type: "circle",
          x: 425,
          y: 130,
          connects: ["E9"],
        },
      ],
    };
  },
  // 函数
  methods: {
    initStation() {
      const graph = new Graph({
        container: document.getElementById(this.id),
        grid: false,
      });

      this.list.forEach((data) => {
        this.createNode(graph, data);
      });
    },
    createNode(graph, data) {
      switch (data.type) {
        case "circle":
          graph.addNode({
            id: data.id,
            shape: "circle",
            x: data.x,
            y: data.y,
            width: 8,
            height: 8,
            attrs: {
              body: {
                fill: partten.getColor("green"),
                stroke: "transparent",
              },
            },
          });
          break;

        case "img":
          graph.addNode({
            id: data.id,
            x: data.x,
            y: data.y,
            width: 120,
            height: 45,
            shape: "html",
            label: "升压站",
            html() {
              const wrap = document.createElement("div");
              wrap.innerHTML = `<img src="${data.image}" />`;
              return wrap;
            },
            attrs: {
              label: {
                x: 0,
                y: 70,
                fill: partten.getColor("gray"),
                fontSize: 12,
              },
            },
          });
          break;
      }

      if (data.connects && data.connects.length > 0) {
        data.connects.forEach((value, index) => {
          graph.addEdge({
            source: data.id,
            target: value,
            attrs: {
              line: {
                stroke: partten.getColor("gray"),
                strokeDasharray: 4,
                sourceMarker: {
                  name: "path",
                },
                targetMarker: {
                  name: "path",
                },
              },
            },
          });
        });
      }
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    this.id = "station-" + util.newGUID();
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$el.style.height = this.height;
      this.initStation();
    });
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {},
};
</script>

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