<template>
	<view class="message-detail-page">
		<view v-if="pageLoading" class="message-detail-state">
			<u-loading-icon mode="circle" />
		</view>

		<view v-else-if="pageError" class="message-detail-state">
			<u-empty mode="page" :text="pageError" icon-size="80" />
			<u-button type="primary" text="重试" size="small" custom-style="margin-top:24rpx" @click="loadDetail" />
		</view>

		<scroll-view v-else-if="detail" class="message-detail-scroll" scroll-y>
			<view class="message-detail-card">
				<text class="message-detail-card__title">{{ detail.title }}</text>
				<text class="message-detail-card__time">{{ detail.createTime }}</text>
				<text
					class="message-detail-card__content"
					:class="{ 'message-detail-card__content--reject': detail.isReject }"
				>{{ detail.content }}</text>
			</view>

			<view v-if="detail.showEntryLink" class="message-detail-actions">
				<button class="message-detail-btn" @click="onViewEntry">查看入驻申请</button>
			</view>

			<view v-else-if="detail.linkType && !detail.linkAvailable" class="message-detail-tip">
				<text>关联申请已不存在，正文内容仍可查阅</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getMessageDetail } from '@/api/message'
import { mapMessageDetail } from '@/utils/messageDisplay'
import { goMessageLink } from '@/utils/messageNav'
import { ensureApiToken } from '@/utils/apiAuth'

const messageId = ref('')
const detail = ref(null)
const pageLoading = ref(true)
const pageError = ref('')

async function loadDetail() {
	if (!messageId.value) return
	pageLoading.value = !detail.value
	pageError.value = ''
	try {
		const res = await getMessageDetail(messageId.value)
		detail.value = mapMessageDetail(res.data)
		if (!detail.value) {
			throw new Error('消息数据异常')
		}
	} catch (e) {
		pageError.value = (e && e.message) || '加载失败'
		if (!detail.value) {
			detail.value = null
		}
	} finally {
		pageLoading.value = false
	}
}

function onViewEntry() {
	if (detail.value) {
		goMessageLink(detail.value)
	}
}

onLoad((options) => {
	messageId.value = options.messageId || ''
	if (!messageId.value) {
		pageError.value = '消息信息缺失'
		pageLoading.value = false
	}
})

onShow(() => {
	if (!ensureApiToken(false)) return
	if (!messageId.value) return
	loadDetail()
})
</script>

<style lang="scss" scoped>
.message-detail-page {
	min-height: 100vh;
	background: #f5f6f8;
}
.message-detail-state {
	padding: 120rpx 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.message-detail-scroll {
	height: 100vh;
	padding: 24rpx;
	box-sizing: border-box;
}
.message-detail-card {
	padding: 32rpx 28rpx;
	background: #fff;
	border-radius: 16rpx;
}
.message-detail-card__title {
	display: block;
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	line-height: 1.4;
}
.message-detail-card__time {
	display: block;
	margin-top: 16rpx;
	font-size: 24rpx;
	color: #999;
}
.message-detail-card__content {
	display: block;
	margin-top: 28rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-all;
}
.message-detail-card__content--reject {
	color: #e65100;
}
.message-detail-actions {
	margin-top: 32rpx;
}
.message-detail-btn {
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
	color: #fff;
	font-size: 30rpx;
	border-radius: 44rpx;
	border: none;
}
.message-detail-tip {
	margin-top: 24rpx;
	padding: 20rpx 24rpx;
	font-size: 24rpx;
	color: #999;
	text-align: center;
	background: #fff;
	border-radius: 12rpx;
}
</style>
