<template>
	<cl-page :title="'\u6708\u62A5\u8BE6\u60C5'">
		<view v-if="loading" class="flex justify-center items-center py-20">
			<cl-loading />
		</view>

		<view v-else-if="report" class="p-4">
			<!-- header -->
			<view class="mb-6">
				<view class="flex justify-between items-center mb-2">
					<text class="text-2xl font-bold">{{ report.month || '-' }}</text>
				</view>
				<text class="text-sm text-gray-500">{{ report.submitTime ? ('\u63D0\u4EA4\u4E8E ' + formatDateTime(report.submitTime)) : (report.createTime ? ('\u521B\u5EFA\u4E8E ' + formatDateTime(report.createTime)) : '') }}</text>
			</view>

			<!-- content blocks -->
			<view class="mb-6">
				<text class="text-base font-bold mb-3 block">{{ '\u6708\u62A5\u5185\u5BB9' }}</text>
				<view class="p-4 bg-white rounded-lg shadow-sm">
					<text class="text-sm text-gray-800">{{ report.userEditedContent || report.aiFormattedContent || report.originalText || '\u6682\u65E0\u5185\u5BB9' }}</text>
				</view>
			</view>

			<view v-if="report.originalText" class="mb-4">
				<text class="text-base font-bold mb-2">{{ '\u539F\u59CB\u8F93\u5165\u5185\u5BB9' }}</text>
				<view class="p-3 bg-gray-50 rounded">
					<text class="text-sm text-gray-700">{{ report.originalText }}</text>
				</view>
			</view>

			<view v-if="report.aiFormattedContent" class="mb-4">
				<text class="text-base font-bold mb-2">{{ 'AI\u751F\u6210\u5185\u5BB9' }}</text>
				<view class="p-3 bg-blue-50 rounded">
					<text class="text-sm text-gray-800">{{ report.aiFormattedContent }}</text>
				</view>
			</view>
		</view>

		<view v-else class="flex flex-col items-center justify-center py-20">
			<text class="text-6xl mb-4">{{ '\uD83D\uDCC5' }}</text>
			<text class="text-gray-400 text-base">{{ '\u6708\u62A5\u4E0D\u5B58\u5728' }}</text>
			<cl-button type="primary" size="small" class="mt-4" @tap="router.back()">{{ '\u8FD4\u56DE\u5217\u8868' }}</cl-button>
		</view>
	</cl-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { request, router } from '@/cool';
import { useUi } from '@/uni_modules/cool-ui';
import { onLoad } from '@dcloudio/uni-app';

const ui = useUi();
const report = ref<any>(null);
const loading = ref(true);
const reportId = ref('');

onLoad(async (options: any) => {
  reportId.value = (options?.id ?? '').toString();
  if (!reportId.value) {
    ui.showToast({ message: '\u53C2\u6570\u9519\u8BEF\uFF1A\u7F3A\u5C11id', type: 'error' });
    setTimeout(() => router.back(), 700);
    loading.value = false;
    return;
  }
  await loadDetail();
});

async function loadDetail() {
  loading.value = true;
  try {
    const res = await request({ url: '/app/monthlyreport/report/detail', method: 'GET', params: { id: reportId.value } });
    report.value = res || null;
  } catch (e: any) {
    ui.showToast({ message: '\u52A0\u8F7D\u5931\u8D25: ' + (e.message || '\u672A\u77E5\u9519\u8BEF'), type: 'error' });
  } finally {
    loading.value = false;
  }
}

function formatDateTime(v: string) {
  if (!v) return '';
  const d = new Date(v);
  const Y = d.getFullYear();
  const M = String(d.getMonth() + 1).padStart(2, '0');
  const D = String(d.getDate()).padStart(2, '0');
  const h = String(d.getHours()).padStart(2, '0');
  const m = String(d.getMinutes()).padStart(2, '0');
  return `${Y}-${M}-${D} ${h}:${m}`;
}
</script>

<style scoped></style>
