<template>
	<div class="home">
		<div class="home-swiper">
			<el-carousel height="588px" :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>
		<img src="../assets/img/m3.png" class="home-tit">
		<div class="new-wrapper">
			<div class="main-new flex">
				<div class="new-pic" @click="navTo('/newsCenter/redNews/detail?id='+ showNew.id)">
					<img :src="showNew.img">
					<div class="title clamp hand">
						{{showNew.title}}
					</div>
				</div>
				<div class="news">
					<item-title title="红会新闻" :topath="'/newsCenter/redNews'"></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 class="sj"></span>
								{{ item.title }}
							</div>
							<div class="time">{{ item.add_time }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="area-new flex">
				<div class="area-item">
					<item-title title="鄂城区" :topath="'/newsCenter/echeng'"></item-title>
					<div class="item-wrapper">
						<div class="new-item hand" v-for="item in ezqList" :key="item.id" @click="navTo('/newsCenter/echeng/detail?id='+ item.id)">
							<div class="title clamp ">
								<span class="sj"></span>
								{{ item.title }}
							</div>
						</div>
					</div>
				</div>
				<div class="area-item">
					<item-title title="华容区" :topath="'/newsCenter/huarong'"></item-title>
					<div class="item-wrapper">
						<div class="new-item hand" v-for="item in hrqList" :key="item.id" @click="navTo('/newsCenter/huarong/detail?id='+ item.id)">
							<div class="title clamp ">
								<span class="sj"></span>
								{{ item.title }}
							</div>
						</div>
					</div>
				</div>
				<div class="area-item">
					<item-title title="梁子湖区" :topath="'/newsCenter/liangzihu'"></item-title>
					<div class="item-wrapper">
						<div class="new-item hand" v-for="item in lzhqList" :key="item.id" @click="navTo('/newsCenter/liangzihu/detail?id='+ item.id)">
							<div class="title clamp ">
								<span class="sj"></span>
								{{ item.title }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="home-main1 flex">
			<div class="home-join">
				<item-title title="善行参与" :topath="'/join'" isShow="0"></item-title>
				<div class="icon-wrapper">
					<div class="join-main">
						<div class="join-item" v-for="item in miniNavList1" @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 class="join-main" style="padding-top: 15px;">
						<div class="join-item" v-for="item in miniNavList2" @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>
			<div class="home-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" @click="navTo('/publicity/detail?id='+ item.id)">
						<div class="title clamp ">
							<span class="sj"></span>
							{{ item.title }}
						</div>
						<div class="time">{{ item.add_time }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="home-nav flex">
			<img src="../assets/img/z1.png" class="hand" @click="navTo('/help/aid')">
			<img src="../assets/img/z2.png" class="hand" @click="navTo('/help/service')">
			<img src="../assets/img/z3.png" class="hand" @click="navTo('/help/juvenile')">
			<img src="../assets/img/z4.png" class="hand" @click="navTo('/download')">
		</div>
		<div class="home-main2 flex">
			<div class="love-wrapper">
				<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 class="home-pub">
				<item-title title="政策法规" :topath="'/newsCenter/laws'"></item-title>
				<div class="item-wrapper">
					<div class="new-item hand" v-for="item in regulationList" :key="item.id" @click="navTo('/newsCenter/laws/detail?id='+ item.id)">
						<div class="title clamp ">
							<span class="sj"></span>
							{{ item.title }}
						</div>
						<div class="time">{{ item.add_time }}</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.image_input[0]" /></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.synopsis" class="item-a" target="_blank">{{ item.title }}</a>
				</div>
			</div>
		</div>
	</div>
</template>

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

import { loadIndexs, splist, loveList, friendLink , newsList, openList, banner, regulationList, ezqList, hrqList, lzhqList, redshow } from '../request/api.js';
export default {
	components: {
		ItemTitle
	},
	data() {
		return {
			miniNavList1: [
				{
					path: '/join/contribution',
					title: '爱心捐款',
					image: require('@/assets/img/i1.png')
				},
				{
					path: '/join/organDonation',
					title: '器官捐献',
					image: require('@/assets/img/i2.png')
				},
				{
					path: '/join/Hpc',
					title: '造血干细胞捐献',
					image: require('@/assets/img/i3.png')
				},
				{
					path: '/join/rescue',
					title: '救护员登记',
					image: require('@/assets/img/i4.png')
				},
			],
			miniNavList2: [
				{
					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: [],
			spList: [],
			imgList: [],
			friendList: [],
			redNews: [],
			openNews: [],
			regulationList: [],
			moreJxList: [],
			timer: null,
			ezqList: [],
			hrqList: [],
			lzhqList: [],
		};
	},
	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,6)
		},
		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()
		this.getEzqList()
		this.getHrqList()
		this.getLzhqList()
		this.getRedshow()
		this.getFriendsLink()
	},
	methods: {
		navTo(url) {
			this.$router.push(url);
		},
		// getIndex() {
		// 	loadIndexs().then(({ data }) => {
		// 		console.log(data);
		// 		this.friendList = data.friend_link;
		// 		this.imgList = data.picture_list;
		// 		console.log(this.swiperList);
		// 	});
		// },
		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: 8
			}).then(res => {
				console.log(res.data.list,'0000000000')
				obj.redNews = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
			})
		},
		getOpenList() {
			let obj = this
			openList({
				page: 1,
				limit: 7
			}).then(res => {
				console.log(res.data.list,'0000000000++++++++')
				
				obj.openNews = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
			})
		},
		getSwiperList() {
			let obj = this
			banner().then(res => {
				console.log(res.data,'00000000000000000000')
				let list = res.data.list.map( item => {
					return item.image_input[0]
				})
				obj.swiperList= list
				console.log(obj.swiperList,'22222121222222111111111111111')
			})
		},
		getRegulationList() {
			let obj = this
			regulationList({
				page: 1,
				limit: 9
			}).then(res => {
				console.log(res.data.list,'0000000000')
				obj.regulationList = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
			})
		},
		getEzqList() {
			let obj = this
			ezqList({
				page: 1,
				limit: 5
			}).then(res => {
				console.log(res.data.list,'0000000000')
				obj.ezqList = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
			})
		},
		getHrqList() {
			let obj = this
			hrqList({
				page: 1,
				limit: 5
			}).then(res => {
				console.log(res.data.list,'0000000000')
				obj.hrqList = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
			})
		},
		getLzhqList() {
			let obj = this
			lzhqList({
				page: 1,
				limit: 5
			}).then(res => {
				console.log(res.data.list,'0000000000')
				obj.lzhqList = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
			})
		},
		getRedshow() {
			let obj = this
			redshow({
				page: 1,
				limit: 12
			}).then( res => {
				console.log(res,'++++++++++++++++')
				obj.imgList = res.data.list
			})
		},
		getFriendsLink() {
			let obj = this
			friendLink({
				page: 1,
				limit: 20
			}).then( res => {
				console.log(res,'-------------------------')
				obj.friendList = res.data.list
			})
		}
	}
};
</script>

