<template>
    <div class="person_box">
        <div class="wave-box" id="myElement"
            :style="{ width: width, height: heightDrop + 'px', border: `1px solid ${birderColor}` }">
            <div class="wave"
                :style="{ backgroundColor: `${color}`, '--heightTop': heightTop, '--circleBackGround': circleBackGround, }">
                <div :style="{ fontSize: fontSize, }" style="z-index: 2;text-align: center;white-space: pre-wrap;">
                    {{ dropTitle == 'undefined%' ? '0%' : dropTitle }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    width: {
        type: String,
        default: '80%',
    },
    birderColor: {
        type: String,
        default: 'rgb(42, 139, 247)',
    },
    color: {
        type: String,
        default: 'rgb(42, 139, 247)',
    },
    fontSize: {
        type: String,
        default: '16px',
    },
    dropTitle: {
        type: String,
        default: '暂无数据',
    },
    heightTop: {
        type: String,
        default: '-30%',
    },
    circleBackGround: {
        type: String,
        default: 'rgb(9, 38, 71)',
    }
})
const heightDrop = ref(0)
const heightTop = ref(0)
watch(() => props.heightTop, (newVal) => {
    if (newVal) {
        heightTop.value = newVal
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    var element = document.getElementById("myElement");
    var width = element.offsetWidth;
    heightDrop.value = width
});

onUnmounted(() => {
})
// 窗口自适应
window.addEventListener('resize', () => {
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.wave-box {
    position: relative;
    // width: 120px;
    border-radius: 50%;
    // border: 1px solid rgb(117, 196, 26); //边框颜色
}

.wave {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: rgb(117, 196, 26); //颜色
    border-radius: 50%;
    overflow: hidden;
}

.wave::before,
.wave::after {
    content: '';
    position: absolute;
    // top: -60%; //高度
    top: var(--heightTop);
    left: 50%;
    width: 250%;
    height: 250%;
}

.wave::after {
    border-radius: 40%;
    background-color: var(--circleBackGround);
    animation: shi 15s linear infinite;
    transform: translate(-50%, -60%) rotate(0deg)
}

@keyframes shi {
    0% {
        transform: translate(-50%, -65%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -65%) rotate(360deg);
    }
}

.wave::before {
    border-radius: 42%;
    background-color: rgb(240, 228, 228, 0.2);
    transform: translate(-50%, -65%) rotate(0deg);
    animation: xu 17s linear infinite;
}

@keyframes xu {
    0% {
        transform: translate(-50%, -60%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -60%) rotate(360deg);
    }
}
</style>