<template>
	<view class="content-item">
		<view class="image" @click="toDetailsPage">
			<image class="cover" :src="info.article_pic" alt="没有图片"></image>
			<image src="/static/image/user/5.png" class="play-icon" v-if="type==2"></image>
		</view>
		<view class="right" >
			<u-icon name="close" color="#999999" size="27" @click="showPopup(info.article_id)"></u-icon>
			<view class="tags u-line-2" @click="toDetailsPage">{{info.article_title}}</view>
			<view class="data">
				<view>
					<image src="/static/image/user/2.png"></image>
					<text>{{info.comment_num}}</text>
				</view>
				<view>
					<image src="/static/image/user/3.png"></image>
					<text>{{info.collect_num}}</text>
				</view>
				<view>
					<image src="/static/image/user/4.png"></image>
					<text>{{info.like_num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {}
	},
	props: {
		info:{
			type: Object,
			default: null
		},
		type:{
			type: Number,
			default: 1
		},
		delItem: {
			type: Function,
			default: null
		}
	},
	methods: {
		showPopup(id) {
			console.log(12345,id)
			this.$emit("del",id)
		},
		toDetailsPage() {
			uni.navigateTo({
				url: '/pages/user/contentDetails?current=' + this.type+'&id=' + this.info.article_id
			});
		}
	},
};
</script>
<style lang="scss" scoped>
.content-item {
	display: flex;
	padding: 30rpx;
	background-color: #FFFFFF;
	margin-bottom: 2rpx;
	.image {
		margin-right: 25rpx;
		position: relative;
		.cover {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			// background-color: aqua;
			flex-shrink: 0;
		}
		.play-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 58rpx;
			height: 58rpx;
			z-index: 9;
		}
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		.u-icon {
			justify-content: flex-end;
		}
		.tags {
			margin: 10rpx 0 auto;
			font-size: 28rpx;
			color: rgba(51,51,51,1);
		}
		.data {
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			@mixin image-class($width) {
				> image {
					width: $width;
					height: 26rpx;
					margin-right: 20rpx;
				}
			}
			> view {
				display: flex;
				align-items: center;
				&:not(:last-child) {
					margin-right: 35rpx;
				}
				&:first-child {
					@include image-class(31rpx);
				}
				&:nth-child(2) {
					@include image-class(26rpx);
				}
				&:last-child {
					@include image-class(20rpx);
				}
				> text {
					font-size: 24rpx;
					color: rgba(51,51,51,1);
				}
			}
		}
	}
}
</style>