<template>
    <div>
        <div class="bigBox">
            <div ref="container" class="container"></div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import LogicFlow from "@logicflow/core";
import { DndPanel, SelectionSelect, Group, Menu, MiniMap, regeister, Snapshot } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
export default {
    props: {
        lineMenuColor: {
            type: String,
            required: true
        }
    },
    setup(props, { emit }) {
        const container = ref();
        const lf = ref();
        let needColor = props.lineMenuColor
        let lineColor = ref('#255CE7')
        let copyColor = ref('')
        let delId = ref('')
        let nodeId = ref('')
        watch(() => props.lineMenuColor, (newVal) => {
            copyColor.value = newVal
        })
        function blue() {
            lf.value.setTheme({
                baseEdge: {
                    stroke: '#255CE7',
                    strokeWidth: 2,
                },
            });//设置连接线为蓝色
        }
        function orange() {
            lf.value.setTheme({
                baseEdge: {
                    stroke: 'orange',
                    strokeWidth: 2,
                },
            });//设置连接线为橙色
        }
        function delLine() {
            if (delId.value) {
                lf.value.deleteEdge(delId.value)//删除选择的连接线
            }
            if (nodeId.value) {
                lf.value.deleteNode(nodeId.value)//删除节点
            }
        }
        function saveLine() {
            lf.value.getSnapshot()//保存为图片
        }
        function cleanMap() {
            lf.value.clearData()
        }
        function textColor() {
            if (lineColor.value == "#255CE7") {
                lf.value.setTheme({
                    baseEdge: {
                        stroke: "orange",
                        strokeWidth: 2,
                    },
                });
                lineColor.value = 'orange'
            } else {
                lf.value.setTheme({
                    baseEdge: {
                        stroke: "#255CE7",
                        strokeWidth: 2,
                    },
                });
                lineColor.value = '#255CE7'
            }
        }
        onMounted(() => {
            lf.value = new LogicFlow({
                // 通过选项指定了渲染的容器和需要显示网格
                container: container.value,
                grid: false,
                plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap, Snapshot],
                keyboard: {
                    enabled: true
                },
            })
            const patternItems = [
                {
                    type: 'rect',
                    text: '保护（高压侧）',
                    label: '保护（高压侧）',
                    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAABQVJREFUWEfNWF1oHFUU/s5sUhVTyc5GUBqlpDObWol9UYr2webNIqQgQrA1LdZgsjNNpBZbsQHrTy2VaqXdnU2qVhEsgpW2CmkFSQtqffGvNBKT2QYLUhCzs9EoKN2ZI3d2NzvZ7M9ksxEH9mXvOd/55tw7557vEKp8moZ+vt120i0SuIWZwyBaDYcCAE8yMEmgyfrlDV/8uvW2v6oJQQtxajz8fSMtu7kTRJ0EtPvyJRqGg/NSHY9M9ajf+fIB4ItY4+DkWsm2uyChE4xmD/iomx3GFEk0Jf5nh5uY0ESglQDf47FNA4jaaUR/71evVCJYkVjIMHUmvASG7AYGvpWYTzmSdCYVUUbLBbg1llAcwkYGbwQgfgIhCeaopbfuK+dblpgcT5wA82M5QgAdS2nKsUpvW2xdjo13gqQ+AOvFOgGfJjW1oxRWSWJyPHEVzHe6IEwDSV3ZXw2hQp9QLLGXiV/J/n/N0tQVxXCLEpONiR8AWpvJFG9JaeETtSCVwwgaE5sJ9EFmZ/knSw/fVYg/j5gcN3eC8YYwtDS14hlcDGHZMDnr/6alqTu9WHMChwbNTezgtGvg4AFrh/r1YgJX8pWj5v2QcDGTOedF7wcxSyw4dKWN0s4wCM0gPGNF1MOVgGuxnt8hTtppWpcrJbPE5Jh5CIRdohykNPXeWgT1iyEb5pfZr3V2S11ioqJLNzZcFsWTQT1+SkJjfGwloW4Xk/P2dG/rJb8kypSSDwGkpQDWiRvCJRaMTfQQ0eBCsiXHxveBpBcATDI721J6q3jrqh/ZMM8CeChXmjLEDHNE3H3MvD+lhwf8oHuIiWL5GzNttXTlnB/fYjbBmPkcEQ4wcCGlqe0Uio+vYJZ+EcaSJN031bvqGz/gXmJZ+78hBbqs3paTfvwLbeRBcw0c/OjymLFvocaj5gYpgPMAxixNXeMXtAixrCtvt7Twu35xvHayYYq7924wbSTZMLsBvMXAJylN3eQXsDQxcQ9Sf1JTjvrFytkFDfMMAR3M0CkUmzjIRLvBOG7p6pN+wcoRExgEPJ/U1AN+8YSdHDPfAWE7GK+TbCQ+BvgRInotGVH2+AWqREzgODbap/vUC34xQ/HEQWbeDaZTJMfNj8B4dCmIEfMTST38XnXEjImXARqo9VaC6HK6/oYNf3TfYfklNmcrQ3Gzixnv1/LwA7joLAtsnu5uueqXVLae5g9/MJ5YT8yiao9amtrmF6jMGfvsunPTlpkdzUm/WDk72UhccnWCKBdChjn29WtikYnaKvXxsyD5Kykfn/mkbNPjiX71n4WSEvrAJjaFX33D8oY5VxIxDyT1sK8Wel7GCMetiP9yU0g8ZCT6GHwERMNWRHm4Fpc4QHTEiihPLzRLBVV/2FVSTM9aunKo6rYnaCSeIvAQE72aiih7F0Uqo6Dmtz3Zqvv/axQFMVdtsz0ihG0t5VqlTOblXInWWgC4qhuIul/oEsi2QpJzZVwJMTJbBjzq+7+Sb8VUeXHB61HhSyHj5sg2oKgaLz0i8KjxWso5r6AupcKzbVPp4+kFEUKllkMVAPPUt5dJxRGAq85tRF0hnB1DgflcIBA4XUkfiD6ebXQQ4UGhgDKBazCGyr1BVqVvKzK4G2PALD64wyq3f88/tR3cedNbzahTyDGJ6XOq47M1H3UWO4VC9tlpSZUCUIhZZZIUsGj188Nh6c/0V1N7Vs9UKrLF1v8FJ5yEXcWLNvkAAAAASUVORK5CYII=',
                },
                {
                    type: 'rect',
                    text: "合并单元（高压侧）",
                    label: '合并单元（高压侧）',
                    icon: 'data:image/png;base64,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',
                },
                {
                    type: 'rect',
                    text: '保护（低压侧）',
                    label: '保护（低压侧）',
                    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAA+ZJREFUWEfNmF+oFHUUx7/nt3rpIeTO3MQMfLGZNRBS0JesBy1D8soVMyqKnrypO5tCPSRk4A1UsIcCb/tb/FMPgoJRkaXlg5ebgvmSiILi3d/US0Rl985chB5aunNidnZ2Z9bdnb17dZuFfdj9nT+fOef3O+fMj5DSD6WUC3MC6x9VazOCdSaqfOF5IEGTgjHpCdjOTvNWtw8+azDtk4mNRJkhCAyBeXGC45tE+JY9uujkjfOzgewYTCvaTxNjF8CvzMZBXZZOM2HUzRmXO9HvCEwrlvYT094Gg3cBXCHgEjP+ZBJ/+OvE3qNEWMTgNSB6Hoy+mB7jYydvvpMElwg2INVJBl6rGSIa85gPTz9SPo+Xl5fbOVhw/Fc9U/7nJYC3E7CqbgNXnJy5pp1uWzBdKm5QftOxzONJT9tsXZP2dgIfia45ltnSf8sFvah+BOOp0BAjs8K1lt7oBirU0aT9AoG/C38TcGrKMl9vZrMpmF5QH4HwdqjQ7sm6AY1mgokPuLns+4127gHTZGmQQGfrkaKNrmV83w1AKx1N/vIkYeZ6zQfRM42nNQ42zvP0W/YlUJBCBu1wLeNoKwd6YWIEQjA8j5z8spHZwMf3HJ12LOPVqH4MrOKIxL4AClddy1zdzpkm1TgBa32ZbtKtSfVTeFoZ8czEwDSpzhAw1Em0fJm5g9VPKoNHXSu7O3Iw6jHRpXIB9INQ/nf+Q4vvDi9xHmTEHj6sFvbNw28A5jNgu5Zp3gPWXyitFETXggU+51jZTUl7Zq4R8+3rUo0BeDbI0swK13qiUpJqqRwoqjeYcaL6594pyzzYC7ABqd5j4IDvSwCbJy3zmxiYVrT3E3PQDxnDTt78tBdgekFtAyHoJoRtTs78LAamy9IXAG0NuMQm13r8XC/ANPnzIMGr1E1m3uPmsx82gNlfAvzi/wpGtMfNGXGwgULpEBO9220qk6LrzWDd9C7zh0a5WCqB2pBQ2/y6VMMAjnW7+bsFi25+Yt46lc9+FUulP7+LDMaDVNLXrmVsSXLml4skmXCdZ/BB04hJ5Y/cG3y5aFTrld/vk7ftv6sT57Rzp7wII+0HwU6hWsp9frNPn+z7C8ACEP3u5IzHQtl4r5T2WYAHK/TA5ulqTZkzQAsD/VINCeBMsK/piJM3djYHizRxEI05OWP9g4Ly7epF+wKYn6twed6g+9ay6BAZcd0w9iBySu43YPSwAQljj+88nYNiNSypHK3DlKXyZaQGl8bXtxAulS+8IVwqrwjqcCm8VInWsNRdQzUrsNXGbxCzySQMwGMmcVuAJ5hwtacXd/e7A7Syl3gN1SuQRj//ARDQB0UouH96AAAAAElFTkSuQmCC',
                },
                {
                    type: "rect",
                    text: "合并单元（低压侧）",
                    label: "合并单元（低压侧）",
                    icon: ""
                },
                {
                    type: "rect",
                    text: "本体测控",
                    label: "本体测控",
                    icon: ""
                },
                {
                    type: "rect",
                    text: "母线保护",
                    label: "母线保护",
                    icon: ""
                },
                {
                    type: "rect",
                    text: "高压侧测控",
                    label: "高压侧测控",
                    icon: ""
                },
                {
                    type: 'rect',
                    text: "母联智能终端",
                    label: "母联智能终端",
                    icon: ""
                },
                {
                    type: 'rect',
                    text: "智能终端（高压侧）",
                    label: "智能终端（高压侧）",
                    icon: "",
                },
                {
                    type: 'rect',
                    text: "智能终端（低压侧）",
                    label: "智能终端（低压侧）",
                    icon: "",
                },
                {
                    type: 'rect',
                    text: "母线合并单元",
                    label: "母线合并单元",
                    icon: "",
                }
            ]
            lf.value.setTheme({
                rect: {
                    fill: "#FFFFFF",
                    stroke: "#255CE7",
                    strokeWidth: 2,
                },//放置的元素
                snapline: {
                    stroke: '#1E90FF', // 对齐线颜色
                    strokeWidth: 1, // 对齐线宽度
                },
                edgeText: {
                    textWidth: 100,
                    overflowMode: "default",
                    fontSize: 18,
                    background: {
                        fill: "#FFFFFF",
                    },
                },//连接线w文字样式
                outline: {
                    fill: "transparent",
                    stroke: "#949494",
                    strokeDasharray: "3,3",
                    hover: {
                        stroke: "#949494",
                    },
                },
                anchor: {
                    stroke: "#000000",
                    fill: "#FFFFFF",
                    r: 4,
                    hover: {
                        fill: "#949494",
                        fillOpacity: 0.5,
                        stroke: "#949494",
                        r: 10,
                    },
                },//锚点样式
                baseEdge: {
                    stroke: "#255CE7",
                    strokeWidth: 2,
                },//连接线颜色
                nodeText: {
                    color: "#255CE7",
                    overflowMode: "autoWrap",
                    lineHeight: 1.2,
                    fontSize: 12,
                },//节点内文字样式
            });
            lf.value.on("edge:click", function (data, e, position) {
                delId.value = data.data.id
            })
            lf.value.on('node:click', function (data, e, position) {
                nodeId.value = data.data.id
            })
            lf.value.on('edge:click', function (data, e, position) {//解决点击连接线问题
                if (copyColor.value == '#255CE7') {
                    blue()
                }
                if (copyColor.value == 'orange') {
                    orange()
                }
            })
            // lf.value.register(logicFlows)
            lf.value.extension.dndPanel.setPatternItems(patternItems);
            lf.value.render();
        })
        return {
            container,
            lf,
            textColor,
            lineColor,
            blue,
            orange,
            delLine,
            saveLine,
            cleanMap,
            nodeId,
            copyColor,
        }
    },
}
</script>

<style scoped>
.container {
    width: 100%;
    height: calc(100vh - 18rem);
    /* overflow: auto; */
}

:deep(.lf-element-text) {
    color: #255CE7;
}

/* :deep(.lf-basic-shape) {
    width: 150px;
    height: 150px;
} */
</style>