<template>
  <div class="news_details w-full flex justify-center pt-16">
		<Spin class="w-full flex justify-center" :spinning="isLoading">
			<div class="md:w-bodySet flex flex-col">
				<h2 class="my-20 text-32px text-left text-title-color">{{ details.title }}</h2>
				<div class="flex justify-between mb-4">
					<div class="article_l flex flex-col items-center">
						<p class="text-sm pb-6 text-article-color">- {{ $t('lang.date') }} -</p>
						<!-- <strong class="text-4xl text-title-color font-din" style=" line-height: 42px">{{ day }}</strong> -->
						<strong class="text-4xl text-title-color" style=" line-height: 42px">{{ day }}</strong>
						<p class="text-18px text-title-color leading-snug tracking-wider pt-5">{{ +month }}月</p>
						<p class="text-18px text-title-color leading-snug pt-2">{{ year }}</p>
						<p class="text-sm text-article-color pt-12">- {{ $t('lang.author') }} -</p>
						<p class="text-18px text-article-color pt-4">{{ details.author }}</p>
					</div>
					<div class="article pl-9 text-left" v-html="details.content"></div>
					<div class="article_r ml-4">
						<div class="article_r_t text-left mb-4 shadow-details rounded">
							<h4 class="text-18px text-title-color pb-4 text-title-color font-semibold">{{ $t('lang.newestInfo') }}</h4>
							<div v-for="item in newest" :key="item.id" >
								<router-link tag="h4" :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" class="details_link text-title-color text-16px leading-normal cursor-pointer mb-1">{{ item.title }}</router-link>
								<p class="text-text-color text-14px leading-normal pb-5">{{ item.published_time }}</p>
							</div>
							<div class="flex justify-center">
								<router-link to="/newsList" tag="div" class="more-btn">{{ $t('lang.morecontent') }}</router-link>
							</div>
						</div>
						<div class="article_r_b text-left h-auto shadow-details rounded">
							<h4 class="text-18px pb-4 text-title-color font-semibold">{{ $t('lang.nextInfo') }}</h4>
							<div>
								<router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id, lang: $route.query.lang }}" class="details_link text-16px text-title-color leading-normal cursor-pointer mb-1">{{ nextNews.title }}</router-link>
								<p class="text-text-color text-14px leading-normal pb-2">{{ nextNews.published_time }}</p>
								<p class="line-clamp-2 text-14px text-article-color">{{ nextNews.abstract }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Spin>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getNews, getNewsDetails } from '@/service/api'
import { Spin } from "ant-design-vue"
export default Vue.extend({
	name: 'newsDetails',
	data() {
		return {
			isLoading: true,
			details: {},
			day: '',
			month: '',
			year: '',
			id: 0,
			newest: [],
			nextNews: {}
		}
	},
	components: {
		Spin
	},
	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 {
		min-height: calc(100vh - 315px);
	}
	.article_l {
		width: 126px;
		height: 270px;
		flex-shrink: 0;
		position: relative;
		/* border-right: 1px solid #979797; */
	}
	.article_l::after {
		content: '';
    height: 540px; 
    width: 1px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #7C88AD;
    border: 0px solid transparent;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
	}
	.article_r_t {
		width: 327px;
		/* height: 336px; */
		background: #fff;
		padding: 19px 25px 19px 32px;
	}
	.article_r_b {
		width: 327px;
		background: #fff;
		padding: 19px 25px 42px 32px;
	}
	.more-btn {
		width: 148px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #2545CB;
		color: #fff;
		font-size: 16px;
		border-radius: 40px;
		cursor: pointer;
	}
	.details_link:hover {
		text-decoration: underline;
	}
</style>