<template>
	<view>
		<view :class="['fuchuang',showBig?'bigMode':'miniMode']" v-show="userInfo.playVisible">
			<view>
				<view class="audo-video" >
					<!--音频播放按钮处-->
					<view class="audo-top">
						
						<!-- 播放封面 -->
						<image   @click="changeShow" style="width: 120rpx; height: 120rpx; margin-top: 0;" :class="['fengImg','fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :src="userInfo.fengImg" mode="aspectFill"></image>	
						<!-- <image v-else  @click="changeShow" style="width: 120rpx; height: 120rpx; margin-top: 0;" :class="['fengImg','fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" src="@/static/icon/fengziIcon.jpg" mode="aspectFill"></image>	 -->
						
						<!-- <u-icon name="arrow-right" color="#61e781" size="28" v-else @click="changeShow"></u-icon> -->
						<!--上一首切换按钮-->	
						
						<!-- <image class="prevMusic" @click="prevMusic" src="/static/xys.png" 
							mode="aspectFill"></image> -->						
						<!-- <image v-else style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image> -->
						<!--上一首切换按钮-->
	
						<!--快退按钮-->
						<!-- <image src="/static/kt.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kt()"></image> -->
						<!--快退按钮-->
	
						<!--播放按钮-->
						<image class="plays" :src="userInfo.playFlag ?'/static/zantigBtn.png':'/static/bofangBtn.png'" mode="aspectFill"
							style="" @click.stop="plays()"></image>
						<!--播放按钮-->
	
						<!--快进按钮-->
						<!-- <image src="/static/kj.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kj()"></image> -->
						<!--快进按钮-->
	
						<!--下一首切换按钮-->
						<!-- <image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
							mode="aspectFill"> </image> -->
						<!-- <image class="nextMusic" style="" src="/static/xys.png" @click="nextMusic"  mode="aspectFill"></image> -->
						<!-- <u-icon name="arrow-right" color="#61e781" size="28" v-if="!showBig" @click="changeShow"></u-icon> -->
						
						
						<!-- 暂时去掉关闭按钮 -->
						<!-- <u-icon name="close" color="#61e781" size="20" style="background-color: #fff;border-radius: 100%;" v-if="!showBig" @click="closePlayer"></u-icon> -->
						
							<!-- 暂时去掉关闭按钮 -->
						
						<!-- 播放目录 -->
						<!-- <image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill"></image> -->
						
					</view>
						
				</view>
			</view>
		</view>
		<view class="h-100"></view>
		<!--占位-->
	</view>
</template>

<script>
	import {
		mapState,mapMutations
	} from 'vuex';
	export default {
		name:"music",
		props:{
			playData:{
				type:Object,
				default:()=>({})
			},			
		},
		data() {
			return {
				showBig:false, // 显示详细模式
				muteBgMusic:true,
				fengImg:'',
				libLIst:[], // 播放目录
				playIndex: 0,// 播放器index
				
			};
		},
		onLoad() {
			this.$music.playBgm({mute:false})				
			
		},
		created() {
			// this.fengImg = this.$music.getCoverImg()
			this.fengImg = this.userInfo.fengImg
			this.libLIst = this.userInfo.myList
		},
		mounted() {
			
		},		
		
		methods:{
			...mapMutations(['setUserInfo']),
			
			closePlayer(){
				// 关闭播放器
				// console.log('点击了关闭按钮')				
				this.$music.setCloseBgm()	 // 关闭音频
				uni.setStorage({
					key: 'playVisible',
					data: false,
					success: function () {
						console.log('success');
					}
				});				
				this.setUserInfo({'playVisible':false})
			},
			changeShow(){
				uni.navigateTo({
					url:'/pages/listen/bigListen'
				})
			//	this.showBig = !this.showBig
			},
			// 上一首
			prevMusic(){
				if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
					this.$music.playBgm({mute:false})
					this.$music.setPlayIndex('next')
				}else{
				this.$music.setPlayIndex('prev')
				}
				
			},
			 
			nextMusic(){ // 下一首
				if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
					this.$music.playBgm({mute:false})
					this.$music.setPlayIndex('next')
				}else{
					this.$music.setPlayIndex('next')
				}
			},			
			
			//关闭或开启 音乐
            plays() {
                this.muteBgMusic = !this.muteBgMusic
                console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');      
                
				if (this.userInfo.playFlag) {
                    // 暂停
                  //  this.$music.playBgm({mute:true})	
					this.$bgm.pause()			
                } else {
                    // 播放
                    // this.$music.playBgm({mute:false})
					if(this.$bgm._options.src == ''){
						this.$music.playBgm({mute:false})
					}else{
						this.$bgm.play()
						}
                }
            },
		},
		computed:{
			...mapState(['userInfo']),
			timer() {
				return calcTimer(this.userInfo.currentTime)
			},
			overTimer() {
				return calcTimer(this.userInfo.duration)
			},
			playStatus(){
				var playFlag = false
				this.userInfo.playFlag !== undefined ? playFlag = this.userInfo.playFlag : ''
				console.log(playFlag,'playFlag')
				return playFlag
			}
		},
		watch:{
			playData(newVal, oldVal){
					console.log(newVal,'组件获取到新值')
					if(newVal.myList.length > 0){
						this.setUserInfo({'playIndex': 0})
					    this.$music.setList(newVal.myList,'autoPlay')
					// this.fengImg = newVal.fengImg
					
					// 本地存储播放列表
					uni.setStorage({
						key: 'playData',
						data: newVal,
						success: function () {
							console.log('success');
						}
					});
					// 系统暂存
					this.setUserInfo({'myList':newVal.myList})
				    
					
					this.libLIst = newVal.myList
					// console.log(newVal.myList,'newVal.myList')					
					uni.showToast({
						title:'添加列表成功',
						icon:'success',
						duration:2000
					})
					}else{
						uni.showToast({
							title:'添加列表失败',
							icon:'error',
							duration:2000
						})
					}
			}
		}
	}
	//时间换算
	function calcTimer(timer) {
		if (timer === 0 || typeof timer !== 'number') {
			return '00:00'
		}
		let mm = Math.floor(timer / 60)
		let ss = Math.floor(timer % 60)
		if (mm < 10) {
			mm = '0' + mm
		}
		if (ss < 10) {
			ss = '0' + ss
		}
		return mm + ':' + ss
	}
