<template name="dever-audio">
	<view class="control">
		<view @click="open">
			<cover-image v-if="pic" class="poster" :src="pic" mode="aspectFill" style="height:auto">
			</cover-image>
			
			<cover-image
			class="ico-music-playing" v-if="playButton"></cover-image>
			
			<cover-image
			class="ico-music-play" v-if="!playButton"></cover-image>
		</view>
		
		<view class="audio" v-if="durationTime">
			<view class="audio-wrapper">
				<view class="audio-number">{{currentTime}}</view>
				<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
				 @change="change"></slider>
				<view class="audio-number">{{durationTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "dever-audio",
	props: {
		src : {
			type    : String,
			value	: null
		},
		loop : {
			type    : Boolean,
			value	: false
		},
		pic : {
			type    : String,
			value	: null
		},
		auto : {
			type    : Boolean,
			value	: false
		},
		control : {
			type    : Boolean,
			value	: false
		},
		color: {
			type:String,
			default:'#169af3'
		},
	},
	data() {
		return {
			objectFit : 'fill',
			play : false,
			playButton : false,
			audio : false,
			currentTime: '', //当前播放时间
			duration:'',
			durationTime: '', //总时长
			current: '', //slider当前进度
			loading: false, //是否处于读取状态
			paused: true, //是否处于暂停状态
			seek: false //是否处于拖动状态
		};
	},
	watch: {
		//监听总时长改变
		duration(e) {
			//this.durationTime = this.format(e)
		},
		//监听当前进度改变
		current(e) {
			this.currentTime = this.format(e)
		}
	},
	mounted() {
		this.audio = uni.createInnerAudioContext();
		this.audio.src = this.src;
		this.audio.loop = this.loop;
		this.current = 0;
		this.audio.obeyMuteSwitch = false;
		this.audio.autoplay = this.auto;
		//音频进度更新事件
		this.audio.onTimeUpdate(() => {
			if (!this.seek) {
				this.current = this.audio.currentTime;
			}
			if (!this.durationTime) {
				this.duration = this.audio.duration;
				this.durationTime = this.format(this.audio.duration);
			}
		})
		//音频完成更改进度事件
		this.audio.onSeeked(() => {
			this.seek = false;
		})
	},
	methods:{
		start : function()  {
			this.$emit('update:load', true);
			this.audio.play();
			this.play = true;
			this.playButton = true;
		},
		stop : function() {
			this.audio.pause();
			this.play = false;
			this.playButton = false;
		},
		open : function()  {
			if (!this.play) {
				this.start();
			} else {
				this.stop(true);
			}
		},
		//格式化时长
		format(num) {
			return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
				Math.floor(num % 60)).length) + Math.floor(num % 60)
		},
		//完成拖动事件
		change(e) {
			this.audio.seek(e.detail.value)
		}
	},
}
</script>
<style scoped>
.control {
	width: 100%;
	height: 100%;
	z-index: 2;
	background: transparent;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
.poster{
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.audio {
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx;
	position: relative;
	z-index: 10;
	background: transparent;
	top:78%;
}

.audio-wrapper {
	display: flex;
	align-items: center;
}

.audio-number {
	font-size: 24rpx;
	line-height: 1;
	color: #333;
	color: #fff;
}

.audio-slider {
	flex: 1;
	margin: 0 30rpx;
}
.ico-music-play{
  background: url(http://www.huoxingkandiqiu.com/files/img/speaker.png) no-repeat;
  background-size: cover;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}
.ico-music-playing{
  background: url(data:image/gif;base64,[encoded data, 17340 characters]) no-repeat;
  background-size: cover;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}
</style>
