<template>
	<view class="bg-white text-center" style="height: 100%;">
		<view class="noneInfo" v-if="list.length==0">
			<view class="noneInfoImg">
			</view>
			<view class="margin-top-sm">
				暂无相关信息
			</view>
		</view>

		<!-- 下拉刷新组件 -->
		<mix-pulldown-refresh v-if="list.length>0" ref="mixPulldownRefresh" class="panel-content" :top="0" @refresh="onPulldownReresh"
		 @setEnableScroll="setEnableScroll">
			<!-- 内容部分 -->
			<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" @scrolltolower="loadMore">
		
				<view v-for="(item, index) in list" :key="index" class="news-item" @click.stop="navToDetails(index)">
					<text :class="['title', 'title'+item.contentLayout]">{{item.articleTitle}}</text>
					<view class="video-wrapper" v-if="item.contentLayout == 4" style="margin-top:20upx">
						<video class="video" :src="imgUrl+item.articleContent" controls objectFit="fill" :autoplay="false"></video>
					</view>
					<view v-if="item.articleCovers.length > 0" :class="['img-list', 'img-list'+item.contentLayout, item.articleCovers.length == 1 && item.contentLayout==2 ? 'img-list-single': '']">
						<view v-for="(imgItem, imgIndex) in item.articleCovers" :key="imgIndex" :class="['img-wrapper', 'img-wrapper'+item.contentLayout, item.articleCovers.length == 1 && item.contentLayout==2 ? 'img-wrapper-single': '']">
							<image class="img" v-if="item.contentLayout == 3" mode="aspectFit" :src="imgUrl+imgItem"></image>
							<image class="img" v-if="item.contentLayout == 2" mode="scaleToFill" :src="imgUrl+imgItem"></image>
						</view>
					</view>
					<view v-if="item.articleCovers.length == 0 && item.contentLayout != 4" class="img-empty"></view>
					<view :class="['bot', 'bot'+item.contentLayout]">
						<text :class="['author', 'author'+item.contentLayout]">{{item.hospitalName}}</text>
						<text class="time">{{item.createTime ? item.createTime.split(" ")[0]:''}}</text>
					</view>
				</view>

				<!-- 上滑加载更多组件 -->
				<mix-load-more :status="loadMoreStatus"></mix-load-more>
			</scroll-view>
		</mix-pulldown-refresh>
	</view>
</template>

<script>
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			mixPulldownRefresh,
			mixLoadMore,
		},
		data() {
			return {
				imgUrl: "http://139.9.163.126/gastric/",
				tabCurrentIndex: 0, //当前选项卡索引
				loadMoreStatus:0, //加载更多 0加载前，1加载中，2没有更多了
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				list: [],
				pageNum: 1,
				pageSize: 10
			}
		},
		computed: {},
		mounted() {
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadNewsList()
		},
		methods: {
			//新闻列表
			loadNewsList(type) {
				const data = {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				}
				this.$http.get(`/gastric-cancer-data/favorite/page`, data).then(res => {
					if (res.data.code == 1) {
						this.list = res.data.object.list
						if (type == 'refresh') {
							this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						}
						if (type == 'add') {
							this.loadMoreStatus = 0
						}
						if(res.data.object.totalCount <=10){
							this.loadMoreStatus = 2
						}
					}
				})
			},
			//新闻详情
			navToDetails(index) {
				let id = this.list[index].articleId
				uni.navigateTo({
					url: `/educationViews/details/index?id=${id}`
				})
			},

			//下拉刷新
			onPulldownReresh() {
				this.pageNum = 1
				this.list = []
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadMoreStatus = 1
				this.pageNum = this.pageNum + 1
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
		}
	}
</script>

<style lang="scss">
	.noneInfo {
		margin-top: 150upx;

		.noneInfoImg {
			background-image: url('../../static/noneInfo.png');
			height: 128upx;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
</style>


<style lang='scss' scoped>
	page,
	.content {
		background-color: #f8f8f8;
		height: 100%;
		overflow: hidden;
		text-align: left;
	}

	.content {
		height: 100%;
	}



	.swiper-box {
		height: 100%;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	/**
	 * 新闻列表 直接拿的nvue样式修改，,
	 * 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
	 * 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
	 */
	.video-wrapper {
		width: 100%;
		height: 440upx;

		.video {
			width: 100%;
		}
	}

	view {
		display: flex;
		flex-direction: column;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.news-item {
		position: relative;
	}

	/* 修改结束 */

	/* 新闻列表  emmm 仅供参考 */
	.news-item {
		width: 750upx;
		padding: 24upx 30upx;
		padding-bottom: 0;
		background-color: #fff;
		text-align: left;
	}

	.title {
		font-size: 32upx;
		color: black;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		white-space: pre-wrap;
		word-break: break-all;
		line-height: 46upx;
	}

	.bot {
		flex-direction: row;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.25);
		padding-bottom: 24upx;
	}

	.author {
		font-size: 24upx;
		color: #aaa;
		max-width: 580upx;
		min-width: 580upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.author2 {
		max-width: 360upx;
		min-width: 360upx;
	}

	.time {
		font-size: 24upx;
		color: #aaa;
		min-width: 270upx;
	}

	.img-list {
		flex-shrink: 0;
		flex-direction: row;
		background-color: #fff;
		width: 200upx;
		height: 140upx;
	}

	.img-wrapper {
		flex: 1;
		flex-direction: row;
		height: 140upx;
		position: relative;
		overflow: hidden;
	}

	.img {
		flex: 1;
	}

	.img-empty {
		height: 20upx;
	}

	.img-list1 {
		position: absolute;
		left: 30upx;
		top: 24upx;
	}

	/* .title1{
		padding-left: 240upx; 
	}
	.bot1{
		padding-left: 240upx; 
		margin-top: 20upx;
	} */
	/* 图在左 */
	.img-list2 {
		position: absolute;
		left: 30upx;
		top: 24upx;
	}

	.title2 {
		padding-left: 220upx;
		height: 92upx;
	}

	.bot2 {
		padding-left: 220upx;
		margin-top: 20upx;
	}

	/* 图 */
	.img-list3 {
		width: 700upx;
		margin: 16upx 0upx;
	}

	.img-wrapper3 {
		margin-right: 12upx;
	}

	/* 底部大图 */
	/* 	.img-list-single{
		width: 690upx;
		height: 300upx;
		margin: 16upx 0upx;
	}
	.img-wrapper-single{
		height: 300upx;
		margin-right: 0upx;
	}
	 */
	.video-tip {
		/* position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.3); */
	}

	.video-tip-icon {
		width: 60upx;
		height: 60upx;
	}
</style>