</script>

<style lang="scss" scoped>
	
	.fengImg{ border-radius: 100%; background-size: cover; }
	@-webkit-keyframes rotation {	
	   from {
	       -webkit-transform: rotate(0deg);         
	        }	
	 to {
	     -webkit-transform: rotate(360deg);
			}	
		}
	.leveOne{padding: 0 20rpx; }
	.playList{ width: calc(100% - 250rpx); height: 300rpx; overflow-y: scroll;}
	.playList .item{line-height:80rpx; white-space: nowrap;
			overflow-x: hidden; font-size: 38rpx; 
			text-overflow: ellipsis;}
	.playNow{color: #27b386;}
	.flexbox{display: flex; }
		.miniMode{width:160px; padding-left: -20px; border-radius:  100rpx 0 0 100rpx; padding-top: 0rpx; 
		height: 140rpx;  
		border: 1px solid #eee; 
			.closeBtn{border: 1px solid #666; display: inline-block; padding: 3px;}
			.leveOne{display: none;}
			.prevMusic{ display: none;
				width:30rpx;height:30rpx;transform:rotate(180deg)
			}
			.plays{width:50rpx;height:50rpx; margin-left: 0 !important;}
			.nextMusic{width:50rpx;height:50rpx; display: none;}
			}
		
     .fuchuang{position: fixed; padding-right: 10px;  padding-left: 0; bottom:180rpx; right:0; z-index: 888; background-color:rgba(255, 255, 255, 1); }
	.playAnimate{
		-webkit-transform: rotate(360deg);
		animation: rotation 6s linear infinite;
		-moz-animation: rotation 6s linear infinite;
		-webkit-animation: rotation 6s linear infinite;
		-o-animation: rotation 6s linear infinite;		
	}
	.playNow{color: #27b386;}	
	.fengmianBox{text-align: center;  margin-top:50rpx; 
		.times{ }
	 }
	
	.fengmianBox .defaultBg{ width: 100%; margin: 0 auto;border-radius: 200rpx; margin: 0 auto; 
	margin-bottom: 20rpx; background-size: cover; 
	background-repeat: no-repeat; 
	background-image: url('@/static/icon/home_icon_0.png'); 
	}
	
	page {
		background-color: #F6F6F8;
	}

	/* 	#video {
		width: 100%;
	} */
	.audo-video {
		padding-bottom: 20rpx;
		color: #999;
	}

	.slider-box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 27rpx;
		color: #999; margin: 0 auto;
	}

	button {
		display: inline-block;
		width: 100rpx;
		background-color: #fff;
		font-size: 24rpx;
		color: #000;
		padding: 0;
	}

	.hidden {
		position: fixed;
		top: 0;
		left: -10rpx;
		z-index: -1;
		width: 1rpx;
		height: 1rpx;
	}

	.audo-top {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.audo-a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		position: relative;
		z-index: 9; margin: 0 auto;
	}

	.beishu {
		position: relative;
		width: 100rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		text-align: center;
		border-radius: 25rpx;
		font-size: 28rpx;
	}

	.absolute {
		position: absolute;

		.beishu-a {
			width: 200rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 90rpx;
			background: #fff;

			.title {
				pdding-left: 30rpx;
			}
		}
	}
	
</style>
