<template>
	<view class="detail-page">
		<view class="banner">
			<view class="img">
				<image :src="topImg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="topText tn-flex tn-ml-xl">
					<view class="icon tn-mt-sm">
						<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="title tn-ml tn-text-3xl tn-text-bold tn-mt">
						{{config.siteName}}
					</view>
				</view>
			</view>
		</view>
		<view class="detail tn-m-sm tn-p-sm tn-radius tn-shadow">
			<view class="title tn-text-bold tn-text-center tn-text-xl tn-p">
				{{detail.title}}
			</view>
			<view class="info tn-flex tn-flex-center-between tn-pb-xs tn-pl tn-pr tn-gray-dark_text tn-border-bottom tn-grey-disabled_border tn-text-sm">
				<view class="user">
					<TnIcon name="pushpin"/>{{detail.user}}
				</view>
				<view class="time">
					<TnIcon name="time"/>{{detail.createTime}}
				</view>
			</view>
			<view class="content tn-mt tn-text-xl" style="letter-spacing: 2rpx;">
				<mp-html :content="detail.content" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import config from '@/config/config';
	
	const topImg = ref('/static/index_top.jpg')
	
	const id = ref()
	
	const detail = reactive({
		title:'',
		user:'',
		createTime:'',
		content:''
	})
	
	const getDetail = () => {
		let url = '/front/content/detail?id=' + id;
		request({
			url:url,
			method:'GET',
			data:{
				'id':id.value
			}
		}).then(res=>{
			if(res.data.data.image){
				res.data.data.image = JSON.parse(res.data.data.image)
				// topImg.value = res.data.data.image[0]
			}
			Object.assign(detail,res.data.data)
			uni.setNavigationBarTitle({
				title:res.data.data.title
			})
		})
	}
	
	onLoad((option) => {
		id.value = option.id
	})
	
	onMounted(()=>{
		getDetail()
	})
</script>

<style lang="scss" scoped>
	.detail-page{
		min-height: 100vh;
		.banner{
			height: 450rpx;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
				.topText{
					color: #fff;
					position: absolute;
					top: 100rpx;
					left: 0;
					.icon{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.title{
						letter-spacing: 4rpx;
						text-shadow: 6rpx 6rpx 8rpx #5c5c5c;
					}
				}
			}
			::after{
				content: "";
				position: absolute;
				width: 100%;
				height: 120rpx;
				top: 330rpx;
				left: 0;
				background:linear-gradient(180deg,rgba(255, 255, 255, 0.01),rgba(255, 255, 255, 0.9))
			}
		}
		.detail{
			background-color: #fff;
			position: relative;
			top:-130rpx;
			.info{
				border-radius: 0;
			}
		}
	}
</style>