<template>
    <div class="bsx6"></div>
</template>

<script>
import { Graph } from "@antv/x6";
import customNode from "./customNode.js";

export default {
    // 名称
    name: "bsx6",
    // 使用组件
    components: {},
    // 传入参数
    props: {},
    // 自定义事件
    emits: {},
    // 数据
    data() {
        return {
            graph: null,
            color: {
                red: "#b30461",
                yellow: "#cbaa07",
            },
            trees: [
                {
                    id: "tree1",
                    x: 174,
                    y: 270,
                    width: 1480,
                    color: "#b30461",
                    label: "110kV 母线",
                    direction: "left",
                    subNode: [
                        {
                            id: "tree1_sub1",
                            direction: "top",
                            x: 693,
                            items: [
                                {
                                    id: "tree1_sub1_item1",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "111-1",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item2",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "111-01",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub1_item3",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "111",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item4",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "111-03",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub1_item5",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "111-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item6",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "111-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item7",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 65,
                                    fill: "#b30461",
                                },
                            ],
                        },
                        {
                            id: "tree1_sub2",
                            direction: "bottom",
                            x: 604,
                            items: [
                                {
                                    id: "tree1_sub2_item1",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "11-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item2",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "101-1",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item3",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "101-01",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item4",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "101",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item5",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "101-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item6",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "101-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item7",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "101-0",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree1_sub3",
                            direction: "bottom",
                            x: 839,
                            items: [
                                {
                                    id: "tree1_sub3_item1",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "11-9",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree1_sub4",
                            direction: "bottom",
                            x: 1225,
                            items: [
                                {
                                    id: "tree1_sub4_item1",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "11-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item2",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "102-1",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item3",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "102-01",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item4",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "102",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item5",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "102-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item6",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "102-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item7",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "102-0",
                                    direction: "left",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: "tree2",
                    x: 174,
                    y: 600,
                    width: 935,
                    color: "#cbaa07",
                    label: "35kV I母线",
                    direction: "left",
                    subNode: [
                        {
                            id: "tree2_sub1",
                            direction: "bottom",
                            x: 100,
                            items: [
                                {
                                    id: "tree2_sub1_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "318",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub1_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub1_item3",
                                    shape: "grounding-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub2",
                            direction: "bottom",
                            x: 237,
                            items: [
                                {
                                    id: "tree2_sub2_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "317",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub2_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub2_item3",
                                    shape: "grounding-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub2_item4",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 130,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub3",
                            direction: "bottom",
                            x: 329,
                            items: [
                                {
                                    id: "tree2_sub3_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "316",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub3_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub3_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub3_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub3_item5",
                                    shape: "capacitance-vertical",
                                    label: "",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub3_item6",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "2C-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub3_item7",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 100,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub4",
                            direction: "bottom",
                            x: 427,
                            items: [
                                {
                                    id: "tree2_sub4_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "315",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub4_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub4_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub4_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub4_item5",
                                    shape: "capacitance-vertical",
                                    label: "",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub4_item6",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "1C-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub4_item7",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 100,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub5",
                            direction: "bottom",
                            x: 511,
                            items: [
                                {
                                    id: "tree2_sub5_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "314",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub5_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub5_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub5_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub5_item5",
                                    shape: "reactor-vertical",
                                    label: "",
                                    direction: "right",
                                },
                                {
                                    id: "tree3_sub2_item6",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 100,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub6_1",
                            direction: "top",
                            x: 604,
                            items: [
                                {
                                    id: "tree2_sub6_1_item1",
                                    shape: "line-vertical",
                                    label: "",
                                    direction: "left",
                                    height: 177,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub6",
                            direction: "bottom",
                            x: 604,
                            items: [
                                {
                                    id: "tree2_sub6_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "31-9",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub6_item2",
                                    shape: "resistance-vertical",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub6_item3",
                                    shape: "voltage-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub7",
                            direction: "bottom",
                            x: 700,
                            items: [
                                {
                                    id: "tree2_sub7_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "313",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub7_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub7_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub8",
                            direction: "bottom",
                            x: 792,
                            items: [
                                {
                                    id: "tree2_sub8_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "312",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub8_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub8_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub9",
                            direction: "bottom",
                            x: 886,
                            items: [
                                {
                                    id: "tree2_sub9_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "311",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub9_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub9_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: "tree3",
                    x: 1163,
                    y: 600,
                    width: 491,
                    color: "#cbaa07",
                    label: "35kV II母线",
                    direction: "right",
                    subNode: [
                        {
                            id: "tree3_sub1",
                            direction: "bottom",
                            x: 30,
                            items: [
                                {
                                    id: "tree3_sub1_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "323",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub1_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub1_item3",
                                    shape: "grounding-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub2",
                            direction: "bottom",
                            x: 119,
                            items: [
                                {
                                    id: "tree3_sub2_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "322",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub2_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub2_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree3_sub2_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree3_sub2_item5",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 170,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub3",
                            direction: "bottom",
                            x: 281,
                            items: [
                                {
                                    id: "tree3_sub3_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "321",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub3_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tre3_sub3_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub4",
                            direction: "bottom",
                            x: 381,
                            items: [
                                {
                                    id: "tree3_sub4_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "32-9",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub4_item2",
                                    shape: "resistance-vertical",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub4_item3",
                                    shape: "voltage-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub0",
                            direction: "top",
                            x: 236,
                            items: [
                                {
                                    id: "tree3_sub0_item1",
                                    shape: "line-vertical",
                                    label: "",
                                    direction: "left",
                                    height: 177,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    },
    // 函数
    methods: {
        initGraph: function () {
            this.graph = new Graph({
                container: this.$el, // 画布的容器
                // width: undefined, // 默认使用容器宽度
                // height: undefined, // 默认使用容器高度
                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素 
                mousewheel: {
                    enabled: true,
                    modifiers: [],
                },
                scroller: {
                    enabled: true,
                    pannable: true,
                },
                interacting: false,
            });
        },
        initData: function () {
            const data = { nodes: [] };
            this.trees.forEach((tree) => {
                let nodeRoot = {
                    id: tree.id,
                    shape: "root-node",
                    x: tree.x,
                    y: tree.y,
                    width: tree.width,
                    attrs: {
                        line: {
                            fill: tree.color,
                            width: tree.width,
                        },
                        label: {
                            text: tree.label,
                            x: tree.direction == "left" ? 0 : tree.width,
                            "text-anchor": tree.direction == "left" ? "start" : "end"
                        },
                    },
                    movable: false,
                };
                data.nodes.push(nodeRoot);
                tree.subNode.forEach((sub) => {
                    let y = tree.y;
                    let prevHeight = customNode.weight;
                    sub.items.forEach((item) => {
                        let shape = `${item.shape}-${sub.direction}-${item.direction}`;
                        switch (sub.direction) {
                            case "top":
                                y = y - customNode.nodeSize[shape].height;
                                break;
                            case "bottom":
                                y = y + prevHeight;
                                prevHeight = customNode.nodeSize[shape].height;
                                break;
                            default:
                                break;
                        }
                        let nodeSub = {
                            id: item.id,
                            x: sub.x + tree.x,
                            y: y,
                            shape: shape,
                            attrs: {
                                label: {
                                    text: item.label,
                                },
                            },
                            movable: false,
                        };
                        switch (item.shape) {
                            case "arrow-vertical":
                                nodeSub.attrs.line = {
                                    height: item.height,
                                    fill: item.fill,
                                }
                                nodeSub.attrs.arrow = {
                                    refY: sub.direction == "bottom" ? item.height : 0,
                                    fill: item.fill,
                                }
                                if (sub.direction == "top") {
                                    nodeSub.y -= item.height;
                                }
                                break;

                            case "line-vertical":
                                nodeSub.attrs.line = {
                                    height: item.height,
                                    fill: item.fill,
                                }
                                if (sub.direction == "top") {
                                    nodeSub.y -= item.height;
                                }
                                break;
                        
                            default:
                                break;
                        }
                        data.nodes.push(nodeSub);
                    });
                });
            });
            this.graph.fromJSON(data);
        },
        initX6: function () {
            // 注册自定义节点
            customNode.register();
            this.initGraph();
            this.initData();
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
        this.initX6();
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

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