<template>
	<view>
		<view class="fui-audio style1" :style="{background:value.background}" v-if="value.type == 'style-2'">
			<view class="content" style="padding-top: 20rpx;">
				<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
				<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}----{{value.id}}</view>
			</view>
			<view class="progress">
				<view class="progressBar" :style="{width:audiowidth}"></view>
			</view>
			<view class="time" :style="{color:value.timecolor}">
			{{audiotime}}
			</view>
			<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'" style="padding-top: 18rpx"></view>
		</view>
		<view class="fui-audio style3" :style="{background:value.background}" v-else>
		<!-- 	<audio src="/static/audio/bgm.mp3" controls loop></audio> -->
			<view class="img">
				<image :src="$util.img(value.imageUrl)"></image>
			</view>
			<view class="content">
				<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
				<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}</view>
			</view>
			<view class="progress">
				<view class="progressBar" :style="{width:audiowidth}"></view>
			</view>
			<view class="time" :style="{color:value.timecolor}">
			<!-- {{audios[value.id].audiotime}} -->
			{{audiotime}}
			</view>
			<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'"></view>
		</view>
	</view>
</template>

<script>
	// 视频
	export default {
		name: 'diy-audio',
		props: {
			value: {
				type: Object
			}
		},
		data() {
			return {
				audiosObj:[],
				audios: {},
				audioContext:null,
				audiotime:'00:01',
				audiowidth:0,
				status:0,//1播放0停止
			};
		},
		created() {
			// console.log(this.value)
			this.audios[this.value.id] = {
				audiotime:'00:01',
				audiowidth:0
			}
		},
		watch: {
			// 组件刷新监听
			componentRefresh: function(nval) {}
		},
		computed: {
			videoWarpCss: function() {
				var obj = '';
				if (this.value.componentAngle == 'round') {
					obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
					obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
					obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
					obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				}
				return obj;
			}
		},
		methods: {
			
			play(){
				
				var t = this.value.id, a = this.audiosObj[t] || !1;
				var e = {
					audio:this.$util.img(this.value.audioUrl),
				}
				if (!a) {
					a = uni.createInnerAudioContext("audio_" + t);
					var i = this.audiosObj;
					i[t] = a, this.audiosObj = i
					// uni.setStorageSync('audio_list',audio_list)
					var audio_list = uni.getStorageSync('audio_list')?uni.getStorageSync('audio_list'):[]
					if(audio_list.includes(t) == false){
						audio_list.push(t)
						uni.setStorageSync('audio_list',audio_list)
					}
				}
				console.log(uni.getStorageSync('audio_list'))
				var n = this;
				// console.log(a)
				a.onPlay(function() {
					var e = setInterval(function() {
						var i = a.currentTime / a.duration * 100 + "%", s = Math.floor(Math.ceil(a.currentTime) / 60), o = (Math.ceil(a.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(a.currentTime);
						s < 10 && (s = "0" + s);
						var u = s + ":" + o, c = n.audios;
						// console.log(i)
						c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r, n.audios = c;
					}, 1e3);
				});
			
				var s = n.$util.img(n.value.audioUrl), o = n.audios[n.value.id].seconds || 0, r = 0, u = 1;
				0 == u && a.onEnded(function(e) {
					c[t].status = !1,n.status=!1,c[t].seconds = 0,console.log(c),n.audios = c;
				});
				var c = n.audios;
				c[t] || (c[t] = {}), a.paused && 0 == o ? (a.src = s, a.play(), 1 == u && (a.loop = !0), 
				c[t].status = !0,n.status=!0, n.pauseOther(t)) : a.paused && o > 0 ? (a.play(), 0 == r ? a.seek(o) : a.seek(0), 
				c[t].status = !0,n.status=!0, n.pauseOther(t)) : (a.pause(), c[t].status = !1,n.status=!1),n.audios = c;
				console.log(n.audios)
			},
			pauseOther: function(e) {
				var t = this;
				 // console.log(this.audiosObj[this.value.id]);
				 var i = this.audiosObj[this.value.id],a = this.value.id
				 // console.log(i)
				 // console.log(a)
				 // if (a != e) {
					// i.pause();
					// var n = t.audios;
					// n[a] && (n[a].status = !1, this.audios=n); 
				 // }
				var audios = document.getElementsByTagName("audio");
				// 暂停函数
				function pauseAll() {
				var self = this;
				[].forEach.call(audios, function (i) {
				// 将audios中其他的audio全部暂停
				i !== self && i.pause();
				})
				}
				// 给play事件绑定暂停函数
				[].forEach.call(audios, function (i) {
				i.addEventListener("play", pauseAll.bind(i));
				})
				
				
				// var audio_list = uni.getStorageSync('audio_list')
				//  audio_list.forEach(function(value, index) {
				//    	if (value != e) {
				// 		console.log(e)
				// 	   uni.createInnerAudioContext("audio_" + value).pause();
				//    }
				// });
			
				// this.audiosObj.forEach(function(value, index) {
				//    console.log(value);
				// });
				// this.each(this.audiosObj, function(a, i) {
				// 	if (a != e) {
				// 		i.pause();
				// 		var n = t.data.audios;
				// 		n[a] && (n[a].status = !1, t.setData({
				// 			audios: n
				// 		}));
				// 	}
				// });
			},
			
		
			play_bak(){
				
				var t = this.value.id
				this.audioContext = uni.createInnerAudioContext("audio_" + this.value.id);
				this.audioContext.src = this.$util.img(this.value.audioUrl);
				var that = this
				if(this.status == 1){
					this.audioContext.pause();
					this.status = 0
					return false
				}  
				this.audioContext.play();
				this.status = 1
				 this.audioContext.onCanplay(function(s){
					var e = setInterval(function() {
						var i = parseFloat(that.audioContext.currentTime) / parseFloat(that.audioContext.duration) * 100 + "%", s = Math.floor(Math.ceil(that.audioContext.currentTime) / 60), o = (Math.ceil(that.audioContext.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(that.audioContext.currentTime);
						s < 10 && (s = "0" + s);
						var u = s + ":" + o, c = that.audios;
						c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r
						that.audios = c
						// console.log(c)
						 console.log(that.audios[that.value.id].audiotime)
						 that.audiotime = that.audios[that.value.id].audiotime
						 that.audiowidth = that.audios[that.value.id].audiowidth
						 console.log(i)
						 that.lyg = i
					}, 1e3);
				 });
				
				
				this.audioContext.onEnded(() => {
				  console.log('播放结束');
				  this.status = 0
				});
			}
		}
	};
</script>

<style scoped>
	
	.fui-audio {
	    width: 100%;
	    border: 1rpx solid #eeeeee;
	    padding: 0 30rpx 0 20rpx;
	    box-sizing: border-box;
	    position: relative;
	    overflow: hidden;
	    background: #fff;
	}
	
	.fui-audio .img {
	    width: 100rpx;
	    height: 100rpx;
	    background: #000;
	}
	
	.fui-audio .img image {
	    width: 100%;
	    height: 100%;
	}
	
	.fui-audio .name {
	    font-size: 26rpx;
	    color: #333;
	}
	
	.fui-audio .author {
	    font-size: 26rpx;
	    color: #666;
	}
	
	.fui-audio .time {
	    font-size: 24rpx;
	    color: #999;
	}
	
	.fui-audio .start {
	    border: 0;
	    padding: 0;
	    margin: 0;
	    font-size: 28rpx;
	}
	
	.progressBar {
	    height: 2rpx;
	    width: 0;
	    background: #333;
	}
	
	.fui-audio.style1 {
	    height: 86rpx;
	    line-height: 82rpx;
	}
	
	.fui-audio.style1 .img,.fui-audio.style2 .img {
	    display: none;
	}
	
	.fui-audio.style1 .name,.fui-audio.style2 .name {
	    float: left;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    max-width: 300rpx;
	}
	
	.fui-audio.style1 .author,.fui-audio.style2 .author {
	    float: left;
	    margin-left: 12rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    max-width: 200rpx;
	}
	
	.fui-audio.style1 .time,.fui-audio.style4 .time {
	    display: none;
	}
	
	.fui-audio.style1 .start {
	    position: absolute;
	    top: 0rpx;
	    right: 40rpx;
	    width: 40rpx;
	    height: 40rpx;
	    color: #000;
	}
	
	.fui-audio.style1 .progress {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	}
	
	.fui-audio.style2 {
	    height: 86rpx;
	    line-height: 82rpx;
	}
	
	.fui-audio.style2 .img {
	    display: none;
	}
	
	.fui-audio.style2 .time {
	    position: absolute;
	    top: 0;
	    right: 30rpx;
	}
	
	.fui-audio.style2 .name {
	    margin-left: 70rpx;
	}
	
	.fui-audio.style2 .start {
	    position: absolute;
	    top: 0rpx;
	    left: 30rpx;
	    width: 30rpx;
	    height: 30rpx;
	    color: #000;
	}
	
	.fui-audio.style2 .progress,.fui-audio.style3 .progress {
	    display: none;
	}
	
	.fui-audio.style3 {
	    padding: 8rpx;
	}
	
	.fui-audio.style3 .start {
	    position: absolute;
	    top: 30rpx;
	    left: 28rpx;
	    width: 56rpx;
	    height: 56rpx;
	    color: #fff;
	 /*   border: 2rpx solid #fff; */
	    border-radius: 50%;
	    text-indent: 18rpx;
	    line-height: 56rpx;
	}
	
	.fui-audio.style3 .img,.fui-audio.style4 .img {
	    float: left;
	    margin-right: 20rpx;
	}
	
	.fui-audio.style3 .content {
	    width: 468rpx;
	}
	
	.fui-audio.style3 .content,.fui-audio.style4 .content {
	    float: left;
	    height: 100rpx;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	
	.fui-audio.style3 .content .name {
	    height: 40rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.fui-audio.style3 .content .author {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.fui-audio.style3 .time {
	    position: absolute;
	    top: 40rpx;
	    right: 30rpx;
	}
	
	.fui-audio.style4 {
	    padding: 10rpx;
	}
	
	.fui-audio.style4 .content {
	    padding-bottom: 18rpx;
	    height: 82rpx;
	    width: 500rpx;
	}
	
	.fui-audio.style4 .start {
	    position: absolute;
	    top: 32rpx;
	    right: 30rpx;
	    width: 30rpx;
	    height: 30rpx;
	    color: #000;
	}
	
	.fui-audio.style4 .name {
	    line-height: 1.2;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.fui-audio.style4 .author {
	    line-height: 1.2;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.fui-audio.style4 .progress {
	    background: #f5f5f5;
	    height: 4rpx;
	    position: absolute;
	    bottom: 24rpx;
	    left: 130rpx;
	    right: 30rpx;
	    border-radius: 2rpx;
	    overflow: hidden;
	}
	
	.fui-audio.style4 .progressBar {
	    height: 4rpx;
	}

	

	.diy-audio>>>.uni-video-container {
		background-color: transparent;
	}
</style>