<template>
	<view class="w-100">
		<view class="font-bold font-36 px-3 pb-2">{{title}}</view>
		<view class="list-wrap w-100 flex j-start a-center flex-wrap">
			<navigator 
				class="list-item mb-3 ml-3"
				hover-class="none"
				v-for="(item, idx) in list"
				:key="idx"
				:url="'/pages/goods/detail?goods_id=' + item.goods_id"
			>
				<image 
					class="goods_cover w-100" 
					:src="baseUrl + '/' + item.goods_thumb" 
					mode="aspectFit"
				/>
				<view class="goods-info flex flex-column j-between">
					<view class="title font-28 my-1">{{item.goods_name}}</view>
					<view class="w-100 flex j-between a-center mt-1 mb-2">
						<view class="flex j-start a-center">
							<price
								:is_inquiry="item.is_inquiry"
								:price="item.shop_price"
							/>
							<text class="primaryColor font-28">{{item.least_str}}</text>
						</view>
						<image 
							class="cart-btn"
							@click.stop="handlePop(item)"
							src="/static/images/common/icon-cart.png" 
							mode="aspectFit"
						/>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import price from '@/components/price/index.vue'
import { goodsSku } from '@/apis/goods.js'
import { baseUrl } from '@/config/index.js'
import { debounce } from '@/utils/common.js'
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: () => []
		}
	},
	
	components: {
		price
	},
	
	data() {
		return {
			baseUrl
		}
	},
	
	methods: {
	    handlePop: debounce(async function(goods) {
			try{
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const { status, data } = await goodsSku(goods.goods_id)
				if(status) {
					console.log(data)
					if(!data) return this.$toast({title: '该商品没有规格'})
					const params = {
						goodsInfo: {
								cover: `${this.baseUrl}/${goods.goods_thumb}`,
								title: goods.goods_name,
								is_inquiry: goods.is_inquiry,
								unit: goods.goods_unit
							},
							skuData: data
					}
					this.$emit('purchase', params)
				}
				uni.hideLoading()
			}catch(e){
				console.log(e)
				uni.hideLoading()
				//TODO handle the exception
			}
		}, 800)
	}
}
</script>

<style lang="scss" scoped>
.list-wrap {
	.list-item {
		box-sizing: border-box;
		width: 330rpx;
		height: 490rpx;
		background-color: $white;
		border-radius: 8rpx;
		.goods_cover {
			height: 330rpx;
		}
		.goods-info {
			@include borderBox(0, 20rpx);
			height: 160rpx;
			.title {
				@include text-ellipsis(2)
			}
			.cart-btn {
				width: 34rpx;
				height: 32rpx;
			}
		}
	}
}

</style>
