<template>
	<view>
		<view class="nav-bar"></view>
		<view class="hole-page">
			<view
				class="single-item"
				v-for="(shop, index) in shopList"
				:key="index"
				@click="toggleDetail(shop.id, shop.shopName, shop.shopUse, shop.shopPath, shop.shopSum, shop.reddemPoint)"
			>
				<view class="sell-out" v-show="shop.shopSum == 0">
					<view>
						<h4>已兑完</h4>
						<h5>sold out</h5>
					</view>
				</view>
				<image :src="shop.shopPath" mode=""></image>
				<h3 style="font-weight: bold;">{{ shop.shopName }}</h3>
				<h3 style="display: flex; justify-content: space-between; align-items: flex-end;">
					<h4>
						<span style="font-size: 24px; font-weight: bold; letter-spacing: 3rpx; color: #219ef8; padding-right: 5rpx;">{{ shop.reddemPoint }}</span>
						<span style="font-weight: normal; font-size: 14px;">积分</span>
					</h4>
					<h5 style="font-weight: normal; color: #868686;">{{ shop.shopSum }}件</h5>
				</h3>
				<!-- <h3 style="color: #7E7E7E;">剩余库存：{{ shop.shopSum }}件</h3>
				<h3 style="color: red;">所需积分：{{ shop.reddemPoint }}分</h3> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { publicPath } from '../../public.js'
	export default {
		data() {
			return {
				shopList: []
			}
		},
		methods: {
			toggleDetail (id, name, use, url, sum, point) {
				if (sum == 0) {
					uni.showToast({
						icon: 'none',
						title: '该商品已兑完！' 
					})
				} else {
					uni.navigateTo({
						url: `/pages/giftDetail/giftDetail?id=${id}&name=${name}&use=${use}&url=${url}&sum=${sum}&point=${point}`
					})
				}
			}
		},
		onShow() {
			let that = this
			that.shopList = []
			// 初始化获取积分商品详情
			uni.request({
				url: publicPath + '/backstage/appshoping/appMall',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {},
				success: (res) => {
					console.log(res);
					if (res.data.length != 0) {
						that.shopList = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: '暂时无法获取奖品信息，请稍后再试！'
						})
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.hole-page{
		width: 100vw;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.single-item{
			width: 49%;
			border-radius: 15rpx;
			margin-bottom: 15rpx;
			box-sizing: border-box;
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			image{
				width: 100%;
				height: 300rpx;
				border-radius: 15rpx;
				margin-bottom: 8rpx;
			}
			h3{
				font-weight: normal;
				margin-bottom: 8rpx;
				font-size: 18px;
			}
			.sell-out{
				position: absolute;
				left: 12.5%;
				top: 10%;
				width: 75%;
				height: 45%;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 9999;
				color: #fff;
				display: flex;
				view{
					margin: auto;
					width: 60%;
					height: 30%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					color: #fff;
					font-weight: normal;
				}
			}
		}
	}
</style>
