<template>
    <div class="line-block">
        <span style="font-size: '40px';color: saddlebrown;">1111dsdfg</span>
        <div class="one">
            <div class="block-one" id="block-one">1</div>
            <div class="block-two" id="block-two">2</div>
        </div>
        <div class="two">
            <div class="block-three" id="block-three">3</div>
            <div class="block-four" id="block-four">4</div>
        </div>
        <div id="start" class="target">start</div>
        <div id="end" class="target">end</div>
    </div>
</template>

<script>
import LeaderLine from "../assets/js/leaderline"
// var LeaderLine = require("../assets/js/leaderline")
import { onMounted, ref } from 'vue'
export default {
    setup() {
        onMounted(() => {
            console.log("看一下", LeaderLine)
            getLine()
            let startEle = document.getElementById('start');
            let endEle = document.getElementById('end');
            let leader_line = new LeaderLine(
                startEle,
                endEle,
                {
                    dash: true,
                }
            );
        })







        let lineContainer = ref(null)
        let lineContainer2 = ref(null)
        let lineContainer3 = ref(null)
        let lineContainer4 = ref(null)
        const getLine = () => {
            let dom1 = document.getElementById('block-one')
            let dom2 = document.getElementById('block-two')
            let dom3 = document.getElementById('block-three')
            let dom4 = document.getElementById('block-four')
            let styleOption = {
                // color: '#2AC367', // 指引线颜色
                // startPlug: 'disc',
                // endPlug: 'disc', // 指引线结束点的样式 hand,disc
                // size: 2, // 线条尺寸
                // startSocket: 'bottom', //在指引线开始的地方从元素左侧开始
                // endSocket: 'top', //在指引线开始的地方从元素右侧结束
                // // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
                // // startPlugColor: '#2AC367', // 渐变色开始色
                // // endPlugColor: '#fff386', // 渐变色结束色
                // // gradient: false, // 使用渐变色
                // outLineColor: 'blue',
                // path: 'magnet', // straight,arc,fluid,magnet,grid
                // dash: {
                //     // 虚线样式
                //     animation: true // 让线条滚动起来
                // },
                // hide: true
                startPlug: 'disc',
                endPlug: 'disc',
                startPlugColor: 'rgb(248, 205, 30)',
                startPlugOutlineColor: 'rgb(30, 130, 250)',
                endPlugColor: '#ff0000', // translucent
                endPlugOutlineColor: 'green',
                size: 2,
                startPlugSize: 1.5,
                startPlugOutlineSize: 1,
                endPlugSize: 3,
                endPlugOutlineSize: 3
            }
            // lineContainer.value = new LeaderLine(
            //     LeaderLine.mouseHoverAnchor(dom1),
            //     dom3,
            //     styleOption
            // )
            // lineContainer2.value = new LeaderLine(
            //     LeaderLine.mouseHoverAnchor(dom1),
            //     dom4,
            //     styleOption
            // )
            lineContainer3.value = new LeaderLine(dom2, dom4, styleOption)

            // lineContainer4.value = new LeaderLine(dom2, dom3, styleOption)
            /** 显示效果
             *  draw 绘制线条
             *  fade 淡入
             *  none 无效果，即直接显示
             */
            let showEffectName = 'draw'
            // 动画参数
            let animOptions = {
                duration: 1000, //持续时长
                timing: 'ease-in' // 动画函数
            }
            console.log("lineContainer", lineContainer)
            // lineContainer.value.show(showEffectName, animOptions)
            // lineContainer2.value.show(showEffectName, animOptions)
            lineContainer3.value.show(showEffectName, animOptions)
            lineContainer3.value.endPlugOutline = true;
            // lineContainer4.value.show(showEffectName, animOptions)
            // lineContainer.value.position()
            // lineContainer2.value.position()
            lineContainer3.value.position()
            console.log("lineContainer3", lineContainer3.value);
            // lineContainer4.value.position()
        }

        return {
            lineContainer,
            lineContainer2,
            lineContainer3,
            lineContainer4,
            // leader_line
        }
    }
}
</script>

<style lang="scss" scoped>
.line-block {

    border: 1px solid red;

    position: absolute;
    width: 412px;
    height: 90vh;
    top: 111px;
    z-index: 300;

    .one {
        display: flex;
        justify-content: space-around;
        // height: 100px;
    }

    .two {
        margin-top: 100px;
        display: flex;
        justify-content: space-around;
    }

    .iframe-block {
        margin-top: 50px;
    }

    .target {
        display: inline-block;
        background-color: #9ee7ea;
        padding: 12px;
    }

    .block-one {
        border: 1px solid blue;
        padding: 10px;
    }

    .block-two {
        border: 1px solid blue;
        padding: 10px;
    }

    .block-three {
        border: 1px solid blue;
        padding: 10px;
    }

    .block-four {
        border: 1px solid blue;
        padding: 10px;
    }
}

.target {
    display: inline-block;
    background-color: #9ee7ea;
    padding: 12px;
}

#start {}

#end {
    float: right;
    margin-top: 200px;
}
</style>
