<template>
	<view class="page-container">
		<view class="details-header">
			<!-- <vodImage :src="data.topic_pic"></vodImage> -->
			<image v-if="data.topic_pic" :src="data.topic_pic" mode="aspectFill" @error="errorimg()" />
			<!-- <header-nav ></header-nav> -->
			<view class="details-shadow"></view>
			<text class="details-intro" v-if="data.topic_content">
				{{ data.topic_content }}
			</text>
			<view class="details-container vod-container">
				<vod-item v-for="(vod, index) in data.vod_list" :key="index" :index="index" :type="1" :item="vod" />
			</view>
		</view>
		<u-loading-page :loading="loading" bgColor="none" fontSize="16"></u-loading-page>
	</view>
</template>

<script>
import headerNav from '@/components/home-header-nav.vue';
import vodItem from '@/components/vod-item-row.vue';
import vodImage from '@/components/vod-image.vue';
import { app } from '@/utils/api';

export default {
	components: {
		vodItem,
		headerNav,
		vodImage
	},
	data() {
		return {
			id: 0,
			data: {},
			loading: false
		};
	},
	onLoad(option) {
		if (option.id) {
			this.id = parseInt(option.id);
		}
		this.getData();
	},
	methods: {
		errorimg() {
			this.error(this.data.topic_pic).then((res) => {
				this.data.topic_pic = res;
			});
		},
		async getData() {
			this.loading = true;
			await app
				.topicDetails(this.id)
				.then((res) => {
					if (res.code == 1) {
						this.data = res.data;
						app.updateHits(this.id, 3);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 3000
						});
						setTimeout(() => {
							this.back();
						}, 1500);
					}
				})
				.catch((e) => {
					setTimeout(() => {
						this.back();
					}, 1500);
				});
			this.loading = false;
		}
	}
};
</script>

<style lang="scss">
.page-container {
	background-color: $uni-bg-color;

	.details-header {
		position: relative;
		width: 100%;
		height: 386px;
		.details-shadow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5); /* 黑色蒙版，可根据需要调整透明度 */
		}
		uni-image {
			width: 100%;
			height: 100%;
		}

		.details-intro {
			position: absolute;
			padding: 0 16px;
			left: 0;
			right: 0;
			bottom: 27px;
			color: #fff;
			font-size: 14px;
			line-height: 23px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 10;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.details-container {
		margin-top: -11px;
		padding: 15px 15px;
		border-radius: 8px;
		background: $uni-bg-color;
		position: relative;
	}
}
</style>
