<template>
	<view class="audioPlayback">
		<view class="audioPlayback-bg">
			<image class="audioPlayback-bg-img" :src="info.cover"></image>
		</view>
		<TopNavigation />
		<PaddingTopB>
			<view class="audioPlayback-c audioPlayback-content">
				<view class="audioPlayback-content-1">
					<view class="ItemQ">
						<view class="ItemQ-1">
							<image :src="info.cover"></image>
						</view>
						<view class="ItemQ-2">{{ info.name }}</view>
					</view>
				</view>
				<view class="audioPlayback-content-2">
					<yz-audio
						@ended="ended"
						:autoplay="true" 
						:singer="info.created_user" 
						:epname="info.name" 
						:title="info.name" 
						ref="player1"></yz-audio>
				</view>
			</view>
		</PaddingTopB>
	</view>
</template>

<script>
	import TopNavigation from "./components/TopNavigation/index.vue"
	import PaddingTopB from "@/components/PaddingTopB/index.vue"
	export default {
		components: {
			TopNavigation,
			PaddingTopB
		},
		data() {
			return {
				id: null,
				info: {}
			};
		},
		onLoad({ id }) {
			this.id = id
			this.getData()
		},
		onUnload() {
			console.log('onUnload')
		},
		methods: {
			getData() {
				this.$service.P_get('/course/info', { id: this.id }).then(res => {
					console.log(res.data.data)
					this.info = res.data.data
					this.$nextTick(() => {
						// const bgAudioManager = uni.getBackgroundAudioManager();
						// bgAudioManager.title = '致爱丽丝';
						// bgAudioManager.singer = '暂无'; 
						// bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
						// bgAudioManager.src = 'https://edudev.baoshanjiaoyu.com/code.mp3';
						this.$refs.player1.setSrc(this.info.url)
					})
				})
			},
			ended() {
				
			}
		}
	}
</script>

<style lang="scss">
.audioPlayback{
	
	.ItemQ{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 100rpx;
		.ItemQ-1{
			image{
				height: 390rpx;
				width: 390rpx;
				border-radius: 45rpx;
			}
		}
		.ItemQ-2{
			font-size: 30rpx;
			line-height: 45rpx;
			color: #FFFFFF;
			margin-top: 40rpx;
			text-align: center;
		}
	}
	.audioPlayback-c{
		width: 100%;
	}
	.audioPlayback-bg{
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
		z-index: 0;
		.audioPlayback-bg-img{
			height: 100vh;
			width: 100vh;
			filter: blur(100rpx);
			opacity: 0.1;
		}
	}
	.audioPlayback-content{
		.audioPlayback-content-1{
			padding-top: 150rpx;
		}
		.audioPlayback-content-2{
			padding: 0 50rpx;
			margin-top: 130rpx;
		}
	}
}
</style>