<template>
	<view class="detail-page">
		<TnNavbar fixed bg-color="rgba(255, 255, 255, 0.01)" :bottom-shadow="false" :placeholder="false" />
		<view class="image tn-border-bottom tn-grey-disabled_border" v-if="articleData.image">
			<image :src="articleData.image" mode="aspectFill"></image>
		</view>
		<view class="detail tn-p tn-radius tn-shadow" :style="{'marginTop':!articleData.image?'200rpx':''}">
			<view class="title tn-text-center tn-text-xl tn-text-bold">
				{{articleData.title}}
			</view>
			<view class="info tn-flex tn-flex-center-around tn-pt tn-pb-sm tn-border-bottom tn-grey-disabled_border">
				<view class="origin">
					<TnIcon name="pushpin"></TnIcon>{{articleData.origin}}
				</view>
				<view class="time">
					<TnIcon name="clock"></TnIcon>{{dayjs(articleData.created_at).format('YYYY-MM-DD')}}
				</view>
			</view>
			<view class="summary tn-m tn-p tn-gray-light_bg tn-radius">
				{{articleData.summary}}
			</view>
			<view class="content tn-text-lg tn-pl tn-pr tn-radius">
				<mp-html :content="articleData.content" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import baseUrl from '@/config/config';
	import dayjs from "dayjs";
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import onShare from '@/utils/share';

	const { onShareAppMessage, onShareTimeline } = onShare()

	const shareParam = ref()

	const shareTitle = ref()

	const articleData = reactive({
		title: '',
		image: '',
		depart: '',
		park: '',
		summary: '',
		content: '',
		created_at: '',
		isTop: 0,
		origin: ''
	})

	const getDetail = (id : number) => {
		uni.request({
			url: baseUrl + '/front/article',
			method: "GET",
			data: { id: id },
			success: (res : any) => {
				if (res.data.code === 0) {
					Object.assign(articleData, res.data.data)
					shareParam.value = res.data.data.id
					shareTitle.value = res.data.data.title
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			}
		})
	}

	onShareAppMessage(() => {
		return {
			title: shareTitle.value,
			path: '/pages/report/article/detail/index?id=' + shareParam.value
		}
	})

	onShareTimeline(() => {
		return {
			title: shareTitle.value,
			path: '/pages/report/article/detail/index?id=' + shareParam.value
		}
	})

	onLoad((option) => {
		getDetail(option.id)
	})
</script>

<style lang="scss" scoped>
	.detail-page {
		.image {
			image {
				width: 100%;
				height: 450rpx;
				display: block;
			}
		}

		.detail {
			background-color: #fff;

			.info {
				border-radius: 0;
			}
		}

		.summary {
			color: #666;
		}
	}
</style>