<style lang="scss" spcode>
.home-swiper {
	width: 1202px;
	height: 588px;
	// background: pink;
	margin: -20px auto 0px;
	el-carousel {
		width: 1202px;
		el-carousel-item {
			width: 1202px;
			height: 588px;
		}
	}
	.swiper-img {
		width: 100%;
		height: 100%;
	}
}
.news-wrapper {
	width: 1202px;
	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);
	}
}
.show-live {
	display: block;
	width: 1202px;
	height: 91px;
	margin: 20px auto;
	// background-color: #cbb385;
}
.show-pic {
	width: 1202px;
	// height: 192px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	margin: 24px auto;
	box-sizing: border-box;
	padding: 20px;
	.imgs-wrapper {
		padding: 27px 0px;
		.imgs {
			width: 1160px;
			// height: 124px;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto hidden;
			img {
				width: 186px;
				height: 124px;
				margin-right: 12px;
				&:last-of-type {
					margin-right: 0;
				}
			}
		}
	}
}
.friends {
	width: 1202px;
	// height: 96px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	margin: 24px auto;
	box-sizing: border-box;
	padding: 20px;
	.friend-list-wrapper {
		padding: 26px  0 0px 0;
		display: flex;
		flex-wrap: wrap;
		.friend-item {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #323131;
			margin-right: 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 0px 0 13px;
			color: #666666;
			.new-item {
				display: flex;
				justify-content: space-between;
				height: 39px;
				border-bottom: 1px solid #E5E5E5;
				align-items: center;
				&:last-child{
					border: none;
				}
				&:hover {
					color: red;
					.sj {
						border-left-color: red;
					}
				}
				.sj {
					display: inline-block;
					width: 0;
					height: 0;
					width: 0;
					height: 0;
					border-top: 6px solid transparent;
					border-left: 8px solid #d2d2d2;
					border-bottom: 6px solid transparent;
					margin-right: 5px;
					
				}
				.title {
					width: 400px;
					// height: 14px;
					font-size: 18px;
					font-family: PingFang SC;
					letter-spacing: 1px;
				}
				.time {
					font-size: 18px;
					font-family: PingFang SC;
					font-weight: 500;
				}
			}
		}
		.home-tit {
			margin: 20px 0;
			width: 1202px;
			height: 70px;
		}
		.new-wrapper {
			width: 1202px;
			height: 710px;
			background: #FFFFFF;
			.main-new {
				padding: 18px 20px;
				justify-content: space-between;
				.new-pic {
					width: 525px;
					height: 378px;
					position: relative;
					img {
						width: 525px;
						height: 378px;
					}
					.title {
						width: 485px;
						height: 55px;
						padding-left: 20px;
						padding-right: 20px;
						line-height: 55px;
						font-size: 24px;
						font-family: inpinheiti;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						bottom: 0;
					}
				}
				.news {
					width: 607px;
					height: 378px;
					background: #FFFFFF;
				}
			}
			.area-new {
				padding: 20px;
				justify-content: space-between;
				.area-item {
					width: 372px;
				}
			}
		}
		.home-main1 {
			margin: 20px 0;
			justify-content: space-between;
			.home-join {
				box-sizing: border-box;
				padding: 20px;
				width: 588px;
				height: 379px;
				background: #FFFFFF;

					.join-main {
						padding: 29px 56px 0;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.join-item {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 14px;
							font-size: 14px;
							font-family: PingFang SC;
							font-weight: bold;
							color: #323131;
							line-height: 1;
							.logo {
								width: 84px;
								height: 84px;
								// border: 1px solid #dadada;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								// margin-right: 47px;
								img {
									width: 84px;
									height: 84px;
								}
							}
							.title {
								padding-top: 10px;
							}
						}
					
				}
				
			}
			.home-open {
				box-sizing: border-box;
				padding: 20px;
				width: 592px;
				height: 379px;
				background: #FFFFFF;
				.new-item {
					
				}
			}
		}
		.home-nav {
			justify-content: space-between;
			img {
				width: 296px;
				height: 108px;
				// background: #000000;
				// opacity: 0.34;
			}
		}
		.home-main2 {
			margin: 20px 0;
			justify-content: space-between;
			.love-wrapper {
				width: 590px;
				height: 479px;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 20px;
				.list-title {
					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;
					}
				}
				.list-item {
					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;
					}
				}
			}
			.home-pub {
				box-sizing: border-box;
				padding: 20px;
				width: 592px;
				height: 479px;
				background: #FFFFFF;
			}
		}
		
</style>
