<script setup>
import {reactive, ref} from 'vue'
import { Slider } from 'vant';
import { useStore } from "vuex";

const store=useStore()

const props = defineProps({
  audioData: Object,
});

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 audioIconPlay=new URL('../../../../assets/hzyb/report/audio-play.png', import.meta.url).href
const audioIconPause=new URL('../../../../assets/hzyb/report/audio-pause.png', import.meta.url).href


const handleClickAudio=()=>{
    if(store.state.hzyb.audioData.list[store.state.hzyb.audioData.index]?.url==props.audioData.video_url){
      if(store.state.hzyb.audioData.paused){
        store.state.hzyb.audioData.INS.play()
        store.commit('hzyb/showAudioPop')
      }else{
        store.state.hzyb.audioData.INS.pause()
      }
    }else{
        store.commit('hzyb/addAudio',{list:[{
          url:props.audioData.video_url,
          videoTime:props.audioData.video_play_seconds,
          videoName:props.audioData.video_name,
          videoImg:props.audioData.video_img
        }]})
    }
}


</script>

<template>
  <div class="flex audio-wrap">
    <img style="opacity: 0.3" src="@/assets/hzyb/report/audio-pause.png" mode="aspectFill" v-if="!audioData.auth_ok" />
    <img :src="$store.state.hzyb.audioData.list[$store.state.hzyb.audioData.index]?.url==audioData.video_url&&!$store.state.hzyb.audioData.paused?audioIconPlay:audioIconPause" @click="handleClickAudio" v-else />
    <div style="flex:1;overflow:hidden">
      <div class="van-multi-ellipsis--l2">{{ audioData.video_name }}</div>
      <div style="color: #999999">{{ formatVoiceTime(audioData.video_play_seconds) }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex{
    display: flex;
}
.audio-wrap {
  height: 160px;
  background: #faf7ee;
  border-radius: 16px;
  margin-top: 20px;
  padding: 10px 31px;
  margin-bottom: 31px;
  align-items: center;
  img {
    width: 110px;
    height: 110px;
    display: block;
    margin-right: 16px;
    flex-shrink: 0;
  }
}
</style>
