<script setup>
import { useDraggable } from '@vueuse/core'
import { ref,computed } from 'vue'
import { useStore } from 'vuex';

const store=useStore()

const globalAudioIns=ref(null)
store.state.audioData.INS=globalAudioIns

// 格式化音频时长
const formatAudioTime=(e)=>{
    const minus = parseInt(e / 60);
    const sec = parseInt(e % 60);
    return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
}

// 拖动头
const drag = ref(null)
const {style} = useDraggable(drag,{
  initialValue: {},
})
// 当前音频地址
const curUrl=computed(()=>{
    return store.state.audioData.list[store.state.audioData.index]&&store.state.audioData.list[store.state.audioData.index].url||''
})
let curTime=ref(0)//当前音频播放时长
const audioTimeupdate=(e)=>{// 音频播放时间更新
    curTime.value=e.target.currentTime
    store.commit('updateAudioTime',e.target.currentTime)
}

const audioOnError=(e)=>{
    console.log('音频播放错误');
}

const audioOnEnd=()=>{// 音频播放结束事件
    store.commit('changeAudio','auto')
}

const audioOnPause=()=>{// 音频播放暂停事件
    store.commit('audioStatusChange','paused')
}

const audioOnPlay=()=>{// 音频开始播放事件
    store.commit('audioStatusChange','paly')
}


const handleClickAudioBtn=(type)=>{ //点击音频按钮
    if(type==='center'){
        if(store.state.audioData.paused){
            store.state.audioData.INS.play()
        }else{
            store.state.audioData.INS.pause()
        }
    }else{
        store.commit('changeAudio',type)
    }
}

//拖动进度条
const handleDragTime=(e)=>{
    store.state.audioData.INS.currentTime=e
}

// 关闭弹窗
const closeAudioPop=()=>{
    store.commit('closeAudio')
    store.commit('closeAudioPop')
}

</script>

<template>
    <audio 
        @ended="audioOnEnd" 
        @pause="audioOnPause"
        @play="audioOnPlay"
        @timeupdate="audioTimeupdate"
        @error="audioOnError"
        :src="curUrl"
        ref="globalAudioIns"
        style="display: none;"
        autoplay
    ></audio>
    <div :style="style" class="global-audio-pop-wrap" v-if="$store.state.audioData.show">
        <img src="@/assets/audio-close.png" class="close-btn" alt="" @click="closeAudioPop">
        <div class="drag-head" ref="drag"></div>
        <div class="flex-col-center content">
            <div class="flex-col-center btns" style="flex-shrink: 0;">
                <div class="before-btn" @click="handleClickAudioBtn('before')"></div>
                <div :class="['center-btn',!$store.state.audioData.paused&&'center-btn-play']" @click="handleClickAudioBtn('center')"></div>
                <div class="next-btn" @click="handleClickAudioBtn('next')"></div>
            </div>
            <div class="flex-col-center right-box">
                <div class="time">{{formatAudioTime(curTime)}}</div>
                <el-slider 
                    v-model="curTime"
                    :show-tooltip="false" 
                    @change="handleDragTime"
                    :max="Number($store.state.audioData.list[$store.state.audioData.index].time)"
                />
            </div>
        </div>
        <div style="text-align:center;font-size: 14px;color: #666;">{{$store.state.audioData.list[$store.state.audioData.index].name}}</div>
    </div>
</template>

<style lang="scss" scoped>
.global-audio-pop-wrap{
    overflow: hidden;
    position: fixed;
    z-index: 5000;
    left: 50%;
    bottom: 20px;
    left: 15vw;
    width: 70vw;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px solid #EFEFEF;
    .close-btn{
        position: absolute;
        top: 10px;
        right: 20px;
        width: 14px;
        height: 14px;
    }
    .drag-head{
        cursor: move;
        height: 20px;
    }
    .content{
        padding-left: 40px;
        .before-btn,.next-btn{
            width: 24px;
            height: 24px;
            background-image: url('@/assets/audio-before-default.png');
            background-size: cover;
            display: block;
            cursor: pointer;
        }
        .next-btn{
            transform: rotate(180deg);
        }
        .center-btn{
            display: block;
            width: 34px;
            height: 34px;
            margin: 0 12px;
            background-image: url('@/assets/audio-pause.png');
            background-size: cover;
            cursor: pointer;
        }
        .center-btn-play{
            background-image: url('@/assets/audio-doing.png');
        }

        .right-box{
            flex: 1;
            margin-left: 10px;
            padding-right: 80px;
            .time{
                color: #fff;
                background-color: #F3A52F;
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                padding: 0 5px;
                border-radius: 15px;
                margin-right: 20px;
            }
            :deep(.el-slider__button){
                border-color: #F3A52F;
            }
            :deep(.el-slider__runway){
                background-color: #FFCF88;
            }
            :deep(.el-slider__bar){
                background-color: #F3A52F;
            }
        }
    }
    
}
</style>