<template>
	<view class="goodslist" :class="[layout]">
		<view v-for="(item, index) in list" :key="index" @click="toDetail(item)">
			<template v-if="layout === 'list'">
				<view class="item">
					<view class="img coupon" v-if="item.goodsCategory=='优惠券'&&item.couponInfo" style="width: 142rpx;">
						<couponIcon  :item="item.couponInfo" typeKey="couponType" />
					</view>
					<image class="img"  v-else lazy-load :src="item.goodsImageUrl" mode="aspectFill"></image>
					<view class="info">
						<view>
							<view class="name u-line-1">{{item.goodsName}}</view>
							<view class="price">
								<text>{{item.requiredPoints}}积分 </text>
								<text v-if="item.extraPrice">+{{item.extraPrice}}元</text>
							</view>
						</view>
						<view class="u-flex u-row-center u-col-center u-flex-col">
							<view class="btn" v-if="canExchange(item)">兑换</view>
							<view class="btn end" v-else>已兑完</view>
							<view class="limit" v-if="item.limitQuota">限购{{item.limitQuota}}份</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="layout === 'block'">
				<view class="item">
					<view class="img coupon" v-if="item.goodsCategory=='优惠券'&&item.couponInfo">
						<couponIcon  :item="item.couponInfo" typeKey="couponType" />
					</view>
					<image class="img" v-else lazy-load :src="item.goodsImageUrl" mode="aspectFill"></image>
					<view class="info">
						<view class="name u-line-1">{{item.goodsName}}</view>
						<view class="price">
							<text>{{item.requiredPoints}}积分 </text>
							<text v-if="item.extraPrice">+{{item.extraPrice}}元</text>
						</view>
						<view class="u-flex u-col-center u-m-t-16 u-row-between">
							<view class="limit" v-if="item.limitQuota">限购{{item.limitQuota}}份</view>
							<view class="btn" v-if="item.quantity>0">兑换</view>
							<view class="btn end" v-else>已兑完</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import couponIcon from "@/components/coupon-icon/index";
	const props = defineProps({
		list: {
			type: Object,
			default: () => [],
		},
		layout: {
			type: String,
			default: "block",
		},
		pointsUser: {
			type: Object,
			default: () => {},
		}
	});
	
	const numListStyle={
		'font-size':'24rpx'
	}
	const numBlockStyle={
		'font-size':'24rpx'
	}

	function toDetail(item) {
		uni.setStorageSync('exchange_goods', item)
		uni.navigateTo({
			url: '/scoreShop/detail/index?id=' + item.id+'&shopId='+item.shopId,
		})
	}

	function canExchange(item) {
		if (item.goodsCategory == '优惠券' && !item.couponInfo) {
			return false
		}
		if (props.pointsUser.pointBalance <= 0) {
			return false
		}
		if (props.pointsUser.pointBalance < item.requiredPoints) {
			return false
		}
		if (item.quantity <= 0) {
			return false
		}
		if (item.limitQuota && item.boughtCount >= item.limitQuota) {
			return false
		}
		return true
	}
	const emits = defineEmits('exchange')

	function exchange(item) {
		// uni.showModal({
		// 	title: '提示',
		// 	content: `是否确认兑换` + item.goodsName + '？',
		// 	cancelText: '取消',
		// 	showCancel: true,
		// 	success(res) {
		// 		if (res.confirm) {
		// 			emits('exchange', item)
		// 		}
		// 	}
		// })
	}
</script>

<style lang="scss">
	.goodslist {
		padding: 28rpx;

		&.list {
			.item {
				background-color: #fff;
				padding: 32rpx 24rpx;
				border-radius: 16rpx;
				display: flex;
				margin-bottom: 18rpx;


				.img {
					width: 112rpx;
					height: 112rpx;
					border-radius: 16rpx;
					background: #d9d9d9;

					&.coupon {
						background-color: transparent;
					}
				}

				.info {
					flex: 1;
					padding-left: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name {
						font-size: 28rpx;
						color: #333;
						font-weight: 700;
					}

					.price {
						font-size: 28rpx;
						margin-top: 14rpx;
						color: #666;
					}

					.btn {
						padding: 14rpx 48rpx;
						border-radius: 16rpx;
						background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
						color: #9c571f;
						font-size: 28rpx;
						font-weight: 700;
						white-space: nowrap;

						&.end {
							color: #999999;
							background: rgba(153, 153, 153, 0.3);
						}
					}

					.limit {
						color: #666;
						font-size: 24rpx;
						margin-top: 8rpx;
						white-space: nowrap;
					}
				}
			}
		}

		&.block {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			row-gap: 30rpx;
			column-gap: 52rpx;

			.item {
				padding: 32rpx 28rpx;
				border-radius: 16rpx;
				background-color: #fff;


				.img {
					width: 266rpx;
					height: 266rpx;
					border-radius: 16rpx;
					background: #d9d9d9;

					&.coupon {
						background-color: transparent;
					}
				}

				.info {
					margin-top: 28rpx;

					.name {
						font-size: 28rpx;
						color: #333;
						font-weight: 700;
					}

					.price {
						font-size: 28rpx;
						margin-top: 16rpx;
						font-weight: 700;
						color: #9C571F;
					}

					.btn {
						padding: 14rpx 48rpx;
						border-radius: 16rpx;
						background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
						color: #9c571f;
						font-size: 28rpx;
						font-weight: 700;
						white-space: nowrap;

						&.end {
							color: #999999;
							background: rgba(153, 153, 153, 0.3);
						}
					}

					.limit {
						color: #666;
						font-size: 24rpx;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>