<template>
	<div class="index">
		<div class="headerGrid">
			<div class="swiper">
				<el-carousel :interval="5000" type="card" height="200px" class="swiper-box">
				    <el-carousel-item v-for="(r,index) in rotation" :key="index" class="swiper-box-item">
					    	<img :src="r.image" class="swiper-img" @click="newsTo(0,r)">
					    	<div class="title">
					    		{{ r.title }}
					    	</div>
				    </el-carousel-item>
				  </el-carousel>
			</div>
			<div class="participate">
				<div class="title1">
					我要参与
				</div>
				<div class="list">
					<div class="item" v-for="(n,index) in partakeList" @click="navTo(index)">
						<img :src="n.image" class="iNimg">
						<div class="name">
							{{ n.title }}
						</div>
					</div>
				</div>
			</div>
			<div class="cityNews">
				<div class="title title2">
					市红十字会新闻 <div class="more" @click="urlTo('news')">【查看更多】</div>
				</div>
				<div class="list chooseitem">
					<div class="item" v-for="c in cityNewsList" @click="newsTo(0,c)" :title="c.title">
						<div class="title">
							<div class="spot"></div>
							<div class="nowarp">
								{{ c.title }}
							</div>
						</div>
						<div class="time">
							{{ getDataTime(c)}}
						</div>
					</div>
				</div>
			</div>
			<div class="ranking">
				<div class="title title1">
					爱心滚动榜 <div class="more" @click="urlTo('contribution')">【查看更多】</div>
				</div>
				<div class="listHeader">
					<div class=""> 捐赠时间 </div>
					<div class=""> 捐赠者 </div>
					<div class=""> 捐赠金额 </div>
				</div>
				<slideUpd>
					<div class="list">
						<div class="listTime">
							<div class="item" v-for="r in rankingList">
								{{ getPaytime(r)}}
							</div>
						</div>
						<div class="listName">
							<div class="item nowarp" v-for="r in rankingList" :title="r.contact">
								{{ r.contact || '空' }}
							</div>
						</div>
						<div class="listPrice">
							<div class="item" v-for="r in rankingList">
								{{ r.amount || ''  }}
							</div>
						</div>
					</div>
				</slideUpd>
				
				
			</div>
		</div>
		<div class="boxFlex">
			<div class="box">
				<div class="title title2">
					县市区红十字新闻 <div class="more" @click="urlTo('news',1)">【查看更多】</div>
				</div>
				<div class="list chooseitem">
					<div class="item" v-for="c in countyNewsList" @click="newsTo(1,c)" :title="c.title">
						<div class="title">
							<div class="spot"></div>
							<div class="nowarp">
								{{ c.title }}
							</div>
						</div>
						<div class="time">
							{{ getDataTime(c) }}
						</div>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="title title2">
					公示/公告 <div class="more" @click="urlTo('news',2)">【查看更多】</div>
				</div>
				<div class="list chooseitem">
					<div class="item" v-for="p in publicityList" @click="newsTo(3,p)" :title="p.title">
						<div class="title">
							<div class="spot"></div>
							<div class="nowarp">
								{{ p.title }}
							</div>
						</div>
						<div class="time">
							{{ getDataTime(p) }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="index-img">
			<img src="../assets/img/index-h.png" >
		</div>
		<div class="wallAwechat">
			<div class="wall">
				<div class="title">
					优秀志愿者风采墙
				</div>
				<div class="walllist">
					<div class="wallInput">
						<input type="text" placeholder="输入姓名搜索志愿者" v-model="searchV"/>
						<img src="../assets/img/search.png" class="wallImg" @click="searchbu">
					</div>
					<slideLaR class="slideLaR">
						<div class="item" v-for="(l,index) in wallList" @click="volunteerTo(l.id)">
							<img :src="l.image" >
						</div>
					</slideLaR>
				</div>
			</div>
			<div class="wechat">
				<div class="title">
					微信公众号
				</div>
				<div class="qrcode">
					<div class="header">
						<img src="../assets/img/sm.png" class="scanning">
						<div> 请扫码关注<br>荆门市红十字会<br>官方微信公众号 </div>
					</div>
					<div class="qrcodeImg">
						<img src="../assets/img/qrcode.png" >
					</div>
					
				</div>
			</div>
		</div>
		<div class="links">
			<div class="title title2">
				友情链接
			</div>
			<div class="links-list">
				<div class="links-item" v-for="l in linksList" @click="toRescue(l.url)">
					<img :src="l.img" >
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
import { getTime } from '../utils/utils.js'

import { getArticList,details,getList,getlaveList,getvolunteerList,getSearch } from '../request/api.js'
import slideUpd from '../components/slideUpd.vue'
import slideLaR from '../components/slideLaR.vue'
	export default {
		data() {
			return {
				searchV: '',
				path: this.$route.path,
				partakeList: this.$store.state.partakeList || [],
				rankingList: this.$store.state.rankingList || [],
				cityNewsList: this.$store.state.cityNewsList || [],
				countyNewsList: this.$store.state.countyNewsList || [],
				publicityList: this.$store.state.publicityList || [],
				wallList: this.$store.state.wallList || [],
				
				rotation: this.$store.state.rotation || [],
				linksList: [
					{
						img: require('@/assets/img/yq1.png'),
						url: 'https://www.redcross.org.cn/'
					},
					{
						img: require('@/assets/img/yq2.png'),
						url: 'http://www.hbsredcross.org.cn/'
					},
					{
						img: require('@/assets/img/yq3.png'),
						url: 'https://www.codac.org.cn/'
					},
					{
						img: require('@/assets/img/yq4.png'),
						url: 'http://www.hbqgjx.com/'
					},
					{
						img: require('@/assets/img/yq5.png'),
						url: 'http://www.hbmdp.org.cn/'
					},
					
				]
			}
		},
		mounted() {
			this.getPartakeList()
			this.getWallList()
			this.getlave()
			this.getNewsList()
			this.getRotation()
		},
		methods: {
			// 首页图展示
			getRotation() {
				getArticList({page:1,limit:3},27).then(({data}) => {
					this.rotation = data.list
					this.$store.commit('setRotation',data.list)
				})
			},
			// 我要参与列表
			getPartakeList() {
				getList({},18).then(({data}) => {
					this.partakeList = data
					this.$store.commit('setPartakeList',data)
				})
			},
			// 优秀志愿者
			getWallList() {
				getArticList({page:1,limit:30},21).then(({data}) => {
					this.wallList = data.list
					this.$store.commit('setWallList',data.list)
				})
			},
			// 爱心榜
			getlave() {
				this.getlaveListson()
			},
			// 爱心榜
			getlaveListson() {
				getlaveList({page:1,limit:10}).then(res => {
					this.rankingList = res.data.data
					this.$store.commit('setRankingList',res.data.data)
				})
			},
			// 新闻
			getNewsList() {
				// 市红十字会新闻
				getArticList({page:1,limit:10},27).then(({data}) => {
					this.cityNewsList = data.list
					this.$store.commit('setCityNewsList',data.list)
				})
				// 县市区红十字新闻
				getArticList({page:1,limit:5},28).then(({data}) => {
					this.countyNewsList = data.list
					this.$store.commit('setCountyNewsList',data.list)
				})
				// 公示/公告
				getArticList({page:1,limit:10},30,29).then(e => {
					const data = e.data.list
					getArticList({page:1,limit:10},29).then(res => {
						const lastData = data.concat(res.data.list)
						this.publicityList = lastData.sort( this.compare( "releasetime"));
						this.$store.commit('setPublicityList',this.publicityList)
					})
				})
				this.toTop()
			},
			//定义一个比较器
			compare( propertyName) {
			    return  function( object1,  object2) {
			        var value1  = object1[propertyName];
			        var value2  = object2[propertyName];
			        if (value2  > value1) {
						return  1;
					} else  if (value2  < value1) {
						return  - 1;
					} else {
						return  0;
					}
			    }
			},
			// 跳转页面
			urlTo(name,navChoose) {
				this.$router.push({
					name: name,
					params:{navChoose: navChoose || 0}
				})
				this.toTop()
			},
			// 跳外部链接
			toRescue(url) {
				window.open(url)
			},
			volunteerTo(id) {
				this.$router.push({
					name: 'volunteer',
					query:{id :id || 0}
				})
				this.toTop()
			},
			// 我要参与中跳转页面
			navTo(index) {
				this.$router.push({
					name: 'partake',
					params:{navChoose :index || 0}
				})
				this.toTop()
			},
			newsTo(navChoose,data) {
				this.$router.push({
					name: 'news',
					params:{navChoose: navChoose || 0,contentId: data.id || 0}
				})
				this.toTop()
			},
			// 返回顶部
			toTop() {
				document.documentElement.scrollTop = 0
				document.body.scrollTop = 0
			},
			image(url) {
				const baseURL = 'http://red.liuniu946.com'
				return baseURL + url
			},
			getTime(time) {
				return getTime(time)
			},
			getDataTime(data) {
				if (data.releasetime != '') {
					return data.releasetime.substr(0,10)
				}else {
					return this.getTime(data.createtime)
				}
			},
			getPaytime(data) {
				return this.getTime(data.paytime)
			},
			searchbu() {
				this.$router.push({
					name: 'vList',
					query: {value: this.searchV}
				})
				this.toTop()
			}
		},
		components: {
			slideLaR,
			slideUpd
		}
		
	}
</script>

<style lang="scss" scoped>
	$pink: #d8272a;
	.index {
		$red: #D82020;
		.title1 {
			text-align: center;
			background-color: $red;
			color: #fff;
			height: 30px;
			line-height: 30px;
		}
		.title2 {
			background-color: $red;
			color: #fff;
			width: 150px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			font-size: 14px;
		}
		.headerGrid {
			width: 100%;
		    display: grid;
		    grid-template-columns: 3fr 2fr;
		    grid-template-rows: auto 300px;
			.swiper {
				position: relative;
				background-color: #fff;
				margin-right: 10px;
				height: 420px;
				overflow: hidden;
				.swiper-box {
					margin: 0 -270px;
					width: calc(100% + 430px);
					height: 420px;
					.swiper-box-item {
						width: calc(100% + 410px);
						height: 420px;
						.swiper-img {
							// margin-left:auto;
							display:table-cell;
							vertical-align:middle;
							height: 100%;
							min-width: 650px;
						}
					}
				}
				.title {
					width: 100%;
					padding: 10px 30px;
					position: absolute;
					background-color: rgba(0,0,0,0.6);
					color: #fff;
					bottom: 0;
				}
			}
			.participate {
				box-shadow: 1px 1px 6px #e1e1e1;
				flex: 2;
				text-align: center;
				.title {
					
				}
				.list {
					background-color: #fff;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					font-size: 12px;
					color: #323131;
					padding: 20px 0;
					.item {
						min-width: 30%;
						margin: 5px 1%;
						.iNimg {
							width: 85px;
							margin: 5px;
						}
					}
					
				}
			}
			.cityNews {
				box-shadow: 1px 1px 6px #e1e1e1;
				overflow: hidden;
				border-top: solid 3px $red;
				margin-right: 10px;
				position: relative;
				.title {
					.more {
						color: #666666;
						height: 28px;
						position: absolute;
						top: 0;
						right: 5px;
						font-size: 11px;
					}
				}
				.list {
					.item {
						padding: 5px 0;
						display: flex;
						justify-content: space-between;
						font-size: 14px;
						overflow: hidden;
						height: 28px;
						line-height: 28px;
						.title {
							display: flex;
							line-height: 25px;
							margin-right: 5px;
							.nowarp {
								max-width: 400px;
							}
							.spot {
								width: 5px;
								height: 5px;
								border-radius: 50%;
								margin: auto 8px;
							}
						}
						.time {
							padding: 0 10px;
						}
					}
				}
			}
			.ranking {
				box-shadow: 1px 1px 6px #e1e1e1;
				min-height: 100px;
				overflow: hidden;
				position: relative;
				width: 100%;
				font-size: 14px;
				.title {
					.more {
						height: 30px;
						position: absolute;
						top: 0;
						right: 5px;
						font-size: 11px;
					}
				}
				.listHeader {
					display: flex;
					justify-content: space-around;
					text-align: center;
					color: $red;
					font-weight: bold;
					padding: 10px;
					border-bottom: solid 1px #F2F2F2;
					div {
						flex: 1;
					}
				}
				.list {
					display: flex;
					justify-content: space-around;
					text-align: center;
					.listTime,.listName,.listPrice {
						flex: 1;
						.item {
							line-height: 30px;
							height: 30px;
							border-bottom: solid 1px #F2F2F2;
						}
					}
				}
			}
		}
		.boxFlex {
			margin: 20px 0;
			display: flex;
			.box:nth-child(1) {
				margin-right: 10px;
			}
			.box {
				flex: 1;
				position: relative;
				border-top: solid 2px $red;
				height: 300px;
				overflow: hidden;
				box-shadow: 1px 1px 6px #e1e1e1;
				.more {
					height: 28px;
					position: absolute;
					color: #666666;
					top: 0;
					right: 5px;
					font-size: 11px;
				}
				.list {
					.item {
						font-size: 14px;
						padding: 5px 0;
						line-height: 28px;
						height: 28px;
						display: flex;
						justify-content: space-between;
						.title {
								display: flex;
							.nowarp {
								max-width: 350px;
							}
							.spot {
								width: 5px;
								height: 5px;
								border-radius: 50%;
								margin: auto 8px;
							}
						}
					}
					.time {
						padding: 0 10px;
					}
				}
				.list {
				}
			}
		}
		.index-img {
			img {
				width: 100%;
			}
		}
		.wallAwechat {
			margin-top: 20px;
			display: flex;
			.wall {
				box-shadow: 1px 1px 6px #e1e1e1;
				flex: 3;
				border-top: solid 1px $red;
				min-width: 50%;
				margin-right: 10px;
				.title {
					text-align: center;
					background-color: $red;
					color: #fff;
					width: 150px;
					padding: 5px 10px;
				}
				.walllist {
					.wallInput {
						margin : -35px 10px 0 0;
						float: right;
						position: relative;
						input {
							min-width: 180px;
							border-radius: 20px;
							border: solid 1px $red;
							padding: 5px 10px;
							padding-right: 30px;
							height: 15px;
						    outline: none; // 设置点击后无效果
						}
						.wallImg {
							height: 15px;
							position: absolute;
							top: 7px;
							right: 10px;
						}
					}
					.slideLaR {
						margin-top: 20px;
						.item {
							margin: 10px;
							img {
								height: 120px
							}
						}
					}
				}
			}
			.wechat {
				box-shadow: 1px 1px 6px #e1e1e1;
				flex: 1;
				min-width: 250px;
				border-top: solid 1px $red;
				max-width: 50%;
				.title {
					text-align: center;
					background-color: $red;
					color: #fff;
					width: 100px;
					padding: 5px 10px;
				}
				.qrcode {
					text-align: center;
					display: flex;
					justify-content: space-between;
					padding: 10px;
					color: #333333;
					font-size: 14px;
					line-height: 20px;
					.header {
						height: 140px;
						display: grid;
						justify-content: space-around;
						margin: auto ;
					}
					.scanning {
						margin: auto ;
						width: 40px;
						height: 40px;
					}
					.qrcodeImg {
						height: 140px;
						img {
							width: 140px;
							height: calc(100%);
							margin-top: -7px;
						}
						
					}
				}
			}
		}
		.links {
			margin-top: 20px;
			box-shadow: 1px 1px 6px #e1e1e1;
			border-top: solid 1px $red;
			.links-list {
				padding: 10px 20px;
				display: flex;
				justify-content: space-around;
				.links-item {
					margin: 10px;
					img {
						width: 100%;
					}
				}
			}
			
		}
	}
	.chooseitem  {
		color: #333333;
		.spot {
			background-color: #D8D8D8;
		}
	}
	.chooseitem :hover {
		color: $pink;
		.spot {
			background-color: $pink;
		}
	}
</style>
