<script setup>
import { useStore } from 'vuex';

const props=defineProps({
    data:{
        type:Object
    }
})

const store=useStore()

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 handleClickAudio=()=>{
    if(store.state.audioData.reportId==props.data.reportId){
        if(store.state.audioData.paused){
            store.state.audioData.INS.play()
        }else{
            store.state.audioData.INS.pause()
        }
        return
    }
    store.commit('addAudio',{
        list:[{time:props.data.video_play_seconds,url:props.data.video_url,name:props.data.video_name}],
        reportId:props.data.reportId,
        index:0
    })
}

</script>

<template>
    <div class="flex audio-box">
        <div :class="['img',($store.state.audioData.reportId==props.data.reportId&&!$store.state.audioData.paused)&&'img-play']" @click="handleClickAudio"></div>
        <div class="content">
            <div class="name">{{props.data.video_name}}</div>
            <div class="des">
                <span>主讲人：FICC团队</span>
                <span>大小：{{props.data.video_size}}M</span>
                <span>时长：{{formatVoiceTime(props.data.video_play_seconds)}}</span>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.audio-box{
    background: #FFFBF5;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(243, 165, 47, 0.6);
    padding: 15px 20px;
    align-items: center;
    .img{
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        margin-right: 20px;
        background-color: #fff;
        cursor: pointer;
        background-image: url('@/assets/audio-pause-big.png');
        background-size: cover;
    }
    .img-play{
        background-image: url('@/assets/audio-doing-big.png');
    }
    .content{
        flex: 1;
        .name{
            font-weight: bold;
            margin-bottom: 18px;
        }
        .des{
            span{
                color: #666;
                font-size: 14px;
                margin-right: 20px;
            }
        }
    }
}
</style>