<template>
  <div class="news_details w-full flex justify-center pt-16">
		<div class="md:w-bodySet flex flex-col">
			<h2 class="my-20 text-4xl text-left text-title-color">{{ details.title }}</h2>
			<div class="flex justify-between mb-4">
				<div class="article_l">
					<p class="text-sm pb-5">- {{ $t('lang.date') }} -</p>
					<strong class="text-4xl leading-snug">{{ day }}</strong>
					<p class="text-sm leading-snug tracking-wider pt-2">{{ month }}月</p>
					<p class="text-sm leading-snug pt-2">{{ year }}</p>
					<p class="text-sm pt-12">- {{ $t('lang.author') }} -</p>
					<p class="text-sm 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 rounded">
						<h4 class="text-18px text-title-color pb-4 text-title-color">{{ $t('lang.newestInfo') }}</h4>
						<div v-for="item in newest" :key="item.id" >
							<router-link tag="p" :to="{path: '/newsDetails', query: { id: item.id }}" 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 rounded">
						<h4 class="text-18px pb-4 text-title-color">{{ $t('lang.nextInfo') }}</h4>
						<div>
							<router-link tag="p" :to="{path: '/newsDetails', query: { id: nextNews.id }}" 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>
		
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getNews, getNewsDetails } from '@/https/api'
export default Vue.extend({
	data() {
		return {
			details: {},
			day: '',
			month: '',
			year: '',
			id: 0,
			newest: [],
			nextNews: {}
		}
	},
	methods: {
		initData() {
			this.details = {}
			this.newest = []
			this.nextNews = {}
		},
		getDetails() {
			const language = window.sessionStorage.getItem('language') || 'zh-CN'
			getNewsDetails(this.id, language).then(res => {
				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]
			})
			
		},
		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
			console.log(this.id)
			this.initData()
			console.log(this.details)
			this.getNewsList()
			this.getDetails()
		}
	}
})
</script>

<style scoped>
	.news_details {
		min-height: calc(100vh - 315px);
	}
	.article_l {
		width: 126px;
		height: 250px;
		flex-shrink: 0;
		border-right: 1px solid #979797;
	}
	.article_r_t {
		width: 327px;
		/* height: 336px; */
		background: #fff;
		padding: 19px 25px 19px 32px;
	}
	.article_r_b {
		width: 327px;
		background: #fff;
		padding: 19px 25px 19px 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>