<!-- 优惠券中心  -->
<template>
	<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
		<view class="container">
			<!-- tabs页签 -->
			<view class="tabs-box">
				<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs>
			</view>
			
			<!-- 可兑换券列表 -->
			<scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS"
				@refresherrefresh="onS" scroll-y="true" class="flex align-items"
				style="height: 700rpx auto;box-sizing: border-box;margin-top: 30rpx;">
				<!-- 满减券 -->
				<view class="exChangeBox" v-if="currentTab == 0">
					<view class="couponsList">
						<view class="list-item">
							<view class="itemLeft">
								<view class="fslh60 c3 bold">50</view>
								<view class="fslh28 c3 regular" style="margin-top: 15rpx;">满减券</view>
							</view>
							<view class="itemRight">
								<view class="item-RightLeft">
									<view class="fs32 c3D bold" style="line-height: 36rpx;">满100减50</view>
									<view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限原料商城可用</view>
								</view>
								<view class="item-btn">去使用</view>
							</view>
						</view>
					</view>
			
				</view>
				<!-- 次数券 -->
				<view class="exChangeBox" v-if="currentTab == 1">
					<view class="couponsList">
						<view class="list-item" v-for="(item, index) in couponList" :key="index"
							@click="openCouponPro(item)">
							<view class="itemLeft">
								<view class="fslh60 c3 bold">1</view>
								<view class="fslh28 c3 regular" style="margin-top: 15rpx;">次数券</view>
							</view>
							<view class="itemRight">
								<view class="item-RightLeft">
									<view class="fs32 c3D bold" style="line-height: 36rpx;">增加拨打次数</view>
									<view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限增加拨打次数使用</view>
								</view>
								<view class="item-btn">去使用</view>
							</view>
			
						</view>
					</view>
				</view>
				
				<!-- 无数据展示 -->
				<view class="grid flex-column justify-center align-center" v-if="couponList.length == 0" style="margin: 0 auto;margin-top: 300rpx;">
					<image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode="" style="width: 520rpx;height: 259rpx;">
					</image>
					<view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;text-align: center;width: 100%;">暂无数据信息</view>
				</view>
			
			</scroll-view>
			
			
		</view>
		
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import _ from 'lodash';

	const listQuery = ref({
		page: 1,
		limit: 10,
		list_rows: 10,
		status: 1,
	})
	const tabMaps = [{
			name: '优惠券',
			value: '1',
		},
		{
			name: '次数券',
			value: '2',
		},
	];
	const currentTab = ref(0)
	const score = ref(0)
	//切换tabs
	function onChange(e) {
		console.log('onChange', e);
		currentTab.value = e.index
		console.log('切换tabs', currentTab.value);
		listQuery.value.status = e.value
		couponList.value = []
		getCouponList();
	}

	//页面跳转
	const toPage = (e) => {
		uni.navigateTo({
			url: e
		})

	}

	//满减券
	const couponList = ref([])
	const couponCount = ref(0)
	const homrS = ref(false)
	async function getCouponList() {
		const res = await sheep.$api.app.scoreShop.fullList({
			page: listQuery.value.page,
			limit: listQuery.value.limit,
			status: listQuery.value.status,
			order: 'normal'
		});
		if (res.code === 1) {
			couponList.value = [...couponList.value, ...res.data.list];
			couponCount.value = res.data.count;
			score.value = res.data.score
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	//加载更多
	function onScrolltolower() {
		if (couponList.value.length < couponCount.value) {
			listQuery.value.page += 1;
			getCouponList();
		}
	}
	//下拉刷新
	function onS() {
		homrS.value = true
		listQuery.value.keywords = ''
		uni.showLoading({
			title: '加载中...'
		});
		resetLists();
		setTimeout(() => {
			homrS.value = false;
			uni.hideLoading();
			uni.stopPullDownRefresh();
		}, 2000)
	}
	// 重置列表
	function resetLists() {
		listQuery.value.page = 1;
		couponList.value = [];
		getCouponList();
	}
	
	onLoad(() => {
		getCouponList();
	});
</script>


<style lang="scss" scoped>
	.fslh60 {
		font-size: 60rpx;
		line-height: 60rpx;
	}
	
	.fslh28 {
		font-size: 28rpx;
		line-height: 28rpx;
	}
	
	.fs32 {
		font-size: 32rpx;
	}
	
	.justify-center {
		justify-content: center;
	}
	
	.align-center {
		align-items: center;
	}
	
	.flex {
		display: flex;
	}
	
	.grid {
		display: grid;
	}
	
	.fs60 {
		font-size: 60rpx;
	}

	.fs24 {
		font-size: 24rpx;
	}

	.bold {
		font-weight: bold;
	}
	
	.regular {
		font-weight: 400;
	}

	.c3 {
		color: #333333;
	}
	
	.c3D {
		color: #3d3d3d;
	}

	.c9 {
		color: #999999;
	}

	.container {
		background-color: #f7f7f7;
		height: 100vh;
		
		.exChangeBox {
			// background-color: #f7f7f7;
			width: 690rpx;
			margin-top: 30rpx;

			.couponsList {
				width: 100%;
				padding: 0 30rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				;
				grid-gap: 20px;
				// display: flex;
				// justify-content: center;
				// align-items: center;


				.list-item {
					width: 690rpx;
					background-image: url('https://jiangxiaoxian.0rui.cn/couponItemBack.png');
					background-size: 100%;
					display: flex;
					justify-content: space-between;
					
					.itemLeft {
						width: 84rpx;
						height: 103rpx;
						padding: 40rpx 50rpx;
						display: block;
						justify-content: center;
						align-items: center;
					}
					
					.itemRight {
						width: 446rpx;
						height: 103rpx;
						padding: 40rpx 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.item-RightLeft {
							// width: 84rpx;
							// height: 103rpx;
							// padding: 40rpx 50rpx;
							display: block;
							justify-content: flex-start;
							align-items: center;
						}
						
						.item-btn {
							width: 160rpx;
							height: 70rpx;
							background: linear-gradient(to right, #FCCA58, #FFBD25);
							border-radius: 106rpx;
							align-items: center;
							justify-content: center;
							display: flex;
							font-size: 28rpx;
							line-height: 36rpx;
							font-weight: bold;
							color: #333333;
						}
						
					}
					

					.item-text {
						padding: 30rpx;

						.exchangeBtn {
							background-color: #fcc74e;
							height: 70rpx;
							width: 270rpx;
							margin-top: 30rpx;
							border-radius: 223rpx;
							align-items: center;
							justify-content: center;
							display: flex;
							font-size: 28rpx;
							line-height: 30rpx;
							font-weight: 400;
						}
					}
				}

			}

		}

	}
</style>