<template>
	<view class="article-detail-index">
		<view class="article-title">{{detail.title}}</view>
		<view class="author-box acea-row row-middle">
			<view class="charge-type">免费</view>
			<view class="add-time">{{detail.addTime}}</view>
			<view>·{{detail.author}}</view>
		</view>
		<view class="d-line"></view>
		<view class="audio-box">
			<luchAudio :src="detail.audio" :play.sync="audioPlay"></luchAudio>
		</view>
		<view class="content-box">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</view>
</template>

<script>
import { getArticleDetails } from '@/api/knowledge';
import luchAudio from '@/components/luch-audio/luch-audio.vue';
export default{
	components: { luchAudio },
	data(){
		return {
			id:8,
			current: {
				poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
				name: '致爱丽丝',
				author: '暂无',
				src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
			},
			audioAction: {
				method: 'pause'
			},
			detail:null,
			audioPlay:true
		}
	},
	created() {
		
		getArticleDetails(this.id).then((res)=>{
			console.log(res)
			if(res.success){
				this.detail = res.data
				var music = null;
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.src= res.data.audio; //选择播放的音频
				music.play(); //执行播放
			}
		})
	},
	mounted() {
		// console.log(this.menuList)
	},
	methods:{
		
	}
}
</script>

<style lang="less" scoped>
.article-detail-index{
	width: 100%;
	box-sizing: border-box;
	padding: 32rpx;
	background: #fff;
	.d-line{
		width: 100%;
		position: absolute;
		height: 1px;
		background: #ECECEC;
		top: 228rpx;
		left: 0;
	}
	.article-title{
		font-size: 40rpx;
		font-weight: 500;
		color: #333333;
		line-height: 56rpx;
	}
	.author-box{
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 0 30rpx;
		// border-bottom: 1px solid #ECECEC;
		.charge-type{
			min-width: 60rpx;
			height: 34rpx;
			line-height: 32rpx;
			color: #6E85EB;
			text-align: center;
			background: #EDEFF8;
			border-radius: 4rpx;
			border: 1px solid #6E85EB;
			padding: 0 6rpx;
			font-size: 22rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
		}
	}
	.audio-box{
		margin: 30rpx 0 40rpx;
		audio{
			width: 100%;
		}
	}
	.content-box{
		width: 100%;
		overflow: hidden;
	}
}
</style>
