<template>
	<view class="layout">
		<view class="list">
			<view class="item" v-for="(item, index) in goodList" @click="goGoodDetail(item.spuNo, item.skuNo)" :key="index">
				<image class="img" :src="item.skuImg"></image>
				<view class="item-rigth">
					<text class="item-title">{{ item.skuName }}</text>
					<view><text class="item-brand">{{ item.BrandName }}</text></view>
					<text class="item-integral">{{ item.sellingPrice }}积分</text>
				</view>
			</view>
			<uni-load-more v-if="brandList.length > 0" :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			pageSize: 20,
			loadingType: 'more',
			goodList: [],
			brandNo: ''
		};
	},
	onLoad(option) {
		this.brandNo = option.brandNo;
		this.getData();
		uni.setNavigationBarTitle({
			title: option.brandName
		})
	},
	methods: {
		getData() {
			this.$net
				.get('/goods/sku', { page: this.page, pageSize: this.pageSize, brandNo: this.brandNo })
				.then(res => {
					console.log(res);
					if (res.data.list.length > 0) {
						this.goodList = this.goodList
							.concat(res.data.list);
						this.page += 1;
					}
					this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
				})
				.catch(err => {
					console.log(err);
				});
		},
		goGoodDetail(spuNo, skuNo) {
			this.$router.push('GoodsDetail', {'spuNo':spuNo,'skuNo':skuNo})
		}
	}
};
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
.layout {
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	.list {
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		.item {
			display: flex;
			// align-items: center;
			background: #ffffff;
			padding: 24rpx;
			border-radius: 16rpx;
			margin-top: 24rpx;
			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
			}
			.item-rigth {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 24rpx;
				.item-title {
					font-size: 28rpx;
					color: #333333;
					height: 80rpx;
					line-height: 40rpx;
					overflow: hidden;
					min-inline-size: 2;
					line-clamp: 2;
					text-overflow: ellipsis;
					max-lines: 2;
				}
				.item-brand {
					background: rgba(255, 5, 32, 0.03);
					border-radius: 4rpx;
					border: 2rpx solid #ff0520;
					font-size: 22rpx;
					color: #ff0520;
					margin-top: 12rpx;
					line-height: 22rpx;
					margin-top: 8rpx;
					padding: 0 8rpx;
					width: auto;
				}
				.item-integral {
					font-size: 32rpx;
					font-weight: bolder;
					color: #ff0520;
					line-height: 33rpx;
					margin-top: 36rpx;
				}
			}
		}
	}
}
</style>
