<template>
<div class="compBox">
    <div id="container" class="compCon">
    </div>
</div>
</template>
    
<script>
import { Graph, Node, Point } from '@antv/x6'

export default {
    name: 'sensors',
    data(){
        return {
            
        }
    },
    components: {
    },
    mounted(){
        this.initGraph();
    },
    methods: {
        initGraph(){



            Graph.registerNode(
                'sensor',
                {
                    width: 180,
                    height: 42,
                    markup: [
                        {
                            tagName: 'rect',
                            selector: 'box',
                        },
                        {
                            tagName: 'image',
                            selector: 'bg',
                        },
                        {
                            tagName: 'text',
                            selector: 'title',
                        },
                    ],
                    attrs: {
                        box: {
                            refWidth: '100%',
                            refHeight: '100%',
                            fill: 'transparent',
                            // stroke: '#5F95FF',
                            strokeWidth: 1,
                            rx: 0,
                            ry: 0,
                            pointerEvents: 'visiblePainted',
                        },
                        avatar: {
                            width: 48,
                            height: 48,
                            refX: 8,
                            refY: 6,
                        },
                        title: {
                            refWidth: '100%',
                            refHeight: '100%',
                            refX: "50%",
                            refY: "50%",
                            fill: '#fff',
                            "textAnchor": "middle",
                            "textVerticalAnchor": "middle",
                            fontFamily: 'Courier New',
                            fontSize: 15,
                            fontWeight: '800'
                        },
                        bg: {
                            "xlink:href": require('./img/sensorItem.svg')
                        }
                    },
                },
                true,
            )

            Graph.registerEdge(
                'dashed',
                {
                    zIndex: -1,
                    attrs: {
                        line: {
                            strokeDasharray: 5,
                            fill: 'none',
                            strokeLinejoin: 'round',
                            strokeWidth: 1,
                            stroke: '#05D5F6',
                            sourceMarker: null,
                            targetMarker: null,
                        },
                    },
                },
                true,
            )

            const graph = new Graph({
                container: document.getElementById('container'),
                autoResize: true,
                grid: false,
                panning: false,
                mousewheel: false,
                connecting: {
                    anchor: 'orth',
                },
            })


            function createSub(x, y, title) {
                return graph.addNode({
                    x,
                    y,
                    shape: 'sensor',
                    attrs: {
                        title: {
                            text: title,
                            wordSpacing: '-5px',
                            letterSpacing: 0,
                            fontSize: 13,
                            fontFamily: 'Arial',
                            letterSpacing: 0,
                        }
                    },
                })
            }

            function link(source, target, vertices) {
                return graph.addEdge({
                    source: {
                        cell: source,
                        anchor: {
                            name: 'center',
                            args: {
                                dx: 0,
                            },
                        },
                    },
                    target: {
                        cell: target,
                        anchor: {
                            name: 'right'
                        },
                    },
                    shape: 'dashed',
                })
            }

            const main = graph.addNode({
                shape: 'circle',
                x: 310,
                y: 80,
                width: 16,
                height: 16,
                attrs: {
                    body:{
                        fill: "#05D5F6",
                        stroke: "#FFFFFF66"
                    }
                }
            })

            let subItems = [
                "可变新消息标志",
                "气象检测器",
                "一类交通量调查站",
                "枪机",
                "球机",
                "雷达",
                "路段语音广播系统",
                "疲劳唤醒系统",
                "护栏碰撞预警系统",
                "合流区预警系统",
                "智能行车诱导系统",
                "光纤在线监测系统",
                "智慧锥桶"
            ]

            subItems.forEach((item, index) => {
                let temp = createSub(0, index * 68, item);
                link(main, temp);
            })

            // const sub01 = createSub(0, 0, '气象检测器')
            // const sub02 = createSub(0, 100, '一类交通量调查站')
            // const sub03 = createSub(0, 200, '可变新消息标志')

            // link(main, sub02, [
            //     {
            //         x: 385,
            //         y: 180,
            //     },
            // ])
            // link(main, sub01, [
            //     {
            //         x: 385,
            //         y: 180,
            //     },
            //     {
            //         x: 175,
            //         y: 180,
            //     },
            // ])
            // link(main, sub03, [
            //     {
            //         x: 385,
            //         y: 180,
            //     },
            //     {
            //         x: 585,
            //         y: 180,
            //     },
            // ])

            // graph.zoomToFit({ padding: 0, maxScale: 1, mainScale: 1 })


            
        }
    }
}
</script>
    
<style lang='scss' scoped>
.compBox{ pointer-events: none;
    .compCon{ width:100%; height: 100%;}
}
</style>