<template>
	<view class="content-item">
		<view class="image">
			<image class="cover"></image>
			<image src="/static/image/user/5.png" class="play-icon" v-if="cur==1"></image>
		</view>
		<view class="right" @click="toDetailsPage">
			<u-icon name="close" color="#999999" size="27" @click.stop="showPopup"></u-icon>
			<view class="tags u-line-2">#配饰就该这么搭#</view>
			<view class="data">
				<view>
					<image src="/static/image/user/2.png"></image>
					<text>2.5w</text>
				</view>
				<view>
					<image src="/static/image/user/3.png"></image>
					<text>2.5w</text>
				</view>
				<view>
					<image src="/static/image/user/4.png"></image>
					<text>2.5w</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {}
	},
	props: {
		cur: [Number, String],
		delItem: {
			type: Function,
			default: null
		}
	},
	methods: {
		showPopup() {
			this.delItem();
		},
		toDetailsPage() {
			uni.navigateTo({
				url: '/pages/user/contentDetails?current=' + this.cur
			});
		}
	},
};
</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>