<template>
	<view class="pull-list">
		<view class="pull-item" :class="isShop?'pull-item-shop':''" v-for="(item,index) in list" :key="index" @tap.stop="toDetail(item.id)">
			<view class="img"><image :src="item.src" mode="widthFix"></image></view>
			<view class="item-bg flex">
				<view class="time" v-if="!isShop">发布时间：{{item.time}}</view>
				<view class="title clips1">{{item.title}}</view>
			</view>
			<view class="collection-sign" v-if="collection == 1" @tap.stop="collectionEv(item.id)">
				<image src="/static/public/icon-collection.png" mode="widthFix"></image>
				<text>已收藏</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'pull-list',
		props:{
			list:{
				type:Array,
				default:()=>{
					return []
				}
			},
			collection:{
				type:Number,
				default: 0
			},
			isShop:{
				type:Boolean,
				default: false
			}
		},
		data(){
			return {
				currentIndex:0, //当前位置
			}
		},
		methods:{
			// 导航选择事件
			chooseEv(index) {
				if(this.currentIndex !== index){
					this.currentIndex = index;
					// 抛出事件
					this.$emit('chooseEv',index)
				}
			},
			// 跳转详情页
			toDetail(id) {
				// 抛出事件
				this.$emit('toDetail',{id})
			},
			//取消收藏
			collectionEv(id){
				// 抛出事件
				this.$emit('collectionEv',{id})
			}
		}
	}
</script>

<style scoped>
	.pull-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.pull-item {
		width: 100%;
		height: 450rpx;
		border-radius: 10rpx;
		margin-top: 25rpx;
		overflow: hidden;
		position: relative;
	}
	
	.pull-item .img>image {
		width: 100%;
		min-height: 450rpx;
	}
	
	.pull-item .item-bg {
		flex-direction: column-reverse;
		width: 100%;
		height: 450rpx;
		background-color: rgba(0, 0, 0, .3);
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.pull-item .title {
		padding: 0 30rpx;
		font-size: 30rpx;
		line-height: 1.6;
		color: #FFFFFF;
	}
	
	.pull-item .time {
		padding: 0 30rpx;
		font-size: 24rpx;
		line-height: 1.6;
		color: #c2c2c2;
		margin: 10rpx 0 18rpx;
	}
	
	.collection-sign{
		position: absolute;
		right: 22rpx;
		top: 22rpx;
	}
	.collection-sign>image{
		display: block;
		width: 45rpx;
		height: 41rpx;
		margin: 0 auto;
	}
	.collection-sign>text{
		font-size: 24rpx;
		line-height: 2;
		color: #FFFFFF;
	}
	.pull-list .pull-item-shop{
		width: calc(50% - 14rpx);
		height: auto;
	}
	.pull-item-shop .img{
		height: 215rpx;
		overflow: hidden;
	}
	.pull-item-shop .img>image {
		width: 100%;
		min-height: 215rpx;
	}
	.pull-item-shop .item-bg {
		height: auto;
		background-color: #FFFFFF;
		position: static;
	}
	.pull-item-shop .title {
		padding: 15rpx 20rpx 0;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		line-height: 1.8;
		color: #000;
		-webkit-line-clamp: 2;
	}
</style>