<template>
	<div class="home">
		<div class="home-swiper">
			<el-carousel height="484px" :interval="4000">
				<el-carousel-item v-for="(item, index) in swiperList" :key="index"><el-image :src="item.pic" alt="" class="swiper-img" lazy/></el-carousel-item>
			</el-carousel>
		</div>
		<div class="home-body">
			<div class="body-left moren">
				<div class="red-new">
					<item-title title="红会新闻" :topath="'/news'"></item-title>
					<div class="item-wrapper">
						<div class="new-item hand" v-for="item in redNews" :key="item.id">
							<div class="title clamp ">
								<span></span>
								{{ item.title }}
							</div>
							<div class="time">{{ item.add_time | getTime }}</div>
						</div>
					</div>
				</div>
				<div class="new-open">
					<item-title title="信息公示" :topath="'/publicity'"></item-title>
					<div class="item-wrapper">
						<div class="new-item hand" v-for="item in openNews" :key="item.id">
							<div class="title clamp">
								<span></span>
								{{ item.title }}
							</div>
							<div class="time">{{ item.add_time | getTime }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="body-right">
				<div class="join">
					<item-title title="善行参与" :topath="'/donation'"></item-title>
					<div class="join-main">
						<div class="join-item" v-for="item in miniNavList" @click="navTo(item.path)" :key="item.title">
							<div class="logo hand"><img :src="item.image" /></div>
							<div class="title hand">{{ item.title }}</div>
						</div>
					</div>
				</div>
				<div class="list">
					<item-title title="爱心榜" :topath="'/loveList'"></item-title>
					<el-table :data="jxList" style="width: 100%">
						<el-table-column prop="time" label="捐献时间"></el-table-column>
						<el-table-column prop="donate_er" label="捐献者"></el-table-column>
						<el-table-column prop="money" label="捐献金额"></el-table-column>
						<el-table-column prop="intention" label="捐献意向"></el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<img src="../assets/img/m2.png" class="show-live" />
		<div class="show-pic">
			<item-title title="图片展示" isShow="2"></item-title>
			<div class="imgs-wrapper">
				<div class="imgs"><img v-for="(item, index) in imgList" :key="item.id" :src="item.picture" /></div>
			</div>
		</div>
		<div class="friends">
			<item-title title="友情链接" isShow="2"></item-title>
			<div class="friend-list-wrapper">
				<div class="friend-item" v-for="item in friendList" :key="item.id">
					<a :href="item.link" class="item-a" target="_blank">{{ item.name }}</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ItemTitle from './homeChild/ItemTitle.vue';

import { loadIndexs, splist, loveList, friendList } from '../request/api.js';
export default {
	components: {
		ItemTitle
	},
	data() {
		return {
			miniNavList: [
				{
					path: '/donation/contribution',
					title: '爱心捐款',
					image: require('@/assets/img/i1.png')
				},
				{
					path: '/donation/organDonation',
					title: '器官捐献',
					image: require('@/assets/img/i2.png')
				},
				{
					path: '/donation/Hpc',
					title: '造血干细胞捐献',
					image: require('@/assets/img/i3.png')
				},
				{
					path: '/join/rescue',
					title: '救护员登记',
					image: require('@/assets/img/i4.png')
				},
				{
					path: '/join/member',
					title: '个人会员登记',
					image: require('@/assets/img/i5.png')
				},
				{
					path: '/join/volunteer',
					title: '志愿者登记',
					image: require('@/assets/img/i6.png')
				},
				{
					path: '/join/train',
					title: '普及培训报名',
					image: require('@/assets/img/i7.png')
				},
				{
					path: '/popularScience/list',
					title: '红会科普',
					image: require('@/assets/img/i7.png')
				}
			],
			swiperList: [],
			// jxList: [],
			spList: [],
			imgList: [],
			friendList: [],
			redNews: [
				{ id: 1, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 2, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 3, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 4, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 5, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 6, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 7, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 8, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 9, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 }
			],
			openNews: [
				{ id: 1, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 2, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 3, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 4, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 5, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
				{ id: 6, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 }
			],
			moreJxList: [],
			timer: null
		};
	},
	filters: {
		getTime(val) {
			let date = new Date(val * 1000);
			let Y = date.getFullYear();
			let M = date.getMonth() +1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			let D = date.getDate() < 10 ? '0' + date.getDay() : date.getDate();
			return Y + '.' + M + '.' + D;
		}
	},
	computed:{
		jxList() {
			return this.moreJxList.slice(0,3)
		}
	},
	created() {
		this.getIndex();
		this.getFirstAidList();
		this.getJxList();
	},
	methods: {
		navTo(url) {
			this.$router.push(url);
		},
		getIndex() {
			loadIndexs().then(({ data }) => {
				console.log(data);
				this.swiperList = data.data.banner;
				this.friendList = data.data.friend_link;
				this.imgList = data.data.picture_list;
				console.log(this.swiperList);
			});
		},
		getFirstAidList() {
			splist({
				page: 1,
				limit: 5
			}).then(({ data }) => {
				this.spList = data.data.list;
			});
		},
		getJxList() {
			let obj = this;
			let data = {
				page: 1,
				limit: 20
			};
			loveList(data).then(res => {
				obj.moreJxList = res.data.data.list.map(item => {
					if (item.intention === '') {
						item.intention = '非定向捐款';
					}
					let date = new Date(item.add_time * 1000);
					let Y = date.getFullYear();
					let M = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1;
					let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
					item.time = Y + '/' + M + '/' + D;
					return item;
				});
				obj.gundong()
			});
		},
		gundong() {
			let obj = this
			obj.timer = setTimeout(()=> {
				obj.moreJxList.push(obj.moreJxList.shift())
				// console.log(obj.moreJxList)
				obj.gundong()
			},2000)
		}
	}
};
</script>

<style lang="scss" spcode>
.home-swiper {
	width: 1200px;
	height: 484px;
	// background: pink;
	margin: -20px auto 24px;
	el-carousel {
		width: 1200px;
		el-carousel-item {
			width: 1200px;
			height: 484px;
		}
	}
	.swiper-img {
		width: 100%;
		height: 100%;
	}
}
.home-body {
	width: 1200px;
	margin: 24px auto;
	display: flex;
	justify-content: space-between;
	.body-left {
		.red-new {
			width: 588px;
			height: 344px;
			background: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			margin-bottom: 24px;
			// padding: 20px 15px 0 13px;
		}
		.new-open {
			// padding: 20px 15px 0 13px;
			width: 588px;
			height: 262px;
			background: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		}
		.item-wrapper {
			padding: 20px 15px 0 13px;
			.new-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 17px;
				span {
					display: inline-block;
					width: 8px;
					height: 8px;
					background: #d8d8d8;
					// border-radius: 50%;
					transform: rotate(45deg);
					margin-right: 8px;
				}
				.title {
					width: 460px;
					height: 14px;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #101010;
				}
				.time {
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
	.body-right {
		.join {
			width: 588px;
			height: 344px;
			background: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			margin-bottom: 24px;
			.join-main {
				padding-left: 46px;
				padding-top: 15px;
				display: flex;
				flex-wrap: wrap;
				.join-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 28px;
					margin-bottom: 14px;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #323131;
					line-height: 1;
					.logo {
						width: 103px;
						height: 103px;
						border: 1px solid #dadada;
						border-radius: 10px;
						display: flex;
						justify-content: center;
						align-items: center;
						img {
							width: 50px;
							height: 50px;
						}
					}
					.title {
						padding-top: 10px;
					}
				}
			}
		}
		.list {
			width: 588px;
			height: 262px;
			background: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			.is-leaf {
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #d82020 !important;
				text-align: center;
				// line-height: 54px;
				height: 54px;
			}
			.el-table__row > td {
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #101010;
				text-align: center;
				height: 55px;
				.cell {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
				}
			}
		}
	}
}
.show-live {
	display: block;
	width: 1200px;
	height: 160px;
	margin: 24px auto;
	// background-color: #cbb385;
}
.show-pic {
	width: 1200px;
	// height: 192px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	margin: 24px auto;
	.imgs-wrapper {
		padding: 14px 12px;
		.imgs {
			width: 1176px;
			// height: 124px;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto hidden;
			img {
				width: 186px;
				height: 124px;
				margin-right: 12px;
			}
		}
	}
}
.friends {
	width: 1200px;
	// height: 96px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	margin: 24px auto;
	.friend-list-wrapper {
		padding: 20px 28px 10px 28px;
		display: flex;
		flex-wrap: wrap;
		.friend-item {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #323131;
			margin-left: 51px;
			margin-bottom: 15px;
			.item-a {
				color: #323131;
			}
		}
	}
}
.el-carousel__button {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.is-active {
	.el-carousel__button {
		background-color: #d82020 !important;
	}
}
</style>
