<template>
	<view class="px-3">
		<i-loading v-if="loading" />
		<view class="mt-2 font40 line15">{{newsInfo.title}}</view>
		<view class="bg-hover-light p-2 mt-2  rounded flex align-center justify-between flex-wrap font24">
			<view class="flex align-center">
				<uni-icons type="contact" size="16" color="#cccccc"></uni-icons>
				<text class="font24 text-muted">{{newsInfo.author}}</text>
			</view>
			<view class="flex align-center">
				<uni-icons type="eye" size="16" color="#cccccc"></uni-icons>
				<text class="font24 text-muted">{{newsInfo.view_count}}</text>
			</view>
			<view class="flex align-center">
				<uni-icons type="calendar" size="16" color="#cccccc"></uni-icons>
				<text class="font24 text-muted">{{newsInfo.publish_at}}</text>
			</view>
		</view>
		<view class="mt-2">
			<u-parse :content="content" @preview="preview" @navigate="navigate"></u-parse>
		</view>

	</view>
</template>

<script>
	import { friendlyDate } from '../../common/util';
	import {
		TaAjax
	} from '@/common/ajax'
	export default {
		data() {
			return {
				id: 0,
				content: "",
				newsInfo: {
					title: "",
					from: "",
					source: "",
					publish_at: "",
					view_count: 0,
				},
				loading: true
			}
		},
		onLoad(params) {
			this.id = params.id
			this.loading = true;
			TaAjax.get('/cms/api.article/info', {
				id: this.id
			}).then((response) => {
				const data = response.data;
				this.content = data.content;
				uni.setNavigationBarTitle({
					title: data.title
				});
				data.publish_at = friendlyDate((new Date(data.publish_at.replace(/\-/g, '/')).getTime()))
				this.newsInfo = data;
			}).catch((e) => {
				console.warn(e)
			}).finally(() => {
				this.loading = false;
			})
		},
		methods: {
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
		},
	}
</script>

<style>

</style>