<template>
	<!--音频组件-->
	<view>
		<view class="bgfff">
			<view>
				<view class="audo-video">
					
					<!-- 播放封面 -->					
					<view :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :style="{ backgroundImage: `url(${fengImg})` }"></view>
					<!-- <view v-else :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" style="{ border:1px solid red;backgroundImage: url('@/static/icon/fengziIcon.jpg') }">显示我</view> -->
					
					<!--音频播放按钮处-->
					<view class="audo-top">
						
						<!-- 顺序播放 -->
						<!-- <image v-if="orderPlayBtn"  style="width:50rpx;height:50rpx;" src="/static/orderPlaya.png" mode="aspectFill" @click="orderPlay(false)"></image>
						<image v-else style="width:50rpx;height:50rpx;" src="/static/orderPlay.png" mode="aspectFill" @click="orderPlay(true)"></image>						
						
						<!--上一首切换按钮-->						
						<!-- <image v-if="jian"  @click="sig" src="/static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
							mode="aspectFill"></image>
						<image v-else style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image>-->
						<image class="prevMusic" @click="prevMusic" src="/static/xys.png"  style="width:90rpx;height:90rpx;transform:rotate(180deg)"
							mode="aspectFill"></image>
						<!--上一首切换按钮-->
						<!--播放按钮-->
						<image :src="userInfo.playFlag ?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
							style="width:180rpx;height:180rpx;" @click="plays()"></image>
						<!--播放按钮-->
						<!--下一首切换按钮-->
						<!-- <image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
							mode="aspectFill"> </image>
						<image v-else style="width:50rpx;height:50rpx;" src="/static/xys.png" @click="xig" mode="aspectFill"></image> -->
						<image class="nextMusic" style="width:90rpx;height:90rpx;" src="/static/xys.png" @click="nextMusic"  mode="aspectFill"></image>
						<!-- 播放目录 -->
						<image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="showLib()"></image>
						
					</view>
					<!--音频播放按钮处-->
					<view class="audo-a" style="margin:0 auto;">
						<!--进度条-->
						<view class="slider-box">
							<text class="mm">{{timer}}</text>
							<slider style="width: 370rpx;" @change="sliderChange" @changing="sliderChanging"
								class="audio-slider" block-size="16" :min="0" :max="duration" :value="currentTime"
								activeColor="#2fc348" @touchstart="lock= true" @touchend="lock = false" />
							<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
							<text class="ss" v-else>00.00</text>
						</view>
						<!--进度条-->
					</view>
				</view>
			</view>
			<!-- 播放列表 -->
			<u-popup mode="bottom" :show="LibVisible" :round="10" @close="LibVisible=false" >
					<view class="libTitle">播放列表</view>
					<view class="tanchu playList" style="height:400rpx;overflow-y: scroll;">						
						<scroll-view style="height:400rpx; overflow-y: scroll;" scroll-y="true" 
							<view class="item" v-for="(item,index) in libLIst" :key="index" >
								<view @click="listenOne(item)" :class="userInfo.playIndex == index ? 'playNow' : ''">
									
									<view>{{item.chapter}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
			</u-popup>
		</view>
		<view class="h-100"></view>
		<!--占位-->
	</view>
	<!--音频组件 Author:chenxin-->
</template>

<script>
	/*
	 list      --   音频文件传入 不传无法播放/数组形式
	 Faskms    --   快进秒数 number 默认15秒
	 Slowms	   --   快退秒数 number 默认15秒
	 autoNext  --   是否自动播放下一首
	 autoplays --   进入页面是否自动播放 - 默认false
	 slideYes  --   滑动进度条时是否开启播放 - 默认false
	 switAud   --   切换上下音频是否开启播放 - 默认false
	 BsNav     --   倍数数据传入/数组形式
	 
	 按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
	 目前只测试 微信小程序和H5和APP -- 其他平台未知
	  Author:chenxin  交流vx:cxalq8-24  
	*/
   import {
   	mapState,mapMutations
   } from 'vuex';
	export default {
		name: "cx-audio-play",
		props: {
			list: { //音频数据
				Type: Array,
				default:[]
			},
			
			
		},		
		data() {
			return {
				playIndex: 0,// 播放器index
				LibVisible:false,
				libLIst:[],
				fengUrl:'',
				orderPlayBtn:false,
				shows: false, //倍数弹框
				show: true, //倍数弹框动画默认开启				
				// jia: true, //加-切换图标
				succes: true, //播放按钮
				bsid: '', //倍数默认显示第一个
				bsindex: 2, //倍数默认显示第一个
				num: 0,
				current: 0, //当前选中的索引
				recorPath: '', //音频播放地址
				lock: false, // 锁
				currentTime: 0, //当前进度
				duration: 1, // 总进度
				videoContext: null,
				loading: true, //锁 加载
				audioMannager:null ,// 背景音乐
				saveInterVal:null,
				fengImg:'',
				nofengImg:'../../static/icon/fengziIcon.jpg'
			}
		},
		created() {
				this.libLIst = this.$bgm.musicList
				this.fengImg = this.userInfo.fengImg
				console.log(this.userInfo.fengImg,'this.userInfo.fengImg++++++++++++++')
				this.userInfo.playTimes ? this.setUserInfo({'currentTime': this.userInfo.playTimes}) : ''
				
		},
		
		computed: {
			...mapState(['userInfo']),
			timer() {
				this.currentTime = this.userInfo.currentTime
				return calcTimer(this.userInfo.currentTime)
			},
			overTimer() {
				this.duration = this.userInfo.duration
				return calcTimer(this.userInfo.duration)
			},			
		},
		watch: {

		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 上一首
			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()
						}
			    }
			},
			// 播放单个音频
			listenOne(item){
				if(this.$bgm._options.src == ''){
					this.$music.playBgm({mute:false})
					this.$music.setOneMusic(item)	
				}else{
					this.$music.setOneMusic(item)
				}				
			},
			
			
			// 显示播放列表
			showLib(){				
					this.LibVisible = true				
			},
			

			// 拖动进度条
			sliderChange(data) {


				// console.log(data,'拖动进度条',data)


				
				if(this.$bgm._options.src == ''){ 
					this.$music.playBgm({mute:false})
					// this.$bgm.pause()
				}else{
					this.$bgm.play()
				}
				console.log('拖动',data.detail.value)
				uni.getBackgroundAudioManager().seek(data.detail.value)
				// this.$bgm.seek(data.detail.value) //获取秒数
				
			},

			//拖动中
			sliderChanging(data) {
				this.$bgm.pause()
				this.currentTime = data.detail.value
				//console.log('拖动中',this.currentTime)
			},
	
		},
		watch: {}
	}
	//时间换算
	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>
	.graytitle{color: #999;}
	@-webkit-keyframes rotation {	
	   from {
	       -webkit-transform: rotate(0deg);         
	        }	
	 to {
	     -webkit-transform: rotate(360deg);
			}	
		}	         
	.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;		
	}
	.fengmianBox{text-align: center; width: 400rpx; height: 400rpx; position: relative; border-radius: 400rpx; margin: 0 auto; margin-bottom: 140rpx; background-size: contain;}
	.fengmianBox:after{
		content: ''; display: inline-block; left:0; top:0; z-index: 0;width: 400rpx; height: 400rpx; position: absolute; border-radius: 400rpx; box-shadow: rgba(177, 235, 202, 0.8) 0px 0px 29px 0px;
	}
	.fengmianBox.defaultBg{background-image: url('@/static/icon/home_icon_0.png'); background-size: cover;}
	
	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: 20rpx 40rpx;
		display: flex;
		justify-content: space-around;
		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>
