<template>
	<view>
		<view class="box-1" id="list-box">
			<view class="list-box-hader flex-center">
				<!-- 语音公告 -->
				<image src="https://zxzhdc.zx-xcx.com/dining/musicNote.png" mode="widthFix"></image>
			</view> 
			<view class="talk-list">
				<scroll-view scroll-y="true" :scroll-top="scrollTop" style="max-height: 520rpx;min-height: 200rpx;">
					<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
						<view class="item flex-y-center" :class=" item.type == 1 ? 'push':'pull' ">
							<image :src="item.pic" mode="aspectFill" class="pic"></image>
							<view class="content" @click="play" :data-index='index' :data-play='item.is_check'>
								<image v-if="item.is_check==1" src="/static/home/yuyin1.png" class="play"></image>
								<image v-if="item.is_check==2" src="https://zxzhdc.zx-xcx.com/dining/play.gif" class="play"></image>
							</view>
						</view> 
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="close">
			<gbClose @bindClose="bindClose"/>
		</view>
	</view>
</template>
<script>
	import gbClose from './close.vue';
	import {
		mapState,
	} from 'vuex'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		components: {
			gbClose,
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo', 'audioList', 'setColor']),
		},
		data() {
			return {
				talkList: [],
				// 	content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210414/fd1a9acc5559a9acd78b61e865505933.mp3"
				// 	content: "https://empdouyinv.zx-xcx.com//uploads/admin/admin_thumb/20210414/a7fdd9ecaf0d9c1123f776a0cd61f1d7.mp3"
				// 	content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210419/8ffa29ef0ade32ad1fa9f6ff5670ecf5.mp3"
				// 	content: "https://empdouyinv.zx-xcx.com/uploads/admin/admin_thumb/20210419/2da36448ea5a2c12aeabfad70e9ac7d8.mp3"
				Aindex: 0,
				url: '',
				scrollTop: 0,
				is_off: 1
			}
		},
		watch: {
			// #ifdef MP-WEIXIN 
			audioList: {
				handler(val) {
					if (val.length > 0) {
						this.talkList = val;
						if (this.is_off == 1) {
							this.is_off = 2;
							innerAudioContext.src = this.talkList[0].content;
							innerAudioContext.autoplay = true;
							this.talkList[0].is_check = 2;
						}
					}
				},
				deep: true,
			},
			// #endif
		},

		mounted() {
			// #ifdef MP-ALIPAY
			let val = this.$store.state.audioList;
			if (val.length > 0) {
				this.talkList = val;
				if (this.is_off == 1) {
					this.is_off = 2;
					innerAudioContext.autoplay = true;
					innerAudioContext.src = this.talkList[0].content;
					this.talkList[0].is_check = 2;
				}
			}
			// #endif
		},

		created(e) {

			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});

			innerAudioContext.onError((res) => {
				console.log('错误事件',res);
			});

			innerAudioContext.onEnded(() => {
				// console.log('自然结束');
				this.talkList.forEach((i, v) => {
					i.is_check = 1
				})
				let Aindex = this.Aindex + 1;
				if (Aindex >= this.talkList.length) {
					return
				}
				this.talkList[Aindex].is_check = 2;
				this.scrollTop = Aindex * 60;
				this.url = this.talkList[Aindex].content;
				innerAudioContext.src = this.talkList[Aindex].content;
				this.Aindex = Aindex;
			});

			innerAudioContext.onStop(() => {
				// console.log('停止播放');
			});

			innerAudioContext.onCanplay((res) => {
			});

			innerAudioContext.onPause(() => {
				// console.log('暂停播放');
			});
		},

		methods: {
			// ...mapMutations(['SET_AUDIO']),
			bindClose() {
				// console.log("停止")
				innerAudioContext.stop();
			},

			play(e) {
				let isplay = e.currentTarget.dataset.play,
					index = e.currentTarget.dataset.index;
				this.talkList.forEach((i, v) => {
					i.is_check = 1
				})
				// 2 正在播放,1没有播放
				if (isplay == 2) {
					innerAudioContext.pause();
					this.talkList[index].is_check = 1;
				} else {
					innerAudioContext.src = this.talkList[index].content;
					innerAudioContext.play();
					this.talkList[index].is_check = 2;
				}
				this.Aindex = index;
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
		font-size: 28rpx;
	}

	.play {
		width: 50rpx;
		height: 50rpx;
	}

	.close {
		/* #ifdef MP-WEIXIN */
		margin-top: 30rpx;
		/* #endif */
		
	}

	.box-1 {
		background-color: #F3F3F3;
		width: 600rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.list-box-hader {
		width: 100%;
		color: #FFFFFF;
	}
	
	.list-box-hader image{
	    width: 100%;
		height:100rpx;
	}
	
	.talk-list {
		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;
			margin-bottom: 20rpx;

			.pic {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				position: relative;
				width: 300rpx;
			}

			/* 收到的消息 */
			&.pull {
				.content {
					margin-left: 32rpx;
					background-color: #6E8FFF;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #6E8FFF;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}
		}
	}
</style>
