<script setup>
import {computed, ref} from 'vue'
import { Slider,Icon as VanIcon,Progress as VanProgress } from 'vant';
import { useStore } from "vuex";

const store=useStore()

const audioIconPlaysmall=new URL('../../assets/hzyb/report/audio-play-small.png', import.meta.url).href
const audioIconPausesmall=new URL('../../assets/hzyb/report/audio-pause-small.png', import.meta.url).href
const audioIconChange=new URL('../../assets/hzyb/report/audio-change-small.png', import.meta.url).href
const audioIconChangeGrey=new URL('../../assets/hzyb/report/audio-change-small-grey.png', import.meta.url).href

const formatVoiceTime = (e) => {
  let minus = parseInt(e / 60);
  let sec = parseInt(e % 60);
  return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
};

const curAudioData=computed(()=>{
    return store.state.hzyb.audioData.list[store.state.hzyb.audioData.index]
})

let currentTime=ref(0)
let showBigAudio=ref(false)
const audioIns=ref('')
store.state.hzyb.audioData.INS=audioIns

// 以下为音频事件
const audioError=()=>{
    console.log('音频加载出错');
}

const audioPlay=()=>{
    console.log('音频开始播放');
    store.commit('hzyb/upateAudioStatus','play')
}

const audioPause=()=>{
    console.log('音频暂停');
    store.commit('hzyb/upateAudioStatus','paused')
}

const audioTimeupdate=(e)=>{
    // console.log(e.target.currentTime);
    currentTime.value=e.target.currentTime
    store.commit('hzyb/updateAudioCtime',e.target.currentTime)
}

const audioEnded=()=>{
    console.log('音频播放结束');
    store.commit('hzyb/upateAudioStatus','end')
}

// 音频进度条变化
const SliderChange=(e)=>{
    store.state.hzyb.audioData.INS.currentTime=e
}

const handleClickAudio=()=>{
    if(store.state.hzyb.audioData.paused){
        store.state.hzyb.audioData.INS.play()
    }else{
        store.state.hzyb.audioData.INS.pause()
    }
}
// 关闭音频弹窗
const handleCloseAudioPup=()=>{
    showBigAudio.value=false
    store.state.hzyb.audioData.INS.pause()
    store.commit('hzyb/closeAudioPop')
}

// 切换音频
const handleAudioChange=(type)=>{
    const cindex=store.state.hzyb.audioData.index
    if(type==='before'&&cindex!=0){
        store.commit('hzyb/changeAudioIndex',cindex-1)
    }
    if(type==='next'&&(cindex!=store.state.hzyb.audioData.list.length-1)){
        store.commit('hzyb/changeAudioIndex',cindex+1)
    }
}

</script>


<template>
    <router-view />
    <audio
        ref="audioIns"
        autoplay
        :src="curAudioData?.url"
        @error="audioError"
        @play="audioPlay"
        @pause="audioPause"
        @timeupdate="audioTimeupdate"
        @ended="audioEnded"
        style="display:none"
    />
    <!-- 悬浮音频模块 -->
    <div class="popup-audio-box" v-if="$store.state.hzyb.audioData.show">
        <div class="small-box" v-if="!showBigAudio" @click="showBigAudio=true">
            <img :src="curAudioData.videoImg" class="bg-img">
            <div class="small-con">
                <div class="audio-name-box" style="flex:1;overflow: hidden;">
                    <div class="van-ellipsis title">{{curAudioData.videoName}}</div>
                    <div style="color:#666">时长 {{ formatVoiceTime(curAudioData.videoTime) }}</div>
                </div>
                <img class="btn-img" :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall" @click.stop="handleClickAudio" alt="">
                <van-icon name="cross" color="#BBC3C9" size="16" @click.stop="handleCloseAudioPup" />
            </div>
            <van-progress 
                class="bot-progress" 
                stroke-width="1px" 
                color="#D4AC78" 
                :percentage="(currentTime/curAudioData.videoTime)*100" 
                :show-pivot="false" 
            />
        </div>
        <div class="big-box" v-else>
            <van-icon name="arrow-down" color="#BBC3C9" size="16" class="arrow-d" @click="showBigAudio=false" />
            <van-icon name="cross" color="#BBC3C9" size="16" class="arrow-c" @click.stop="handleCloseAudioPup" />
            <div class="title">{{curAudioData.videoName}}</div>
            <div class="flex">
                <span>{{formatVoiceTime(currentTime)}}</span>
                <Slider 
                    button-size="14px" 
                    v-model="currentTime" 
                    :max="curAudioData.videoTime" 
                    active-color="#D5AD79" 
                    inactive-color="#E9E9E9"
                    @change="SliderChange" 
                    class="slider"
                ></Slider>
                <span>{{ formatVoiceTime(curAudioData.videoTime) }}</span>
            </div>
            <div class="flex" style="justify-content: center;">
                <img 
                    :src="$store.state.hzyb.audioData.index==0?audioIconChangeGrey:audioIconChange"
                    @click="handleAudioChange('before')"
                >
                <img :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall" @click="handleClickAudio" style="margin:0 20px">
                <img 
                    :src="$store.state.hzyb.audioData.index==($store.state.hzyb.audioData.list.length-1)?audioIconChangeGrey:audioIconChange" 
                    style="transform: rotate(180deg)"
                    @click="handleAudioChange('next')"
                >
            </div>
        </div>
    </div>
</template>

<style lang="scss">
// 禁止页面打印
@media print{
  body{
    display: none;
  }
}

*{
    user-select: none;
    -moz-user-select:-moz-none;
    -o-user-select:none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select:none;
}
#report-rich-content{
  position: relative;
  .hide-watermark-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 40px;
    z-index: 999999;
    background: transparent;
    left: 0;
    top: 0;
    pointer-events: none;
    color: rgba(0,0,0,0.005); // 水印蒙层字体颜色设置为白色透明
  }
}

</style>

<style lang="scss" scoped>
.popup-audio-box{
    position: fixed;
    z-index: 99;
    bottom: 30px;
    width: 90vw;
    left: 5vw;
    background-color: #fff;
    box-shadow: 0px 0px 33px 1px rgba(50,35,17,0.25);
    border: 1px solid #E4E4E4;
    .small-box{
        display: flex;
        height: 100px;
        position: relative;
        .bg-img{
            background-color: #f5f5f5;
            width: 74px;
            display: block;
            height: 100%;
            flex-shrink: 0;
            margin-right: 16px;
        }
        .small-con{
            overflow: hidden;
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 20px;
            padding-right: 33px;
            .title{
                font-size: 23px;
            }
            .btn-img{
                width: 49px;
                height: 49px;
                display: block;
                margin-right: 36px;
            }
        }
        .bot-progress{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
    .big-box{
        padding: 25px;
        position: relative;
        .arrow-d{
            position: absolute;
            left: 25px;
            top: 25px;
        }
        .arrow-c{
            position: absolute;
            right: 25px;
            top: 25px;
        }
        .title{
            padding: 0 40px;
            text-align: center;
            font-size: 23px;
        }
        .flex{
            display: flex;
            align-items: center;
            margin-top: 40px;
            span{
                flex-shrink: 0;
                font-size: 20px;
                color: #666;
            }
            .slider{
                flex: 1;
                margin: 0 10px;
            }
            img{
                width: 49px;
                height: 49px;
            }
        }
    }
}
</style>