<template>
	<view class="campusstyle">
		<!-- 校园风采 -->
		<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>
				<u-loadmore :status="statucolor" fontSize="24" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getnewslists,
		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,
				statucolor: 'loadmore',
				clockintabList:0
				// pageIndex:1
			}
		},

		onShow() {

			this.getnewslistdata()
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				userInfo: 'users/getLoginInfo',
			})
		},
		methods: {

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

			// 跳转评论  现在没用到
			onUrlClick(item) {
				uni.setStorageSync("valueList",item)
				uni.navigateTo({
					url: `/pages/publishreview/publishreview?index${item}`,						
				});

			},
			// 滑动内部scroll
			scroll({
				detail: {
					scrolltop
				}
			}) {},
			
			scrolltolower() {
				this.limit +=5
				setTimeout(() => {
						if (this.tabList.length < this.clockintabList) {
							this.statucolor = "loading"
							this.getnewslistdata()
						} else {
							this.statucolor = "nomore"
						}
				}, 1000)
			},
			scrolltoupper(detail) {
			},
			// 校园风采列表
			getnewslistdata() {
				getnewslists({
					brigade: '长沙芙蓉区',
					
				}).then((res) => {
					res.data.forEach((item) => {
						item.imageUrl = this.baseURl + JSON.parse(item.imageUrls)[0]
					})
					this.tabList = res.data.slice(0,this.limit)
					this.clockintabList = res.data.length
				})
			},
			// 点赞
			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: 90%;

			.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>