<template>
    <div class="hide-scrollbar" @mousemove="chooseDiv">
        <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
        <!--<FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>-->

        <!--<div style="position: absolute;background: #ff0000;width: 800px;height: 500px;top:500px;left:400px;"></div>-->
    </div>
</template>

<script setup>
    import FollowRingChart from './FollowRingChart.vue'

    const chartPrpps1 = ref({
        left : 0,
        top : 0,
        width : 800,
        height : 800,
        borderColor : "#998877",
        color :"#ff00ff",
        bncolor : "#ffffff",
        radiusMax : '85%',
        radiusMin : '80%',
        isFinish : false
    })
    const chartPrpps2 = ref({
        left : 50,
        top : 50,
        width : 700,
        height : 700,
        borderColor : "#223344",
        color :"#aabbcc",
        bncolor : "#ddeeff",
        radiusMax : '85%',
        radiusMin : '80%',
    })
    const centerX = chartPrpps1.value.width/2+chartPrpps1.value.left
    const centerY = chartPrpps1.value.height/2+chartPrpps1.value.top
    function chooseDiv(event){
        let mouse_x = event.pageX;
        let mouse_y = event.pageY;
        let dis = Math.sqrt((centerX-mouse_x)*(centerX-mouse_x)+(centerY-mouse_y)*(centerY-mouse_y))
        if(dis >=320 && dis <=340){
            // document.getElementById("ring-chart2").style.zIndex = 1
            document.getElementById("ring-chart1").style.zIndex = 99999
        }
        if(dis <= 315 && dis >=285){
            document.getElementById("ring-chart1").style.zIndex = 1
            // document.getElementById("ring-chart2").style.zIndex = 99999
        }
        //console.log("dis:",dis)

    }
    //取点和圆心的角度
    function calculateAngleDegrees(x1, y1, x2, y2) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const radians = Math.atan2(dy, dx);
        return radians * (180 / Math.PI); // 弧度转角度
    }
</script>

<style scoped>
    .chart-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh; /* 使用整个视口高度 */
    }

    .ring-chart1 {
        width: 800px;
        height: 800px;
        position: absolute;
        left: 0px;
        top : 0px;
        background: #ffff00;
    }
    .ring-chart2 {
        position: absolute;
        left : -65px;
        top : 35px;
    }
    .hide-scrollbar::-webkit-scrollbar {
        display: none; /* 对于WebKit浏览器 */
    }
    .hide-scrollbar {
        -ms-overflow-style: none; /* 对于IE和Edge浏览器 */
        scrollbar-width: none; /* 针对Firefox */
    }
</style>
