<template>
	<view class="container">
		<view class="content-card">
			<view class="content-header">
				<view class="title-wrapper">
					<h3 class="content-title">{{content.title}}</h3>
					<text class="content-date">{{ formatTime(content.createdAt, 'YYYY-MM-DD') }}</text>
				</view>
			</view>
			<view class="content-body">
				<u-parse :content="content.content" class="content-text"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import { get, post } from '@/utils/request';
	import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
	import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
	export default {
		components: {
		},
		data() {
			return {
				formatTime,
                IMAGE_BASE_URL,
				Id:null,
				title: '',
				content: {},
				fileList: []
			};
		},
		onLoad(options) {
			if (options && options.Id) { 
				this.Id = options.Id;
			}
		},
		mounted(){this.getNoticesDetail();},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},
			afterRead(event) {
				// 读取完成后的回调函数
				const {
					file
				} = event;
				this.fileList.push(file);
			},
			publish() {
				// 发布逻辑
				console.log('发布:', this.title, this.content, this.fileList);
			},
			// 跳转详情页面
			goPage(page){
				uni.navigateTo({
				  url: `/pages/${page}/index`,
				  // url: '/pages/helpInfo/index', 
				  success: () => {
				    console.log('切换到tabBar页面成功');
				  },
				  fail: (err) => {
				    console.error('切换到tabBar页面失败:', err);
				  }
				});
			},
			async getNoticesDetail(){
				try {
					const res = await get(`/api/v1/apps/home/notices/${this.Id}`);
					if (!res || !res.success) {
						throw new Error('获取详情失败');
					}
					let imgs = res.data.cover;
					if (!imgs.startsWith('http') && !imgs.startsWith('https')) {
						res.data.cover = IMAGE_BASE_URL + imgs;
					};
					this.content = {...res.data};
				} catch (err) {
					console.error('获取详情失败:', err);
				}
				
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg,#c0dbfa  0%, #f0f0f0 100%),
		            linear-gradient(180deg,#fff1eb 0%, rgba(255,250,250,0) 100%);
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	
	.content-card {
		width: 100%;
		max-width: 750rpx;
		background-color: rgba(255, 255, 255, 0.85);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		margin-top: 40rpx;
	}
	
	.content-header {
		background-color: rgba(128, 179, 237, 0.19);
		padding: 24rpx 32rpx;
		border-bottom: 1rpx solid rgba(59, 140, 255, 0.1);
	}
	
	.title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.content-title {
		color: #3B8CFF;
		font-size: 32rpx;
		font-weight: 600;
		flex: 1;
		margin-right: 20rpx;
		line-height: 1.4;
	}
	
	.content-date {
		color: #7D7D7D;
		font-size: 24rpx;
		white-space: nowrap;
	}
	
	.content-body {
		padding: 32rpx;
	}
	
	.content-text {
		color: #7D7D7D;
		font-size: 24rpx;
		line-height: 1.8;
		
		p {
			margin-bottom: 24rpx;
		}
		
		img {
			max-width: 100%;
			border-radius: 12rpx;
			margin: 20rpx 0;
			display: block;
		}
	}
</style>