<template>
	<!--音频组件-->
	<view>
		<view class="bgfff">
			<view>
				<view class="audo-video">
					<!--音频api处[视频代替音频-实现倍数功能]-->
					<video
						id="myVideo" ref="myVideo" :src="recorPath" class="hidden" @timeupdate="timeupdate"
						:autoplay="autoplays" @loadedmetadata="loadedmetadata" @ended="next" :controls="true"
						:show-center-play-btn="false" :show-mute-btn="true"
					/>
					<!--音频api处[视频代替音频-实现倍数功能]-->

					<!--音频播放按钮处-->
					<view class="audo-top">
						<!--上一首切换按钮-->
						<!-- <image v-if="jian" style="width:50rpx;height:50rpx;" @click="nosig" src="./static/sys.png" mode="aspectFill"></image>
						<image v-else @click="sig" src="./static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
							mode="aspectFill"></image> -->
						<!--上一首切换按钮-->

						<!--快退按钮-->
						<image src="./static/kt.png" style="width:60rpx;height:60rpx;" mode="aspectFill" @click="kt()"></image>
						<!--快退按钮-->

						<!--播放按钮-->
						<image v-if="succes" src="./static/bofang2.png" mode="aspectFill"
							style="width:180rpx;height:180rpx;" @click="plays()"></image>
						<image v-else src="./static/zt.png" mode="aspectFill"
							style="width:180rpx;height:180rpx;" @click="plays()"></image>
						<!--播放按钮-->

						<!--快进按钮-->
						<image src="./static/kj.png" style="width:60rpx;height:60rpx;" 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 v-else style="width:50rpx;height:50rpx;" src="./static/xys.png" @click="xig" mode="aspectFill"></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="#FFA929" />
							<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
							<text class="ss" v-else>00.00</text>
						</view>
						<!--进度条-->


						<!--倍速-->
						<view class="beishu" style="border:3rpx solid #C8C9CC;" @click="beishu">{{BsNav[bsindex].bs}} X
						</view>
						<!--倍速-->

					</view>
				</view>
			</view>
		</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  
	*/
	export default {
		name: "cx-audio-play",
		props: {
			list: { //音频数据
				Type: Array,
				default: () => []
			},
			Faskms: { //快进秒数
				Type: Number,
				default: 15,
			},
			Slowms: { //快退秒数
				Type: Number,
				default: 15,
			},
			autoNext: {
				Type: Boolean,
				default: false,
			},
			autoplays: { //是否开启自动播放
				Type: Boolean,
				default: false,
			},
			slideYes: { //滑动进度条 - 是否开启播放
				Type: Boolean,
				default: false,
			},
			switAud: {
				Type: Boolean, //切换上下音频 - 是否开启播放
				default: false,
			},
			BsNav: { //倍数-传入
				Type: Array,
				default: () => [{
					id: 0.5,
					bs: '0.5',
				}, {
					id: 0.8,
					bs: '0.8'
				}, {
					id: 1.0,
					bs: '1.0'
				}, {
					id: 1.25,
					bs: '1.25'
				}, {
					id: 1.5,
					bs: '1.5'
				}],
			},
		},
		data() {
			return {
				jian: true, //减-切换图标
				jia: true, //加-切换图标
				succes: false, //播放按钮
				bsid: '', //倍数默认显示第一个
				bsindex: 0, //倍数默认显示第一个
				num: 0,
				current: 0, //当前选中的索引
				recorPath: '', //音频播放地址
				lock: false, // 锁
				currentTime: 0, //当前进度
				duration: 100, // 总进度
				videoContext: null,
				loading: true, //锁 加载
			}
		},
		onReady() {},
		onShow() {},
		mounted() {
			this.videoContext = uni.createVideoContext('myVideo', this)
			//默认播放第一个 -- 按钮展示
			if (this.list.length != 0) {
				this.recorPath = this.list[0].recorPath
				if (this.list.length > 1) { //音频文件大于1 -- 下一个切换默认显示
					this.jia = false
				}
				if (this.autoplays) {
					this.succes = true
				}
			}
			//倍数默认处理
			if (this.BsNav.length != 0) {
				const defaultRate = 1.0
				const index = this.BsNav.findIndex(item => item.id === defaultRate)
				if (index !== -1) {
					this.bsid = this.BsNav[index].id
					this.bsindex = index
				} else {
					this.bsid = this.BsNav[0].id
					this.bsindex = 0
				}
				this.$nextTick(() => {
					//#ifdef H5 
					this.$refs.myVideo.playbackRate(this.bsid)
					//#endif
					//#ifndef H5 
					this.videoContext.playbackRate(this.bsid)
					//#endif 
				})
			}
		},
		updated() {

		},
		onLoad() {

		},
		onHide() { //监听页面离开 - 销毁音频 
			//#ifdef H5 
			this.$refs.myVideo.stop();
			//#endif
			//#ifndef H5
			this.videoContext.stop();
			//#endif
		},
		onUnload() { //监听页面卸载 - 销毁音频 
			//#ifdef H5
			this.$refs.myVideo.stop();
			//#endif
			//#ifndef H5
			this.videoContext.stop();
			//#endif
		},
		destroyed() {
			// this.innerAudioContext.stop();
		},
		computed: {
			timer() {
				return calcTimer(this.currentTime)
			},
			overTimer() {
				return calcTimer(this.duration)
			}
		},
		watch: { },
		methods: {
			plays() { //播放暂停
				if (!this.list || this.list.length == 0) {
					console.log('暂无音频数据~')
					return;
				}
				this.playloading()
				this.succes = !this.succes
				if (this.succes) {
					// this.currentTime = 0
					// console.log('-----------------')
					//#ifdef H5 
					this.$refs.myVideo.play()
					//#endif
					//#ifndef H5
					this.videoContext.play()
					//#endif
				} else {
					uni.hideLoading()
					//#ifdef H5
					this.$refs.myVideo.pause()
					//#endif
					//#ifndef H5
					this.videoContext.pause()
					//#endif
				}
			},
			beishu() {
				if (!this.BsNav || this.BsNav.length === 0) {
					return
				}
				let nextIndex = this.bsindex + 1
				if (nextIndex >= this.BsNav.length) {
					nextIndex = 0
				}
				const item = this.BsNav[nextIndex]
				this.bsid = item.id
				this.bsindex = nextIndex
				//#ifdef H5
				this.$refs.myVideo.playbackRate(item.id)
				//#endif
				//#ifndef H5
				this.videoContext.playbackRate(item.id)
				//#endif
			},

			// 更新进度条 
			timeupdate(event) {
				if (this.lock) return; // 锁
				var currentTime, duration;
				if (event.detail.detail) {
					currentTime = event.detail.detail.currentTime
					duration = event.detail.detail.duration
				} else {
					currentTime = event.detail.currentTime
					duration = event.detail.duration
				}
				this.currentTime = currentTime
				this.duration = duration
			},

			// 拖动进度条
			sliderChange(data) {
				const value = data.detail.value
				//此处滑动进度条--开始播放
				if (this.slideYes && !this.succes) {
					//#ifdef H5
					this.$refs.myVideo.play()
					//#endif
					//#ifndef H5
					this.videoContext.play()
					//#endif
					this.succes = true
				}
				//#ifdef H5
				this.$refs.myVideo.seek(value) //获取秒数
				//#endif
				//#ifndef H5
				this.videoContext.seek(value) //获取秒数
				//#endif
				this.currentTime = value
				this.lock = false
			},

			//拖动中
			sliderChanging(data) {
				this.lock = true
				if (data.detail.value == 0) {
					this.succes = false
					//#ifdef H5
					this.$refs.myVideo.pause()
					//#endif
					//#ifndef H5
					this.videoContext.pause()
					//#endif
				}
				this.currentTime = data.detail.value
			},

			// 视频加载完成
			loadedmetadata(data) {
				this.duration = data.detail.duration
			},
			sig() { //上一首
				if (!this.list || this.list.length == 0) {
					console.log('暂无音频数据~')
					return;
				}
				this.num -= 1
				if (this.num < this.list.length) {
					this.loading = true
					this.playloading() //加载框
				}
				if (this.num + 1 < this.list.length && this.num + 1 != 1) { //点击上一首小于音频数据总长度
					this.jia = false // 下按钮-亮且可点击
					this.jian = false // 上按钮-亮且可点击
				} else {
					this.jian = true // 上按钮-灰且阻止
					this.jia = false // 下按钮-亮且可点击
				}
				this.recorPath = this.list[this.num].recorPath
				if (this.switAud) { //切换时是否默认开启播放
					this.succes = true
					setTimeout(() => {
						//#ifdef H5
						this.$refs.myVideo.play()
						//#endif
						//#ifndef H5
						this.videoContext.play()
						//#endif
					}, 100)
				} else {
					this.succes = false
				}
			},
			xig() { //下一首
				if (!this.list || this.list.length == 0) {
					console.log('暂无音频数据~')
					return;
				}
				this.num += 1
				if (this.num < this.list.length) {
					this.loading = true
					this.playloading() //加载框
				}
				if (this.num + 1 < this.list.length) { //点击下一首小于音频数据总长度
					this.jia = false // 下按钮-亮且可点击
					this.jian = false // 上按钮-亮且可点击
				} else { //大于总长度
					this.jia = true //下按钮 - 灰且阻止
					this.jian = false //上按钮 - 亮可点击
				}
				this.recorPath = this.list[this.num].recorPath
				if (this.switAud) { //切换时是否默认开启播放
					this.succes = true
					setTimeout(() => {
						//#ifdef H5
						this.$refs.myVideo.play()
						//#endif
						//#ifndef H5
						this.videoContext.play()
						//#endif
					}, 100)
				} else {
					this.succes = false
				}
			},
			nosig() {
				uni.showToast({
					title: '到头了~',
					icon: "none"
				})
			},
			noxig() {
				uni.showToast({
					title: '没有更多了~',
					icon: "none"
				})
			},
			kt() { //快退
				if (!this.list || this.list.length == 0) {
					console.log('暂无音频数据~')
					return;
				}
				let a = (this.currentTime - Math.floor(15 % 60)).toFixed(0) //当前时间-15秒
				if (a < 1) {
					this.succes = false
					//#ifdef H5
					this.$refs.myVideo.pause()
					//#endif
					//#ifndef H5
					this.videoContext.pause()
					//#endif
				}
				//#ifdef H5
				this.$refs.myVideo.seek(a)
				//#endif
				//#ifndef H5
				this.videoContext.seek(a)
				//#endif
			},
			kj() { //快进
				if (!this.list || this.list.length == 0) {
					console.log('暂无音频数据~')
					return;
				}
				let a = (this.currentTime + Math.floor(15 % 60)).toFixed(0) //当前时间+15秒
				//#ifdef H5
				this.$refs.myVideo.seek(a)
				//#endif
				//#ifndef H5
				this.videoContext.seek(a)
				//#endif
			},
			next(data) { //监听音频结束
				this.succes = false
				/*音频结束--是否自动播放下一首*/
				if (!this.autoNext) {
					return
				}
				if (this.num + 1 < this.list.length) {
					this.succes = true
					this.num += 1
					this.recorPath = this.list[this.num].recorPath
					setTimeout(() => {
						//#ifdef H5
						this.$refs.myVideo.play()
						//#endif
						//#ifndef H5
						this.videoContext.play()
						//#endif
					}, 100)
				} else {
					this.jia = true //下按钮 - 灰且阻止
					this.jian = false //上按钮 - 亮可点击
				}
				// console.log('音频结束-------')
			},
			playloading() { //加载框--封
				if (this.loading) {
					uni.showLoading({
						title: "音频缓存中..."
					})
					this.loading = false
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 1600)
			},
		},
		watch: {}
	}
	function calcTimer(timer) {
		if (typeof timer !== 'number' || !isFinite(timer) || timer <= 0) {
			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>
	/* 	#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;
	}

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

	.video {
		width: 100%;
		height: 400rpx;
		top: 0;
		left: 0;
		position: absolute;
	}

	.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;
		position: relative;

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

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

	.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 {
				padding-left: 30rpx;
			}
		}
	}
</style>
