<template>
	<div>
		<div class="audio-box" @click="audioPlay" :style="{width:boxWidth}">
			<div class="audio-length">{{length?length+'″':''}}</div>
			<div class="audio-button">
				<img class="icon_voice" v-if="!audioFlag" :src="icon_voice_start" alt></img>
		        <img class="icon_voice" v-else :src="icon_voice_stop" alt></img>	
			</div>
		</div> 
		<audio ref="audioControl" v-show="false" :src="url" preload="auto" controls="controls" @ended="playEnded"></audio>
	</div>
</template>

<script>
	export default {
		name:'enoAudio',
	    props: {
	       audioData:{
	            type: String,
	            default: ''
	        },
			width:{
				type: String,
				default: ''
			}
	    },
		data(){
		    return{
				boxWidth:'0px',
				url:'',
				length:0,
				allLength:0,
				audioFlag:false,
				icon_voice_start: require("../../images/icon_voice_start.svg"),
				icon_voice_stop: require("../../images/icon_voice_stop.svg"),
				VoiceTimer:false
		    }
		},
        mounted() {
			if(this.audioData){
				var dataObj = JSON.parse(this.audioData)
				this.url = this.$eno.previewFileUrl(this,dataObj.data);
				this.length = dataObj.length;
				this.allLength = dataObj.length;
				this.computeWidth();
				this.$refs.audioControl.onplay = (res)=>{
					this.VoiceTimer = setInterval(() => {
						this.length--
						if (this.length <= 0) {
							this.VoiceTimer = clearInterval(this.VoiceTimer)
							this.length = this.allLength
						}
					}, 1000)
				}
			} 
        },
		watch:{
			audioData(val){
				var dataObj = JSON.parse(val)
				this.url = this.$eno.previewFileUrl(this , dataObj.data);
				this.length = dataObj.length;
				this.allLength = dataObj.length;
			},
			width(val){
				this.computeWidth(val);
			}
		},
		methods:{
			audioPlay(){
				if(this.audioFlag){
					this.$refs.audioControl.pause();
					this.VoiceTimer = clearInterval(this.VoiceTimer)
					this.audioFlag = false;
				}
				else{
					this.$refs.audioControl.play();
					this.audioFlag = true;
				}
			},
			playEnded(){
				this.audioFlag = false;
			},
			computeWidth(val){
				var width = val||this.width;
				if(width){
					this.boxWidth = width
				}
				else{
					if(this.length < 20){
						this.boxWidth = '120px !important'
					}
					else if(this.length < 40){
						this.boxWidth = '150px !important'
					}
					
				}
			}
		}
	}
</script>

<style lang="less" scoped>

@import "../../style/base.less"; 
/* 	.audio-box{
		width: 200px;
		border-radius: 10px;
		background-color: ;
	} */
	.Widthone{
		width: 180px!important;
	}
	.Widthtwo{
		width: 150px!important;
	}
	.Widththree{
		width: 120px!important;
	}
	.audio-box {
		background: #4880FF;
		border-radius: 15px;
		box-shadow: 0 1px 2px 2px rgba(72, 128, 255, 0.2);
		width: 180px;
		height: 30px;
		padding: 0 9px 0 12px;
		color: #fff;
		display: flex;
		align-items: center;
		cursor: pointer;
		
		.audio-length{
			flex: 1;
		}
		
		.audio-button {
			display: flex;
			justify-content: center;
			width: 18px;
			height: 30px;
			align-items: center;
			.icon_voice{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	
</style>
