<template>
	<view class="campusstyle">
		<!-- 底图 -->
		<view class="campusstyleItem"></view>
		<!-- 轮播图 -->
		<view class="campusstyleIndex">
			<swiper class="carousel" :indicator-dots="false" interval="3000" duration="500" :autoplay="true" circular
				previous-margin="70px" next-margin="70px" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in newlists" :key="index">
					<view class="carousel-box" :class="[currentIndex == index ? 'active' : 'quiet']">
						<image class="carousel-image" @click="swiperLink(item)"
							:src="item.imageUrl?item.imageUrl:newsImages" mode="scaleToFill" />
						<view class="title-box">
							<view class="top-title font-16 text-color-3 font-weight-600">
								{{ item.title }}
							</view>
							<view class="pub-title font-14 text-color-6">发布时间：{{ item.timestamp }}</view>
							<view class="pub font-14 text-color-6">作者：{{ item.creator }}</view>
							<view class="top-num flex font-14 text-color-6">
								<!-- <view class="chat mr-40">
									<view class="mr-8">
										<image style="width: 100%;height: 100%;" src="../../static/campus/评论.png">
										</image>
									</view>
									<text style="margin-top: -4rpx;">{{ item.remarkCount }}</text>
								</view> -->
								<view class="chat mr-40" @click="newsGiveaList(item)">
									<view class="mr-8">
										<image style="width: 100%;height: 100%;" src="../../static/campus/点赞.png">
										</image>
									</view>
									<text style="margin-top: -4rpx;">{{ item.praiseCount }}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<!-- 校园风采 -->
		<view class="demeanour">
			<view style="color: #333333;font-size: 14px;margin-left: 26rpx;">校园风采</view>
			<scroll-view :scroll-y="showAllPage" upper-threshold="1" :scroll-top="scrolltop" @scroll="scroll"
				@scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" class="demo-scroll-block">
				<view class="demeanourItem" v-for="(items,index) in tabList" :key="items.id">
					<view class="demeanourUrl" @click="onUrlClick(JSON.stringify(items))">
						<image :src='items.imageUrl' :lazy-load="true"></image>
					</view>
					<view class="demeanourUrl2">
						<view style="color: #333333;font-size: 14px;margin-bottom: 10rpx;">
							{{items.title?items.title:"主题活动"}}</view>
						<view style="display: flex;margin-bottom: 10rpx;">
							<view style="width: 30rpx;height: 30rpx;margin-right: 10rpx ;">
								<image style="width: 100%;height: 100%;" src="../../static/campus/作者.png"></image>
							</view>
							<span style="color: #818181;font-size: 12px;">{{items.station}}</span>
						</view>
						<view style="color: #818181;font-size: 12px;">
							{{items.timestamp}}
						</view>
						<view class="commentITem">
							{{items.comment?items.comment:'活动介绍'}}
						</view>

						<view style="display: flex;">
							<!-- <view style="display: flex;margin-right:  50rpx;">
								<view style="width: 30rpx;height: 30rpx;">
									<image style="width: 100%;height: 100%;" src="../../static/campus/评论.png"></image>
								</view>
								<span style="color: #818181;font-size: 12px;">{{item.remarkCount}}</span>
							</view> -->
							<view style="display: flex;">
								<view style="width: 30rpx;height: 30rpx;" @click="heartIcon(JSON.stringify(items))">
									<u-icon :name="iconType?'heart-fill':'heart'" :color="iconType?'red':'#818181'"
										size="32"></u-icon>
								</view>
								<span style="color: #818181;font-size: 12px;">{{items.praiseCount}}</span>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getnewslast,
		getnewslist,
		getnewspraise,
		getschoolpraise
	} from '@/api/login';
	import {
		mapGetters
	} from 'vuex';
	// import schoolgate from '../../static/school/picture.png'
	export default {
		data() {
			return {
				iconType: false,
				scrolltop: 0,
				showAllPage: true,
				newsImages: 'https://www.lonsungsh.com/furongPolice/imgs/furongPolice.png',
				baseURl: 'https://www.lonsungsh.com:8083',
				tabList: [], //校园风采数据
				currentIndex: 0,
				newlists: [], //新闻数据
				limit: 10,
				// pageIndex:1
			}
		},

		onShow() {
			this.getnews()
			this.getnewslistdata()
			// uni.removeStorage({key:'valueList'})
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				userInfo: 'users/getLoginInfo',
			})
		},
		methods: {

			// 下拉刷新
			onPullDownRefresh() {
				this.getnewslistdata()
				// 停止刷新
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			},

			// 跳转评论  现在没用到
			onUrlClick(item) {
				   uni.setStorageSync('valueList',item)	
				// setTimeout(() => {
					uni.navigateTo({
						url: `/pages/publishreview/publishreview?index${item}`,						
					});
					// setTimeout(() => {
					// 	uni.$emit('value', JSON.parse(item))
					// }, 600)
				// }, 2000)
                  // 
			},
			// 轮播图
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			// 跳转外部链接
			swiperLink(e) {
				uni.navigateTo({
					url: `/pages/externallink/externallink?src=${e.docUrl}`,
				});
			},

			// 新闻轮播数据
			getnews() {
				getnewslast({
					brigade: '长沙芙蓉区',
					limit: 5
				}).then((res) => {
					this.newlists = res.data
				})
			},
			// 新闻点赞
			newsGiveaList(item) {
				if (this.userInfo.name) {
					getnewspraise({
						newsId: item.newsId
					}).then((res) => {
						this.newlists.forEach((items) => {
							if (items.newsId == item.newsId) {
								items.praiseCount = ++items.praiseCount
							}
						})
					}).catch(() => {})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					});
				}

			},

			// 滑动内部scroll
			scroll({
				detail: {
					scrolltop
				}
			}) {},
			scrolltolower() {
				console.log(1111);

			},
			scrolltoupper(detail) {},
			// 校园风采列表
			getnewslistdata() {
				getnewslist({
					brigade: '长沙芙蓉区',
					limit: this.limit,
				}).then((res) => {
					res.data.forEach((item) => {
						item.imageUrl = this.baseURl + JSON.parse(item.imageUrls)[0]
					})
					this.tabList = res.data
				})
			},
			// 点赞
			heartIcon(item) {
				let id = JSON.parse(item).newsId
				if (this.userInfo.name) {
					getschoolpraise({
						newsId: id
					}).then((res) => {
						this.tabList.forEach((items) => {
							if (items.newsId == id) {
								items.praiseCount = ++items.praiseCount
							}
						})
					}).catch(() => {})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					});
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.campusstyle {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: relative;
		overflow: hidden;

		.campusstyleItem {
			height: 200rpx;
			background-image: url(../../static/login/banner.png);
			background-repeat: no-repeat;
			background-position: right;
		}

		.demeanour {
			margin-top: 310rpx;
			height: 57%;

			.demeanourItem {
				width: 100%;
				height: 260rpx;
				display: flex;
				padding: 20rpx;
				margin-bottom: 25rpx;

				.demeanourUrl {
					width: 45%;
					height: 254rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}

				.demeanourUrl2 {
					width: 60%;
					height: 260rpx;
					padding-right: 20rpx;

					.commentITem {
						color: #818181;
						font-size: 12px;
						margin-bottom: 5px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						padding-right: 8rpx;
						height: 48px;
					}
				}
			}

			.Loadata {
				font-size: 14px;
				margin-top: 42rpx;
				// color: #e3e3e3;
				text-align: center;
			}

			.demo-scroll-block {
				height: 100%;
			}
		}

	}

	.carousel {
		width: 100%;
		height: 451rpx;
	}

	.campusstyleIndex {
		position: absolute;
		top: 14px;
		left: 19px;
		width: 100%;
		/* box-shadow: 0px 10px 10px -4px #e3e3e3; */
	}

	.carousel .carousel-image {
		width: 89%;
		height: 248rpx;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		vertical-align: middle;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	}

	.carousel-box {
		&.quiet {
			transform: scale(0.86);
			transition: all 0.3s ease-in-out 0s;
		}

		&.active {
			transform: none;
			transition: all 0.3s ease-in-out 0s;
		}
	}

	.title-box {
		/* overflow: hidden; */
		padding-left: 15px;
		// padding-bottom: 15px;
		width: 83.5%;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}

	.swiper-item {
		// padding: 0 10px;
		box-sizing: border-box;
		overflow: inherit;
	}

	.flex {
		display: flex;
	}

	.font-16 {
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		padding-right: 8rpx;

	}

	.font-14 {
		font-size: 12px;
	}

	.font-12 {
		font-size: 12px;
	}

	.font-weight-600 {
		color: #333333;
	}

	.text-color-6 {
		color: #747474;
		margin-top: 8rpx;
	}

	.text-color-3 {
		color: #333;
		height: 75rpx;
	}

	.mr-8 {
		margin-right: 8px;
		width: 30rpx;
		height: 30rpx;
	}

	.mr-40 {
		margin-right: 36rpx;
		display: flex;
		margin-top: 5rpx;
	}
</style>