<template>
    <div class="p-12 w-full h-full flex flex-col relative">
        <el-checkbox :value="item.id" class="full-area-checkbox" :style="{ zIndex: isCheck ? 1 : -1 }" />
        <div class="flex justify-between">
            <div>
                <div class="font-bold color-000">刘若英 - 后来</div>
                <div class="color-888 fs-12">柔和 | 云音乐</div>
            </div>
            <span class="color-888 fs-12">25</span>
        </div>
        <div class="flex-items-center audio-progress-only mt-10">
            <audio ref="audioRef" src="../../../../../public/houlai.mp3" @timeupdate="onTimeUpdate" @ended="onEnded"
                @loadedmetadata="onLoadedMetadata"></audio>
            <div @click.stop="togglePlay" class="minw-44 h-44 round flex-center mr-16 play">{{ isPlaying ? '⏸️' : '▶' }}
            </div>
            <el-slider v-model="currentTime" :max="duration" :step="0.1" :show-tooltip="false" @change="onSliderChange"
                @drag-start="isDragging = true" @drag-end="isDragging = false" size="small" />
            <div class="flex-items-center gap-2 ml-10"><span>{{ formatTime(currentTime) }}</span>/<span
                    class="color-888">{{ formatTime(duration) }}</span></div>
        </div>
        <div class="flex-items-center justify-between pt-10 mt-10" style="border-top: 1px solid #f5f5f5;">
            <div class="flex-items-center gap-4">
                <div class="bg-main w-30 h-30 round"></div>
                <div>张晓华</div>
            </div>
            <div class="fs-12 color-999">3小时前</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
    item: {
        type: Object,
        default: () => { }
    },
    isCheck: {
        type: Boolean,
        default: false
    }
})
const audioRef = ref<HTMLAudioElement | null>(null);
const currentTime = ref(0);
const duration = ref(0);
const isDragging = ref(false);
const isPlaying = ref(false);

// 切换播放
const togglePlay = async () => {
    if (!audioRef.value) return;
    if (isPlaying.value) {
        audioRef.value.pause();
        isPlaying.value = false;
    } else {
        try {
            await audioRef.value.play();
            isPlaying.value = true;
        } catch (err) {
            isPlaying.value = false;
            return;
        }
    }
};
// 改变进度条
const onSliderChange = (val: number) => {
    if (audioRef.value) {
        audioRef.value.currentTime = val;
    }
}
// 音频元数据加载完成 (获取总时长)
const onLoadedMetadata = () => {
    if (audioRef.value) {
        duration.value = audioRef.value.duration;
    }
};

// 播放进度更新事件
const onTimeUpdate = () => {
    if (!audioRef.value || isDragging.value) return; // 拖动时停止同步，防止滑块跳动
    currentTime.value = audioRef.value.currentTime;
};

// 播放结束
const onEnded = () => {
    isPlaying.value = false;
    currentTime.value = 0;
};
// 格式化时间 (mm:ss)
const formatTime = (time: number) => {
    if (!time || isNaN(time)) return '0:00';
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
</script>

<style lang="scss" scoped>
.play {
    border: 2px solid rgba(var(--main-color), 1);
}

:deep(.el-slider__button) {
    background-color: rgb(var(--main-color));
    height: 14px;
    width: 14px;
}
</style>