<template>
    <div class="audio-backgroud-wrap">
        <div v-for="item in lineNumber" :key="item" :class="`audio-backgroud ${isPlaying ? '' : 'animation-stop'}`">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
            <div class="line line-3"></div>
            <div class="line line-4"></div>
            <div class="line line-5"></div>
            <div class="line line-6"></div>
            <div class="line line-7"></div>
            <div class="line line-8"></div>
            <div class="line line-9"></div>
            <div class="line line-10"></div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "AudioBackground",
}
</script>

<script setup lang="ts">
type Props = {
    isPlaying?: boolean;
    lineNumber?: number;
}
withDefaults(defineProps<Props>(), {
    isPlaying: false,
    lineNumber: 10,
});
</script>

<style lang="scss">
.audio-wrap[data-weiling-mobile-ui-wl-audio] {
    .audio-backgroud-wrap {
        position: absolute;
        width: 100%;
        overflow: hidden;
        z-index: inherit;
        @extend %flex-middle;

        .audio-backgroud {
            @extend %flex-middle;
        }

        .animation-stop {
            .line {
                animation-play-state: paused !important;
            }
        }

        .line {
            background: #eff3f5;
            width: 1px;
            margin-right: 1px;
            animation: audio-play-ani 1s infinite ease;

            &-1 {
                height: j(4);
            }

            &-2 {
                height: j(8);
                animation-delay: 0.1s;
            }

            &-3 {
                height: j(20);
                animation-delay: 0.2s;
            }

            &-4 {
                height: j(28);
                animation-delay: 0.3s;
            }

            &-5 {
                height: j(16);
                animation-delay: 0.4s;
            }

            &-6 {
                height: j(16);
                animation-delay: 0.5s;
            }

            &-7 {
                height: j(4);
                animation-delay: 0.6s;
            }

            &-8 {
                height: j(8);
                animation-delay: 0.7s;
            }

            &-9 {
                height: j(16);
                animation-delay: 0.8s;
            }

            &-10 {
                height: j(12);
                animation-delay: 0.9s;
            }
        }
    }
}
</style>
