<template>
	<view class="list" v-if="list.length > 0">
		<navigator :url="'/pages/news/newsdetail?id='+item.newsContentId" class="item" v-for="(item, index) in list"
			:key="index" hover-class="none" v-if="0 == item.newsConfigWebSwitch || 2 ==item.newsConfigWebSwitch">
			<!-- 多张图片 -->
			<view class="info-multi" v-if='"key_1" == item.typesettingCode'>
				<view class="text-multi">
					<view class="title">{{ item.newsContentTitle }}</view>
				</view>
				<view class="imgs">
					<view class="photo">
						<image :src="imgUrl + p.contentCoverId" mode="scaleToFill"
							v-for="(p, i) in item.newsContentCoverList" :key="i" item="p"></image>
					</view>
				</view>
				<view class="other">
					<view class="items">{{ item.newsContentAuthor }}</view>
					<view class="items">{{ item.newsContentPublishTime }}</view>
					<view class="items">评论{{ item.newsContentCommentNumber }}条</view>
				</view>
			</view>
			<!-- 左图 -->
			<view class="info" v-if='"key_2" == item.typesettingCode'>
				<view class="photo">
					<image :src="imgUrl+item.newsContentCoverList[0].contentCoverId" mode="scaleToFill"></image>
				</view>
				<view class="text-left">
					<view class="title">{{ item.newsContentTitle }}</view>
					<view class="other">
						<view class="left">
							<view class="source">{{ item.newsContentAuthor }}</view>
							<view class="time">{{ item.newsContentPublishTime }}</view>
						</view>
						<view class="right view">
							<text>评论{{ item.newsContentCommentNumber }}条</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 右图 -->
			<view class="info" v-if='"key_3" == item.typesettingCode'>
				<view class="text-right">
					<view class="title">{{ item.newsContentTitle }}</view>
					<view class="other">
						<view class="left">
							<view class="source">{{ item.newsContentAuthor }}</view>
							<view class="time">{{ item.newsContentPublishTime }}</view>
						</view>
						<view class="right view">
							<text>评论{{ item.newsContentCommentNumber }}条</text>
						</view>
					</view>
				</view>
				<view class="photo">
					<image :src="imgUrl+item.newsContentCoverList[0].contentCoverId" mode="scaleToFill"></image>
				</view>
			</view>

			<!-- 底部一张图片 -->
			<view class="info-bottom" v-if='"key_4" == item.typesettingCode'>
				<view class="text-bottom">
					<view class="title">{{ item.newsContentTitle }}</view>
				</view>
				<view class="photo">
					<image :src="imgUrl+item.newsContentCoverList[0].contentCoverId" mode="scaleToFill"></image>
				</view>
				<view class="other">
					<view class="items">{{ item.newsContentAuthor }}</view>
					<view class="items">{{ item.newsContentPublishTime }}</view>
					<view class="items">评论{{ item.newsContentCommentNumber }}条</view>
				</view>
			</view>
			<!-- 无图片 -->
			<view class="info-bottom" v-if='"key_5" == item.typesettingCode'>
				<view class="text-bottom">
					<view class="title">{{ item.newsContentTitle }}</view>
				</view>
				<view class="other">
					<view class="items">{{ item.newsContentAuthor }}</view>
					<view class="items">{{ item.newsContentPublishTime }}</view>
					<view class="items">评论{{ item.newsContentCommentNumber }}条</view>
				</view>
			</view>
			<!-- 视频 -->
			<view class="info-video" v-if='"key_6" == item.typesettingCode'>
				<view class="text-video">
					<view class="title">{{ item.newsContentTitle }}</view>
				</view>
				<view class="photo">
					<image class="icon" src="../../static/images/ic_play_item.png" mode="aspectFill"></image>
					<image class="cover" :src="imgUrl+item.newsContentCoverList[0].contentCoverId" mode="scaleToFill">
					</image>

				</view>
				<view class="other">
					<view class="items">{{ item.newsContentAuthor }}</view>
					<view class="items">{{ item.newsContentPublishTime }}</view>
					<view class="items">评论{{ item.newsContentCommentNumber }}条</view>
				</view>
			</view>
			<!-- 音频 -->
			<view class="info-voice" v-if='"key_7" == item.typesettingCode'>
				<view class="text-voice">
					<view class="title">{{ item.newsContentTitle }}</view>
				</view>
				<view class="bottom">
					<view class="other">
						<view class="items">{{ item.newsContentAuthor }}</view>
						<view class="items">{{ item.newsContentPublishTime }}</view>
						<view class="items">评论{{ item.newsContentCommentNumber }}条</view>
					</view>
					<view class="btn">
						<image src="/static/images/nav/icon_user_hover.png" mode="aspectFill"></image>
						<view>播放</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
		</navigator>
	</view>
</template>

