<template>
	<div class="audioCss">
		<div>
			<div>
				<el-icon @click="open" v-if="show"><VideoPause ></VideoPause></el-icon>
				<el-icon @click="open" v-else><VideoPlay ></VideoPlay></el-icon> 
			</div> 
			<div>
				{{time}} / {{endTime}} 
			</div>
		</div> 
		<audio id="asddd" ref="audio" :src="props.src" preload="metadata"  @pause="pause" @play="play" @timeupdate="timeupdate" @loadedmetadata="loadedmetadata"></audio>
	</div>
</template>

<script setup>
	import { ref , defineProps } from 'vue';
	import {
		VideoPlay,
		VideoPause 
	} from '@element-plus/icons-vue'

	const props = defineProps({
		src : {
			type : String,
    		default: ''
		}
	})
  
	const audio = ref('');
	  
	const time = ref('00:00');
	const endTime = ref('00:00');
	const show = ref(false);


	function open (){ 
		if(show.value){
			audio.value.pause()
		}else{
			audio.value.play()
		}
	}


	function play (){ 
		show.value = true;
	}
	function pause (){
		show.value = false;
	}

	function loadedmetadata(){
		endTime.value = `${Math.floor(audio.value.duration/60)}:${Math.floor(audio.value.duration%60) < 10 ? `0${Math.floor(audio.value.duration%60)}` : Math.floor(audio.value.duration%60)}`  
	}

	function timeupdate(ev){
		time.value = `${Math.floor(audio.value.currentTime/60)}:${Math.floor(audio.value.currentTime%60) < 10 ? `0${Math.floor(audio.value.currentTime%60)}` : Math.floor(audio.value.currentTime%60)}`  
	}

</script>

<style scoped lang="scss">
	.audioCss{
		>div:first-child{
			 
			display: flex;
			align-items: center;
			column-gap: 2px;

			.el-icon{ 
				font-size: 20px;
				color: rgb(66, 176, 245);
			}

			>div{
				height: 20px;
				line-height: 21px;
			}

			>div:last-child{
				font-size: 13px;
				color: rgb(161, 171, 197);
			}
		}
	}
</style>