<template>
	<view class="imt-audio">
		<template>
			<view class="imt-audio-1">
				<view>{{formatSeconds(currentTime)}}</view>
				<view class="imt-audio-1-middle">
					<slider 
						class="audio-slider" 
						activeColor="#fff" 
						backgroundColor="rgba(255, 255, 255, 0.1)" 
						block-size="12" 
						:max="duration" 
						:value="currentTime" 
						@change="sliderChange" 
						@changing="sliderChanging"></slider>
				</view>
				<view>{{formatSeconds(duration)}}</view>
			</view>
			<view class="imt-audio-2">
				<view class="imt-audio-2-left"></view>
				<view class="imt-audio-2-middle">
					<!-- <view class="imt-audio-2-middle-left" @click="previousSong">
						<image src="@/static/imagesV2/icon49.png"></image>
					</view> -->
					<view></view>
					<view class="imt-audio-2-middle-middle">
						<image src="@/static/imagesV2/icon50.png" @click="play" v-if="playState=='pause'"></image>
						<image src="@/static/imagesV2/icon51.png" @click="pause" v-else></image>
					</view>
					<view></view>
					<!-- <view class="imt-audio-2-middle-right" @click="nextSong">
						<image src="@/static/imagesV2/icon52.png"></image>
					</view> -->
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 歌曲标题
			title: {
				type: [String]
			},
			// 专辑名称
			epname: {
				type: [String]
			},
			// 歌手
			singer: {
				type: [String]
			},
			autoplay: {
				type: [Boolean],
				default: false
			}
		},		
		data() {
			return {
				src: '',
				duration:0,
				currentTime:0,
				playState:"pause",//"loading"/"playing"/"pause"
				isSliderChanging:false,
				backgroundAudioManager: wx.getBackgroundAudioManager()
			};
		},
		mounted: function(){
			if(this.autoplay) {
				// this.play()
			}
		},
		methods:{
			previousSong() {
				this.$emit('previousSong')
			},
			nextSong() {
				this.$emit('nextSong')
			},
			selectItem(item) {
				this.$emit('selectItem', item)
				this.$refs.NotificationD.show = false
			},
			setSrc(src) {
				this.src = src
				this.play()
			},
			openNotificationD() {
				this.$refs.NotificationD.show = true
			},
			playerOnPlay:function(e)
			{
			  this.playState="playing";
			  this.duration = this.backgroundAudioManager.duration
			  this.backgroundAudioManager.onTimeUpdate(() => {
				  this.currentTime = this.backgroundAudioManager.currentTime
			  })
			  this.$emit("play");
			},
			playerOnPause:function(e)
			{
				this.playState="pause";
				this.$emit("pause");
			},
			playerOnEnded:function(e)
			{	
				this.playState="pause";
				this.$emit("ended");
			},
			playerOnTimeupdate:function(e)
			{
				this.playState="playing";
				this.duration = e.detail.duration;
				this.currentTime = e.detail.currentTime;
				this.$emit("timeUpdate",e.detail);
			},
			playerOnWaiting:function(e)
			{
				this.playState="loading";
			},
			playerOnError:function(e)
			{
				uni.showToast({
					title:"播放出错"+e
				});	
				this.playState="pause";
				this.$emit("error",e);				
			},
			formatSeconds:function(seconds){
				var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
				if (isNaN(result))
					return "";
				let h = Math.floor(result / 3600) < 10
					? "0" + Math.floor(result / 3600)
					: Math.floor(result / 3600);
				let m = Math.floor((result / 60) % 60) < 10
					? "0" + Math.floor((result / 60) % 60)
					: Math.floor((result / 60) % 60) + h * 60;
				let s = Math.floor(result % 60) < 10
					? "0" + Math.floor(result % 60)
					: Math.floor(result % 60);
				return `${m}:${s}`;				
			},
			play:function(){
				this.backgroundAudioManager.title = this.title;//
				this.backgroundAudioManager.epname = this.epname;//
				this.backgroundAudioManager.singer = this.singer;//
				this.backgroundAudioManager.src = this.src
				this.backgroundAudioManager.onPlay(this.playerOnPlay)
				// this.setProgress(10)
				this.backgroundAudioManager.onEnded(this.playerOnEnded)
				this.backgroundAudioManager.onError(this.playerOnError)
			},
			pause:function(){
				this.backgroundAudioManager.pause();
				this.backgroundAudioManager.onPause(this.playerOnPause)
			},
			setProgress(num) {
				if (num) {
					this.backgroundAudioManager.seek(num)
				}
			},
			sliderChange:function(e){
				this.isSliderChanging = false;
				//要通过e.detail.value获取，否则如果通过dom去读取slider的value
				//就会存在滚动条拖不动的情况
				this.backgroundAudioManager.seek(e.detail.value)
			},
			sliderChanging:function()
			{
				this.isSliderChanging = true;
			},	
		},
	}
</script>

<style lang="scss">
@import './index.scss';    
</style>