<script>
	export default {
		name: 'articleList',
		props: {
			list: {
				type: Array,
				default: function(e) {
					return [];
				}
			}
		},
		data() {
			return {
				baseurl: "http://192.168.0.10:7019/qmywzs/",
				imgUrl: "http://192.168.0.10:7019/qmywzs/route/file/download/true/"
			};
		},
	};
</script>

<style lang="scss">
	$title_size:32rpx;
	$desc_size:24rpx;

	/*文章列表*/
	.list {
		margin-top: 20rpx;

		.item {
			padding: 10rpx 24rpx 0 24rpx;

			.info {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 4rpx;

				.text-right {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						font-size: $title_size;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 8rpx;
					}

					.other {
						flex-grow: 1;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						font-size: $desc_size;
						color: #999;
						line-height: normal;

						.left {
							display: flex;
							flex-grow: 1;
							flex-shrink: 1;

							.source {
								display: -webkit-box;
								text-overflow: ellipsis;
								word-break: break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								width: 140rpx;
								margin-right: 16rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-grow: 0;
							flex-shrink: 0;
							margin-right: 5rpx;

							image {
								flex-grow: 1;
								flex-shrink: 1;
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								flex-grow: 1;
								flex-shrink: 1;
								margin-top: -6rpx;
							}
						}

						.view {
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5rpx;
							}
						}
					}


				}

				.text-left {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					flex-direction: column;
					margin-left: 40rpx;

					.title {
						font-size: $title_size;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 8rpx;
					}

					.other {
						flex-grow: 1;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						font-size: $desc_size;
						color: #999;
						line-height: normal;

						.left {
							display: flex;
							flex-grow: 1;
							flex-shrink: 1;

							.source {
								display: -webkit-box;
								text-overflow: ellipsis;
								word-break: break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								width: 140rpx;
								margin-right: 16rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-grow: 0;
							flex-shrink: 0;
							margin-right: 5rpx;

							image {
								flex-grow: 1;
								flex-shrink: 1;
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								flex-grow: 1;
								flex-shrink: 1;
								margin-top: -6rpx;
							}
						}

						.view {
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5rpx;
							}
						}
					}
				}

				.photo {
					image {
						height: 130rpx;
						width: 222rpx;
						border-radius: 10rpx;
					}
				}
			}

			.line {
				display: bock;
				width: 100%;
				height: 1rpx;
				margin-top: 22rpx;
				background: #f6f6f6;
			}

			.info-bottom {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding-bottom: 4rpx;

				.text-bottom {
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						font-size: $title_size;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 8rpx;
					}
				}

				.other {

					display: flex;
					flex-direction: row;
					font-size: $desc_size;
					color: #999;

					.items:nth-child(n+2) {
						margin-left: 15rpx;
					}
				}

				.photo {
					display: flex;
					flex-direction: column;
					padding: 10rpx;

					image {
						height: 350rpx;
						width: 100%;
						border-radius: 10rpx;
					}
				}
			}

			.info-video {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding-bottom: 4rpx;

				.text-video {
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						font-size: $title_size;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 8rpx;
					}
				}

				.other {

					display: flex;
					flex-direction: row;
					font-size: $desc_size;
					color: #999;

					.items:nth-child(n+2) {
						margin-left: 15rpx;
					}
				}

				.photo {
					padding: 10rpx;
					height: 350rpx;
					position: relative;

					.icon {
						width: 90rpx;
						height: 90rpx;
						z-index: 3;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						-webkit-transform: translate(-50%, -50%);
						position: absolute;
					}

					.cover {
						height: 100%;
						width: 100%;
						border-radius: 10rpx;
						position: absolute;
						top: 0rpx;
						left: 0rpx;
						z-index: 1;
					}


				}
			}



			.info-voice {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding-bottom: 4rpx;

				.text-voice {
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						font-size: $title_size;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 8rpx;
					}
				}

				.bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.other {

						display: flex;
						flex-direction: row;
						font-size: $desc_size;
						color: #999;

						.items:nth-child(n+2) {
							margin-left: 15rpx;
						}
					}

					.btn {
						display: flex;
						flex-direction: row;
						color: red;
						align-items: center;
						justify-content: flex-end;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}



			}

			.info-multi {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding-bottom: 4rpx;

				.text-multi {
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						font-size: $title_size;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 8rpx;
					}



				}

				.other {

					display: flex;
					flex-direction: row;
					font-size: $desc_size;
					color: #999;

					.items:nth-child(n+2) {
						margin-left: 15rpx;
					}
				}

				.imgs {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: flex-start;
					width: 100%;

					.photo {
						display: flex;
						flex-direction: row;
						width: 100%;
						align-items: center;
						justify-content: flex-start;

						image {
							height: 130rpx;
							width: 31%;
							margin: 5rpx;
							border-radius: 10rpx;
						}
					}
				}

			}

			&:last-child {
				.line {}
			}
		}
	}
</style>
