<template>
  <div class="news_details w-full flex justify-center">
		<Spin class="w-full bg-details-bg" :spinning="isLoading">
			<div class="bg-white">
				<div class="px-5 py-6 mb-3">
					<div class="m-article">
						<h4 class="text-20px text-title-color mb-5 font-semibold">{{ details.title }}</h4>
						<p class="text-xs text-text-color mb-6">
							<span class="inline-block mr-4">{{ details.author }}</span>
							<span class="inline-block">{{ details.published_time }}</span>
						</p>
						<div v-html="details.content"></div>
					</div>
					<div class="next-News py-5 rounded">
						<h4 class="text-16px text-title-color pb-4 flex items-center font-semibold"><i class="m-icon inline-block bg-footer-color mr-2.5"></i>下一篇</h4>
						<router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id, lang: $route.query.lang }}" class="text-14px text-title-color pb-1 px-6">{{ nextNews.title }}</router-link>
						<p class="text-xs text-article-color mb-2 px-6 line-clamp-2">{{ nextNews.abstract }}</p>
						<p class="text-xs text-text-color px-6">{{ nextNews.published_time }}</p>
					</div>
				</div>
			</div>
			<div class="bg-white px-5 pt-3 pb-2">
				<h4 class="text-20px text-article-color font-semibold">最新内容</h4>
				<router-link tag="div" :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" v-for="item in newest" :key="item.id" class="my-6">
					<m-news-item :item="item"></m-news-item>
				</router-link>
			</div>
		</Spin>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getNews, getNewsDetails } from '@/service/api'
import { Spin } from "ant-design-vue"
import MNewsItem from '@/components/mobile/m-newsItem.vue'
export default Vue.extend({
	name: 'newsDetails',
	data() {
		return {
			isLoading: true,
			details: {},
			day: '',
			month: '',
			year: '',
			id: 0,
			newest: [],
			nextNews: {}
		}
	},
	components: {
		Spin,
		MNewsItem
	},
	methods: {
		initData() {
			this.details = {}
			this.newest = []
			this.nextNews = {}
		},
		getDetails() {
			const language = window.sessionStorage.getItem('language') || 'zh-CN'
			this.isLoading = true
			getNewsDetails(this.id, language).then(res => {
				res.content = res.content.replace(/public.33.cn/g, 'public.yuan.org')
				this.details = res
				const { published_time } = res
				const _t = published_time.split(' ')[0]
				this.year = _t.split('-')[0]
				this.month = _t.split('-')[1]
				this.day = _t.split('-')[2]
				this.isLoading = false
			}).catch(e => {
				this.isLoading = false
			})
			
		},
		getNewsList() {
			const language = window.sessionStorage.getItem('language') || 'zh-CN'
			getNews(language).then(res => {
				const lists = res.rows
				this.newest = JSON.parse(JSON.stringify(lists)).splice(0, 3)
				for (let i = 0; i < res.rows.length; i++) {
					if (this.id == res.rows[i].id) {
						this.nextNews = i >= 1 ? res.rows[i-1] : res.rows[res.rows.length - 1]
					}
				}
			})
		}
	},
	created() {
		this.id = +this.$route.query.id
		this.getNewsList()
		this.getDetails()
	},
	watch: {
		$route(n, o) {
			this.id = n.query.id
			this.initData()
			this.getNewsList()
			this.getDetails()
		}
	}
})
</script>

<style scoped>
	.news_details {
		padding-top: 44px;
		min-height: calc(100vh - 156px);
	}
	.m-icon {
		width: 14px;
		height: 22px;
		border-radius: 0 2px 2px 0;
	}
	.next-News {
		/* width: 335px; */
		/* height: 182px; */
		background: #f5f5f7;
	}
</style>