<template>
  <div class="newslist flex flex-col items-center">
			<div class="w-full h-64 md:h-80 relative">
				<img class="h-full w-full absolute top-0 z-0 object-cover object-center  " src="@/assets/images/newslist/banner.png" alt="">
				<p class="z-0 absolute text-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="font-size: 60px">{{ $t('lang.BNAI') }}</p>
			</div>
			<Spin class="md:w-bodySet" :spinning="isLoading">
			<div class="md:w-bodySet mt-8 mb-12 flex flex-wrap mx-auto justify-start">
				<router-link :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" tag="div" class="news_items border-gray-200 flex py-4 cursor-pointer" v-for="(item, index) in newsLists" :key="index">
					<news-item :news="item"></news-item>
				</router-link>
			</div>
			<Pagination
				class="text-center mb-24"
				:total="total"
				v-model="currentPage"
				:page-size="pageSize"
				@change="handleChange"
			/>
		</Spin>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import NewsItem from '@/components/pc/newsItem.vue';
import { Pagination, Spin } from "ant-design-vue";
import {getNews} from '@/service/api'
export default Vue.extend({
	name: 'newsLists',
	data() {
		return {
			total: 0,
			currentPage: 1,
			pageSize: 10,
			allLists: [],
			newsLists: [],
			isLoading: false
		}
	},
	components: {
		NewsItem,
    Pagination,
		Spin
	},
	methods: {
		handleChange(page: number) {
			this.currentPage = page
			this.getLists()
		},
		getLists() {
			const copy = JSON.parse(JSON.stringify(this.allLists))
			this.newsLists = copy.splice((this.currentPage - 1) * 10, 10)
		},
		getNewsList() {
			const language = window.sessionStorage.getItem('language') || 'zh-CN'
			this.isLoading = true
			getNews(language).then(res => {
				this.allLists = res.rows
				this.allLists.forEach((item: {cover: string}) => {
					item.cover = item.cover.replace(/public.33.cn/g, 'public.yuan.org')
				})
				console.log(this.allLists)
				this.total = this.allLists.length
				this.getLists()
				this.isLoading = false
			}).catch(e => {
				this.isLoading = false
			})
		}
	},
	created() {
		this.getNewsList()
	},
	watch: {
		$route(n, o) {
			// this.currentPage = 1
			if (n.query.lang !== o.query.lang) {
				this.currentPage = 1
			}
			this.getNewsList()
		}
	}
})
</script>

<style>
	.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link {
		
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ant-pagination-item {
		width: 36px;
		line-height: 36px;
	}

	.ant-pagination-item-active {
		background: #2545CB;
	}

	.ant-pagination-item:focus, .ant-pagination-item:hover {
		border-color: #2545CB;
	}

	.ant-pagination-prev:hover .ant-pagination-item-link, .ant-pagination-next:hover .ant-pagination-item-link {
		border-color: #2545CB;
		color: #2545CB;
	}

	.ant-pagination-item:focus a, .ant-pagination-item:hover a {
		color: #2545CB
	}

	.ant-pagination-item-active a {
		color: #fff;
	}

	.ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a {
		color: #fff
	}

	.ant-pagination-item, .ant-pagination-prev, .ant-pagination-next {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		/* border: 1px solid #7C88AD; */
	}

	.ant-pagination-disabled a, .ant-pagination-disabled:hover a, .ant-pagination-disabled:focus a, .ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-disabled:focus .ant-pagination-item-link {
    color: rgba(0, 0, 0, 0.25);
    border-color: #d9d9d9;
    cursor: not-allowed;
	}

	.ant-pagination {
		font-size: 16px;
	}
</style>

<style scoped>
	.newslist {
		padding-top: 70px;
		min-width: 1200px;
		min-height: calc(100vh - 315px);
	}
	.news_items:nth-of-type(odd) {
		margin-right: 93px;
	}
</style>