<template>
	<view class="box">
		<!-- 直播详情 -->
		<view class="sinaTvTitle flex a-center p-32">
			<view class="mr-18">
				<u-avatar :src="sinaTv.url" size="80" shape="square"></u-avatar>
			</view>
			<view class="flex-1">
				<h4>{{sinaTv.title}}</h4>
				<view class="flex j-between a-center font-color font-24">
					<text>开始时间：{{sinaTv.time}}</text>
					<text>{{number}}人观看</text>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#F5F5F5"></u-gap>
		<!-- 老师介绍 -->
		<scroll-view class="parse" scroll-y="true">
			<view class="teacher flex a-center p-32">
				<view class="mr-18">
					<u-avatar :src="sinaTv.url" size="80"></u-avatar>
				</view>
				<view class="flex-1 flex flex-col">
					<h4 class="flex-1">{{teacher.name}}</h4>
					<!-- <view class="flex j-between a-center font-color font-24 flex-1">
					<text class="flex-1 teacher-details">{{teacher.text}}</text>
					<u-icon name="arrow-down"></u-icon>
				</view> -->
					<u-collapse @close="falg = false" @open="falg = true" :border="false">
						<u-collapse-item name="Docs guide">
							<text slot="title" class=" teacher-details">
								{{falg ? "简介：" : "简介：" + teacher.text}}
							</text>
							<text class="">{{teacher.text}}</text>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<u-gap height="8" bgColor="#F5F5F5" textIndent="28"></u-gap>
			<!-- 富文本编辑器 -->
			<view class="p-32">
				<u-empty class="empty" mode="data" text="暂无详情" v-if="content !== ''"></u-empty>
				<u-parse v-else :content="content"></u-parse>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "sinatv",
		data() {
			return {
				falg: false,
				number: 1534,
				sinaTv: {},
				teacher: {},
				content: "",
			}
		},
		created() {
			this.getdetails();
		},
		methods: {
			// 获取直播详情
			getdetails(){
				this.$api.getwatchroombasevo().then(res => {
					if (res.data.code == 200) {
						let data = res.data.data;
						this.sinaTv = {
							title: data.roomName,
							time: data.startPlayTime,
							url: data.coverImage
						};
						this.teacher = {
							url: data.lecturerIntro,
							name: data.lecturerName,
							text: data.lecturerIntro
						};
						this.content = data.content;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.border {
		border: 1px solid grey;
	}

	.font-color {
		color: #777777;
	}

	.font-24 {
		font-size: 24rpx;
	}

	.mr-18 {
		margin-right: 18rpx;
	}

	.p-32 {
		padding: 32rpx;
	}

	.teacher-details {
		width: 534rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		transform: translate(-30rpx);
	}

	.parse {
		height: calc(100vh - 700rpx);
	}
	.empty{
		transform: translate(0,50%);
	}
</style>
