<template>
	<view class="product-box">
		<view class="product-first" @tap="chooseEv(item.goods_id)" v-if="index == 0" v-for="(item,index) in list" :key="index">
			<view class="img"><image :src="item.cover" mode="widthFix" lazy-load></image></view>
			<view class="txt clips1">{{item.name}} </view>
		</view>
		<view class="product-list-bg">
			<view class="product-list" :style="{width:newWidth}">
				<view class="product-item" @tap="chooseEv(item.goods_id)" v-if="index !== 0" v-for="(item,index) in list" :key="index">
					<view class="img"><image :src="item.cover" mode="widthFix" lazy-load></image></view>
					<view class="txt clips1">{{item.name}} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'product-list',
		props:{
			list:{
				type:Array,
				default:()=>{
					return []
				}
			},
			
			// 标题颜色
			titlec:{
				type:String,
				default:'#000000'
			},
			// 是否显示左侧图标
			ifIcon:{
				type:Boolean,
				default:false
			},
			// 是否显示下划线
			ifLine:{
				type:Boolean,
				default:true
			},
			// 下划线颜色
			linec:{
				type:String,
				default:"#EEEEEE"
			},
			// 是否显示最后一条下划线
			ifLastLine:{
				type:Boolean,
				default:true
			},
			fonts:{
				type:String,
				default:'28rpx'
			},
			newWidth:{
				type:String,
				default:''
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			// 列表选择事件
			chooseEv(id) {
				// 抛出事件
				this.$emit('toDetail',{id})
			}
		}
	}
</script>

<style scoped>
	.product-first{
		margin-bottom: 50rpx;
	}
	.product-first .img{
		height: 450rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.product-first .img image{
		width: 100%;
		min-height: 450rpx;
	}
	.product-first .txt{
		font-size: 30rpx;
		line-height: 1.5;
		margin-top: 30rpx;
	}
	.product-list-bg{
		overflow-x: auto;
		padding-bottom: 40rpx;
	}
	.product-list-bg::-webkit-scrollbar{
		width: 0;
		height: 0;
	}
	.product-list{
		display: flex;
	}
	.product-list .product-item{
		width: 460rpx;
		margin-right: 30rpx;
	}
	.product-list .product-item:last-child{
		margin-right: 0;
	}
	.product-list .product-item .img{
		height: 300rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.product-list .product-item .img image{
		width: 100%;
		min-height: 300rpx;
	}
	.product-list .product-item .txt{
		font-size: 28rpx;
		line-height: 1.5;
		margin-top: 20rpx;
	}
</style>