<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">区块链新闻资讯</p>
		</div>
		<div class="md:w-bodySet mt-32 mb-12 flex flex-wrap w-11/12 md:w-11/12 mx-auto justify-start">
			<router-link :to="{path: '/newsDetails', query: { id: item.id }}" tag="div" class="news_items border-gray-200 flex py-4 md:w-5/12 cursor-pointer py-8" 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"
		/>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import NewsItem from '@/components/newsItem.vue';
import { Pagination } from "ant-design-vue";
import {getNews} from '@/https/api'
export default Vue.extend({
	data() {
		return {
			total: 0,
			currentPage: 1,
			pageSize: 10,
			allLists: [{"id":479,"title":"原链YCC入驻火币HECO链生态","is_top":1,"abstract":"为进一步拓宽YCC的价值边界，建立原链生态协同网络，原链YCC现加强与火币生态合作，将YCC接入火币Heco链生态，正式开启YCC一币多链的生态网络。本次接入Heco链网络不仅加强与火币生态合作，同时借助Heco链应用生态，提高YCC的价值属性，为YCC赋能，如基于Heco去中心化交易所，添加YCC...","cover":"https://public.33.cn/web/storage/upload/20210316/7502995d76b804778630f1cecce79b78.png","published_time":"2021-03-16 10:21"},{"id":471,"title":"2021，秒级公链，万级平行链","is_top":1,"abstract":"2020原链工作围绕主网上线展开，在2020年我们和原链社区一起完成了原链主网的内测、上线、公测等一系列工作，经过开发团队与社区的共同配合，目前原链在技术层面已经具备稳定上线的能力。2020，开发技术总结原链Ycc 经过一年的开发、测试、反馈、调整，基于共识架构的基础上，奠定了主网安全上线的两大基石...","cover":"https://public.33.cn/web/storage/upload/20210218/42c37266d545a116f8a53cb25cc2ddc1.jpeg","published_time":"2021-02-18 16:15"},{"id":182,"title":"关于原链云矿机公告","is_top":0,"abstract":"各位原链YCC社区成员：原链云矿机D型、E型、F型矿机现已经暂停出售，目前在售的为G型矿机（包括G090、G180、G360、GW090）和体验矿机N030。原链将继续为广大社区成员提供优质的服务，如有疑问，请咨询微信客服：kuangfuwu原链YCC运营团队","cover":"https://public.33.cn/web/storage/upload/20181120/3a26587d5bc3ef4f20cb2054d2d8e29e.jpg","published_time":"2018-12-10 16:47"},{"id":177,"title":"关于原链YCC减产公告","is_top":0,"abstract":"关于原链YCC减产公告各位原链YCC社区成员：原链YCC主网开发一直在内测当中，已优化了共识算法，考虑到现今应用市场对高性能公链的需求，原链开发团队正在提升主网性能，出块速度也会有所提升，计划产量是平均每秒15个YCC，缩量到1/4，也就是每年挖矿产量缩减为4.8亿。如有疑问，请咨询微信客服：kua...","cover":"https://public.33.cn/web/storage/upload/20181015/87a5886916828a7ccb67a1025614f770.jpg","published_time":"2018-11-30 20:17"},{"id":158,"title":"原链云矿机新增机型公告","is_top":0,"abstract":"原链云矿机新增机型公告各位社区成员为了提升用户体验，原链云矿机现已新增G090, G180, G360三种机型，特此告知，机型详情请参考以下表格：注：新型矿机G型，无论加入矿池时间早晚，每台矿机挖矿天数都一样，为360,180,90天。如有任何问题，请咨询原链微信客服：kuangfuwu","cover":"https://public.33.cn/web/storage/upload/20181120/3a26587d5bc3ef4f20cb2054d2d8e29e.jpg","published_time":"2018-11-20 18:23"},{"id":132,"title":"原链YCC项目公告—10月","is_top":0,"abstract":"1项目进展共识：● 修复BUG. 进行测试和改进整合：●&nbsp;优化了存储, 修改了程序目录结构, 目前整合完成●&nbsp;解决了内存不足问题.下一步更新进度：●&nbsp;优化共识算法, 能够稳定高效的达成共识.●&nbsp;基本完成原链区块链底层系统的测试工作，已具备开源条件2社区运营动态...","cover":"https://public.33.cn/web/storage/upload/20181109/c31a1fc5787b838990ddf15c78aab6c5.jpg","published_time":"2018-11-09 15:40"},{"id":131,"title":"双十一还是单身狗？不存在的！","is_top":0,"abstract":"双十一又双叒叕要来了但转念一想，币圈的一波洗刷我相信双十一的你已经无力再战&nbsp;好在今年双十一不只某东、某宝我们的上链购平台也即将火热上线在这里就不得不说我们的上链购区块链电商平台的创新。「点击即可查看我们区块链电商平台有多创新」好了好了，抑制自己对平台的不尽赞美之情今天小编带来的活动是给在座...","cover":"https://public.33.cn/web/storage/upload/20181108/36c4c8e5296d214fc7d3a6fefa7123ad.png","published_time":"2018-11-08 18:52"},{"id":125,"title":"双11矿机活动火热来袭，你准备好了吗？","is_top":0,"abstract":"朋友们！双11矿机活动来袭~~~大家可要hold住啦！这波福利惊喜连连，剁手也要购购购的时候到了。不信就往下看！活动时间11月1日-15日活动规则1、活动期间购买原链YCC云矿机E型，即可获得双十一活动矿机11E30一台；购买原链YCC云矿机F型，即可获得双十一活动矿机11F30一台。（活动矿机到期...","cover":"https://public.33.cn/web/storage/upload/20181101/cb88e925e986f5a783fb28c9b899c9ce.png","published_time":"2018-11-01 18:43"},{"id":124,"title":"原链YCC联合币世界|这个币圈锦鲤，你不能再错过咯！！","is_top":0,"abstract":"自从支付宝寻找锦鲤活动开始以来，锦鲤活动可以说是风靡了小编的朋友圈啦。那么，说到这里，不得不把这个好消息告诉大家！原链YCC联合币世界币圈及近百家项目方、交易所、钱包发起了寻找【币圈锦鲤】活动，为大家送来百万独宠大礼包！！等什么呢，快去参加吧！！记得关注原链YCC币世界币圈哦！原链YCC币世界币圈直...","cover":"https://public.33.cn/web/storage/upload/20181023/d2232c4f013677cb8957d22a5e70337b.png","published_time":"2018-10-23 08:43"},{"id":123,"title":"关于原链云矿机推广奖励更新公告","is_top":0,"abstract":"各位原链YCC社区成员：为了提升用户体验，原链云矿机新版本将在下周更新，具体更新时间另作通知，主要调整内容为云矿机的推广奖励（一级及二级）和邀请注册奖（一级及二级）。原链云矿机的推广奖励（一级及二级）和邀请注册奖（一级及二级）现调整为：请各位社区成员周知。如有疑问，请联系原链YCC微信客服：kuan...","cover":"https://public.33.cn/web/storage/upload/20180813/74c5c28f9c387328fcc12f7680cbcf55.png","published_time":"2018-10-16 15:33"},{"id":121,"title":"关于原链YCC全称公告","is_top":0,"abstract":"各位原链YCC社区成员：因收到社区成员反馈，市场出现了其他币种简称为YCC,现原链YCC社区特发此公告：原链YCC全称为 Yuan Chain&nbsp;请各位社区成员认清原链YCC的全称，避免发生不必要的损失,望周知。特提供原链YCC以太坊浏览器截图如有疑问，请联系原链YCC微信客服：kuangf...","cover":"https://public.33.cn/web/storage/upload/20181015/87a5886916828a7ccb67a1025614f770.jpg","published_time":"2018-10-15 16:43"},{"id":120,"title":"原链YCC 9月公告","is_top":0,"abstract":"1项目进展共识：●修改共识委员会选择算法, 减少选择失败的情况, 小于0.1%.●委员会选择失败后, 增加恢复机制, 重新选择.整合：●优化了存储, 修改了崩溃的bug, 目前整合完成.性能:&nbsp;当前测试, 优化性能。原链YCC云矿机更新：●新增Q型矿池●开通实名认证功能●支持经纪商账户登录...","cover":"https://public.33.cn/web/storage/upload/20181015/7f4f3f1ccb229c0400e5305a4d114725.jpg","published_time":"2018-10-15 16:14"},{"id":119,"title":"国庆大狂欢，矿机免费送","is_top":0,"abstract":"活动时间10月1日-15日活动规则1、活动期间参加国庆矿机砍价活动，只要邀请10位好友帮你砍价，就将获得国庆矿机30天收益；2、国庆矿机价值200YCC, 期限30天，即可获得48YCC的收益，如获得国庆矿机后30天内购买D、E、F任意一台矿机即可获得200YCC本金。3、砍价成功后，将账户信息及砍...","cover":"https://public.33.cn/web/storage/upload/20181015/ed03c26d3683fb9dedca5b96d3afd12c.png","published_time":"2018-10-15 16:13"},{"id":108,"title":"原链YCC上线找币交易所","is_top":0,"abstract":"原链YCC上线找币交易所","cover":"https://public.33.cn/web/storage/upload/20180911/cb2e5401994bc480dd266dbefbda7e0a.png","published_time":"2018-09-11 11:30"},{"id":106,"title":"关于原链云矿机更新公告","is_top":0,"abstract":"关于原链云矿机更新公告","cover":"https://public.33.cn/web/storage/upload/20180907/a40350cef9bb320fe5f7e07d7e1bea9c.png","published_time":"2018-09-07 18:15"}],
			newsLists: []
		}
	},
	components: {
		NewsItem,
    Pagination
	},
	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'
			getNews(language).then(res => {
				this.allLists = res.rows
				this.total = this.allLists.length
				this.getLists()
			})
		}
	},
	created() {
		this.getNewsList()
	},
	watch: {
		$route() {
			this.currentPage = 1
			this.getNewsList()
		}
	}
})
</script>

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

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