<template>
	<view class="list">
		<view class="item" v-for="item in list" :key="item.id" @click="selectGoods(item)">
			<image class="cover" :src="item.coverImg" mode="aspectFill"></image>
			<view class="info">
				<text class="name">{{ item.name }}</text>
				<text class="price">￥{{ returnPrice(item.skuList) }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getProductList } from '@/http/api/product.js';

// 商品列表
const list = ref([]);

// 选择商品
function selectGoods(item) {
	uni.setStorageSync('packageSelectGoods', {
		id: item.id,
		coverImg: item.coverImg,
		name: item.name,
		price: returnPrice(item.skuList)
	});
	uni.navigateBack();
}

// 返回规格最高价
function returnPrice(skuList) {
	return Math.max(...skuList.map((item) => item.salePrice));
}

// 获取商品列表
async function getProductListAjax() {
	try {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		const res = await getProductList();
		console.log('res',res);
		list.value = res;
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

onLoad(() => {
	getProductListAjax();
});
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.list {
	padding: 28upx;
	.item {
		padding: 28upx;
		background-color: #fff;
		border-radius: 20upx;
		display: flex;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.cover {
			$size: 120upx;
			width: $size;
			height: $size;
			border-radius: 16upx;
		}
		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 12upx;
			padding-left: 28upx;
			.name {
				font-size: 32upx;
				color: #333;
			}
			.price {
				font-size: 32upx;
				color: red;
			}
		}
	}
}
</style>
