<template>
	<div class="home">
		<div class="home-swiper">
			<el-carousel height="484px" :interval="4000" v-if="swiperList">
				<el-carousel-item v-for="(item, index) in swiperList" :key="index"><el-image :src="item" alt="" class="swiper-img" /></el-carousel-item>
			</el-carousel>
		</div>
		<div class="news-wrapper">
			<div class="new-pic" @click="navTo('/news/detail?id='+ showNew.id)">
				<img :src="showNew.img">
				<div class="title clamp hand">
					{{showNew.title}}
				</div>
			</div>
			<div class="news">
				<item-title title="红会新闻" :topath="'/news'"></item-title>
				<div class="item-wrapper">
					<div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
						<div class="title clamp ">
							<span></span>
							{{ item.title }}
						</div>
						<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="home-body">
			
			<div class="body-left moren">
				<div class="red-new">
					<item-title title="信息公示" :topath="'/publicity'"></item-title>
					<div class="item-wrapper">
						<div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id='+ item.id)">
							<div class="title clamp ">
								<span></span>
								{{ item.title }}
							</div>
							<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</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 regulationList" :key="item.id" @click="navTo('/regulations/detail?id='+item.id)">
							<div class="title clamp">
								<span></span>
								{{ item.title }}
							</div>
							<div class="time">{{ item.release_time?item.release_time:item.add_time | time}}</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>
					<div class="list-title flex">
						<div>捐献时间</div>
						<div>捐献者</div>
						<div>捐献金额</div>
						<div>捐献意向</div>
					</div>
					<div class="list-item flex" v-for="(item, index) in jxList" :key="index">
						<div class="clamp">{{item.time}}</div>
						<div class="clamp">{{item.donate_er}}</div>
						<div class="clamp">{{item.money}}</div>
						<div class="clamp">{{item.intention}}</div>
					</div>
				</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 , newsList, openList, banner, regulationList } 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/i8.png')
				}
			],
			swiperList: [],
			// jxList: [],
			spList: [],
			imgList: [],
			friendList: [],
			redNews: [],
			openNews: [],
			regulationList: [],
			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;
		},
		time(val) {
			let arr = val.split(' ')
			let str = arr[0]
			str = str.replace(/-/g, '.')
			return str
		}
	},
	computed:{
		jxList() {
			return this.moreJxList.slice(0,3)
		},
		showNew() {
			
			let obj =this
			if(obj.redNews[0]){
				let data = {
					id: obj.redNews[0].id,
					img: obj.redNews[0].image_input[0],
					title: obj.redNews[0].title
					
				}
				return data
			}
			
			return {}
		}
	},
	created() {
		this.getSwiperList()
		this.getIndex();
		this.getFirstAidList();
		this.getJxList();
		this.getNewsList()
		this.getOpenList(),
		this.getRegulationList()
	},
	methods: {
		navTo(url) {
			this.$router.push(url);
		},
		getIndex() {
			loadIndexs().then(({ data }) => {
				this.friendList = data.friend_link;
				this.imgList = data.picture_list;
			});
		},
		getFirstAidList() {
			splist({
				page: 1,
				limit: 5
			}).then(({ data }) => {
				this.spList = data.list;
			});
		},
		getJxList() {
			let obj = this;
			let data = {
				page: 1,
				limit: 20
			};
			loveList(data).then(res => {
				obj.moreJxList = res.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)
		},
		getNewsList() {
			let obj = this
			newsList({
				page: 1,
				limit: 9
			}).then(res => {
				obj.redNews = res.data.list
			})
		},
		getOpenList() {
			let obj = this
			openList({
				page: 1,
				limit: 9
			}).then(res => {
				obj.openNews = res.data.list
				// console.log(obj.openNews)
			})
		},
		getSwiperList() {
			let obj = this
			banner().then(res => {
				let list = res.data.list.map( item => {
					return item.image_input[0]
				})
				obj.swiperList= list
			})
		},
		getRegulationList() {
			let obj = this
			regulationList({
				page: 1,
				limit: 6
			}).then(res => {
				obj.regulationList = res.data.list
			})
		}
	}
};
</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%;
	}
}
.news-wrapper {
	width: 1200px;
	display: flex;
	justify-content: space-between;
	margin: 24px auto;
	.new-pic {
		width: 521px;
		height: 344px;
		// background-color: #ffff00;
		position: relative;
		img {
			width: 521px;
			height: 344px;
		}
		.title {
			width: 481px;
			height: 55px;
			padding-left: 20px;
			padding-right: 20px;
			background: #262626;
			opacity: 0.8;
			line-height: 55px;
			font-size: 24px;
			font-family: inpinheiti;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			bottom: 0;
		}
	}
	.news {
		width: 659px;
		height: 344px;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	}
}
.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;
				&:hover {
					span {
						background: red;
					}
					.title {
						color: red;
					}
					.time {
						color: red;
					}
				}
				span {
					display: inline-block;
					width: 8px;
					height: 8px;
					background: #d8d8d8;
					// border-radius: 50%;
					transform: rotate(45deg);
					margin-right: 8px;
					
				}
				.title {
					width: 400px;
					height: 14px;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #101010;
					&:hover {
						color: red;
					}
				}
				.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);
			.list-item {
				display: flex;
				border-bottom: 1px solid #F2F2F2;
				&:last-of-type {
					border-bottom:none;
				}
				div {
					width: 25%;
					height: 55px;
					line-height: 55px;
					text-align: center;
					font-size: 17px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.list-title {
				display: flex;
				padding-top: 6px;
				div {
					width: 25%;;
					font-size: 17px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #BF3333;
					text-align: center;
					line-height: 57px;
					height: 57px;
					border-bottom: 1px solid #F2F2F2;
				}
			}
			.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;
	}
}
.item-wrapper {
			padding: 20px 15px 0 13px;
			
			.new-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 17px;
				&:hover {
					span {
						background: red;
					}
					.title {
						color: red;
					}
					.time {
						color: red;
					}
				}
				span {
					display: inline-block;
					width: 8px;
					height: 8px;
					background: #d8d8d8;
					// border-radius: 50%;
					transform: rotate(45deg);
					margin-right: 8px;
					
				}
				.title {
					width: 400px;
					height: 14px;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #101010;
					// &:hover {
					// 	color: red;
					// }
				}
				.time {
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
</style>
