<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="详情"></el-navbar>
		<el-loading v-model="isLoading" :zoom="true"></el-loading>
		<view class="content">
			<view class="header">
				<view class="title">{{ result.title }}</view>
				<view class="author">
					<text>作者：{{ result.author_name }}</text>
					<text>{{ result.create_time }}</text>
				</view>
			</view>
			
			<view v-if="result.intro.length > 0" class="intor">
				<text>摘要: </text>
				{{ result.intro || "" }}
			</view>
			
			<view class="detail">
				<mp-html :content="result.content" />
			</view>
		</view>
		
	</el-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	let isLoading = ref(true);
	let result = ref({
		id: "",
		author_name: "-",
		title: "",
		intro: "",
		content: "",
		hits: 0,
		create_time: "-"
	});
	
	onLoad(async(option)=>{
		let {code,data} = await uni.$http.get("archives/detail",{ id: option.id });
		if(code){
			result.value = data;
			// #ifdef H5
			uni.setNavigationBarTitle({ title: data.title });
			// #endif
			isLoading.value = false;
		}else{
			navigateTo('pages/public/empty');
		}
	});
	
	
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.content {
		.header {
			border-bottom: 0.0625rem solid #f8f8f8;
			padding: 30rpx 30rpx 0 30rpx;
			.title {
				font-weight: bold;
			}
			.author {
				display: flex;
				flex-direction: row;
				padding: 20rpx 0;
				text {
					font-size: 26rpx;
					&:nth-child(1){
						margin-right: 20rpx;
					}
				}
			}
		}
		.intor {
			margin-top: 20rpx;
			border-radius: 0.375rem;
			background-color: #f7f7f7;
			font-size: 26rpx;
			padding: 20rpx;
			margin: 30rpx 30rpx 0 30rpx;
			text {
				font-weight: bold;
			}
		}
		.detail {
			padding: 30rpx;
		}
	}
</style>