<template>
	<view class="container">
		<view class="head_bg"></view>
		<view class="info">
			<view class="info_content">
				<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/points_img1.png"  mode="aspectFill"/>
				<viwe class="tips">可用积分</viwe>
				<viwe class="pnintsNum">{{pointsInfo.accountPoints}}</viwe>
				<viwe class="bottom">
					<view @click="tapClick(item)" v-for="(item,index) in tap" :key="index">
						<image class="icon" :src="item.iconUrl" mode="aspectFill" />
						<view>{{item.name}}</view>
					</view>
				</viwe>
			</view>
		</view>
		<view class="list"
			:class="{
				column: shopSettingInfo.browseMode == 'list',
				row: shopSettingInfo.browseMode == 'grid' 
				}"
			>
			<view class="listItem"
				:class="{ 
					row: shopSettingInfo.browseMode == 'list',
					column: shopSettingInfo.browseMode == 'grid' 
					}"
				v-for="(item,index) in list" :key="index"
				@click="goDetail(item)"
				>
				<image class="img" :src="item.goodsImageUrl"  mode="aspectFill"/>
				<view class="itemInfo">
					<view class="title">{{item.goodsName}}</view>
					<view class="remainingNum" v-if="shopSettingInfo.browseMode == 'list'">剩余{{item.quantity}}件</view>
					<view class="bottom">
						<view class="pointsNum">{{item.requiredPoints}}<view class="f">积分</view></view>
						<view class="btn" @click.stop="exchange(item)" v-if="shopSettingInfo.browseMode == 'list'">立即兑换</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				tap: [
					{name: '积分明细', pageUrl: "/pagesPoints/IntegralDetail/index", iconUrl: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/icon_detail.png"},
					{name: '兑换记录', pageUrl: "/pagesPoints/exchangeRecord/index", iconUrl: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/points/icon_record.png"}
				],
				query: {
					page: 1,
					size: 10,
				},
				list: [],
				shopSettingInfo: null,
				pointsInfo: null,
				shopUserInfo: null,
				shopId: null,
			};
		},
		onLoad(options) {
			if ( options.shopId ) {
				this.shopId = options.shopId;
			}
		},
		onShow() {
			this.getShopSettingInfo()
			this.getShopInfo()
			this.getointsGoodsList()
		},
		
	
		methods: { 
			/**
			 * 获取会员信息
			 */
			async getShopInfo() {
				let res = await this.api.shopUserInfo({
					shopId: this.shopId,
					userId: uni.cache.get('userInfo').id,
				})
				if (res.code == 0) {
					this.shopUserInfo = res.data;
					uni.cache.set('shopUserInfo',this.shopUserInfo)
					this.getmemberPointsInfo(this.shopUserInfo.id)
				} 
			},
			
			/**
			 * 获取店铺设置
			 */
			async getShopSettingInfo() {
				let res = await this.api.shopSettingInfo(this.shopId)
				if (res.code == 0) {
					this.shopSettingInfo = res.data;
				} 
			},
			/**
			 * 获取会员积分
			 */
			async getmemberPointsInfo (memberId) {
				let res = await this.api.memberPointsInfo(memberId)
				if (res.code == 0) {
					this.pointsInfo = res.data;
				} 
			},
			
			/**
			 * 获取积分商品列表
			 */
			async getointsGoodsList() {
				let res = await  this.api.pointsGoodsList({
					shopId: this.shopId,
					...this.query
				})
				if ( res.code == 0) {
					if (res.data.pages < this.query.page) {
						this.status = 'nomore'
						if (this.query.page == 1 && res.data.list.length == 0) {
							this.list = []
							// this.is_end = true
						}
						return false;
					} else {
						this.status = 'loading';
						if (this.query.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list];
						}
						this.query.page = ++this.query.page;
						if (this.query.page > res.data.pages) {
							this.status = 'nomore';
						} else {
							this.status = 'loading';
						}
					
					}
				}
			},
			
			/**
			 * 跳转详情
			 * @param {Object} item
			 */
			goDetail (item) { 
				uni.navigateTo({
					url: `/pagesPoints/goodsDetail/index?shopId=${this.shopId}&goodsData=${JSON.stringify(item)}`,
				})
			},
			
			/**
			 * 积分明细兑换记录跳转
			 */
			tapClick (item) {
				uni.pro.navigateTo(item.pageUrl, {
					shopId: this.shopId,
				})
				
			},
			
			/**
			 * 立即兑换
			 */
			async exchange (item) {
				uni.navigateTo({
					url: `/pagesPoints/confirm_order/index?shopId=${this.shopId}&goodsData=${JSON.stringify(item)}`,
				})
			}
			
		}
	};
</script>

<style scoped lang="scss">
	page {
		// background: #f6f6f6;
	}
	.head_bg{
		    height: 256rpx;
		    background: linear-gradient(180deg, #E9B183 0%, #F5F5F500 100%);
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 0;
		    margin: auto;
	}
	.info{
		padding: 32rpx 20rpx;
		position: relative;
		z-index: 2;
	    .info_content{
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 8rpx 2rpx rgba(0,0,0,0.09);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			.img{
				width: 152rpx;
				height: 186rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
			.tips{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-bottom: 32rpx;
			}
			.pnintsNum{
				font-weight: bold;
				font-size: 60rpx;
				color: #333333;
			}
			.bottom{
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-top: 1rpx solid #E5E5E5;
				padding-top: 24rpx;
				margin-top: 24rpx;
				position: relative;
				z-index: 9;
				>view{
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						width: 30rpx;
						height: 30rpx;
						margin-right: 4rpx;
					}
				}
				>view:nth-child(1){
					border-right: 1rpx solid #E5E5E5
				}
			}
		}
	}
	.list{
		padding: 0 20rpx 0 20rpx;
		position: relative;
		z-index: 2;
		display: flex;
		flex-wrap: wrap;
		.listItem{
			display: flex;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 32rpx 16rpx;
			margin-bottom: 32rpx;
			.img{
				flex-shrink: 0;
				border-radius: 10rpx;
			}
			.itemInfo{
				width: 100%;
				display: flex;
				flex-direction: column;
				.title{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-top: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.remainingNum{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 20rpx;
				}
				.bottom{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
				}
				.pointsNum{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					align-items: flex-end;
					.f{
						font-weight: normal;
						font-size: 24rpx;
					}
				}
				.btn{
					width: 180rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: #E8AD7B;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
		
		
		.listItem.row{
			width: 100%;
			.img{
				width: 160rpx;
				height: 160rpx;
				margin-right: 16rpx;
			}
			
		}
		.listItem.column{
			width: 45%;
			.img{
				width: 100%;
				height: 224rpx;
			}
			.title{
				margin-top: 16rpx;
				margin-bottom: 10rpx;
			}
			
		}
	}
	.row{
		flex-direction: row;
		justify-content: space-between;
	}
	.column{
		flex-direction: column;
		
	}
</style>