<template>
	<view class="container">
		<!-- #ifndef H5 -->
		<CustomNavbar title="我的卡券" />
		<!-- #endif -->
		<view class="moduleBox" style="margin-top: 20rpx;">
			<view class="module-content">
				<view class="moudleHeader">
					<view class="headerLeft">
						<text class="bigTxt">我的卡券</text>
						<text class="smallTxt">共有{{totalElements}}张</text>
					</view>
					<view class="headerRight" @click="viewUseRecord">
						<text class="useTxt">使用记录 <text class="iconfont icon-youjiantou "></text> </text>
					</view>
				</view>
				<view class="moudleItem" v-for="(item,index)  in moduleList" :key="index">
					<view class="itemTop">
						<view class="itemL">
							<view class="productName">
								{{item.cardName}}
							</view>
							<view class="timeTxt">
								有效期：{{item.validEndTime}}
							</view>
						</view>
						<view class="itemR">
							￥{{item.price || '--'}}
						</view>
					</view>
					<view class="itemBottom">
						权益码：{{item.redeemCode}}
					</view>
				</view>
				<view class="moreTxt">
					<!-- 点击更多的时候要请求接口拿取分页数据 -->
					<text class="useTxt" @click="getMore" v-if="moduleList.length < totalElements">更多 <text class="iconfont icon-xiala "></text> </text>
					<text class="useTxt" v-if="moduleList.length == totalElements">数据已加载完 </text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, onMounted, nextTick } from 'vue'
	import api from "@/api/api";
	import dataHandling from '@/util/dataHandling'
	import * as environment from '@/environments/environment'
	const paginationInfo = ref({
			"number": 1,
			"size": 10,
		})
	const totalElements = ref()//总条数
	let moduleList = ref([])
	let dealerId = ref()
	const viewUseRecord = ()=>{
		uni.navigateTo({
			url:'/myPackageA/ticket/alreadyUsed'
		})
	}
	onMounted(() => {


	})
	onLoad(() => {
		// dataHandling.pocessTracking(null, '点击', '进入我的卡券', '进入我的卡券', '2', '0');
	})

	// 分页获取卡券数据
	const getList = (paginationInfo) => {
		uni.showLoading({
			title: '加载中...'
		})
		let obj = {
		"paginationInfo" : paginationInfo,
		"dealerId": dealerId.value, 
		// "dealerId": JSON.parse(JSON.stringify(uni.getStorageSync('hoservice_userId'))), //经销商ID（必填）
		"status": 0 //卡券状态: 0-未使用 1-已赠送 2-已领取 3-已激活 4-已过期/失活
		}
		api.dealerCouponCardList(obj).then(res => {
			uni.hideLoading()
			if (res.success) {
				moduleList.value = moduleList.value.concat(res.data.list)
			    totalElements.value =  res.data.paginationInfo.totalElements
			} else {
				// uni.showToast({
				// 	title:res['message']
				// })
			}
		})
	}
	const getMore = ()=>{
		if(moduleList.value.length < totalElements.value){
			paginationInfo.value.number += 1
			paginationInfo.value.size = 10
			getList(paginationInfo.value)
		}
	}
	onShow(()=>{
		moduleList.value = []
		paginationInfo.value = {
			"number": 1,
			"size": 10,
		}
		dealerId.value = JSON.parse(JSON.stringify(uni.getStorageSync('cffp_userInfo'))) ? JSON.parse(JSON.stringify(uni.getStorageSync('cffp_userInfo'))).dealerId :''
		console.log('dealerId.value',dealerId.value);
		getList(paginationInfo.value)
	})
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';

	.container {
		box-sizing: border-box;
		background-color: rgba(235, 239, 247, 1);
		padding-top:30rpx;
		.moduleBox {
			box-sizing: border-box;
			/* #ifdef H5 */
			margin-top: 30rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			// margin-top: 135rpx;
			/* #endif */
			padding: 0 20rpx;

			.module-content {
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx 15rpx;
				border-radius: 10rpx;
			}

			.moudleHeader {
				@include flex(center, space-between);
				margin-bottom: 20rpx;

				.headerLeft {
					.bigTxt {
						font-size: 32rpx;
					}

					.smallTxt {
						margin-left: 5rpx;
						font-size: 26rpx;
						color: $system-auxiliary-deepgray;
					}
				}

				.headerRight {
					.useTxt {
						font-size: 26rpx;
						color: $system-auxiliary-deepgray;
					}

					.icon-youjiantou {
						font-size: 28rpx;
						color: $system-auxiliary-deepgray;
					}
				}
			}

			.moudleItem {
				background-color: rgba(206, 14, 45,.05);
				padding: 30rpx 20rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.itemTop {
					@include flex(center, space-between);
					margin-bottom: 10rpx;

					.productName {
						margin-bottom: 10rpx;
						font-size: 32rpx;
						max-width: 400rpx;
						/* 关键：单行省略号 */
						white-space: nowrap;
						/* 不换行 */
						overflow: hidden;
						/* 隐藏溢出内容 */
						text-overflow: ellipsis;
						/* 溢出部分用省略号表示 */
					}

					.timeTxt {
						font-size: 26rpx;
						color: $system-auxiliary-deepgray;
					}

					.itemR {
						font-size: 28rpx;
					}
				}

				.itemBottom {
					border-top: 1px solid $system-main-color4;
					font-size: 34rpx;
					color: $system-main-color;
					padding-top: 10rpx;
					margin-top: 15rpx;
					position: relative;

					&::before {
						content: '';
						width: 22rpx;
						height: 22rpx;
						border-radius: 50%;
						position: absolute;
						left: -5%;
						top: -14%;
						background-color: #fff;
					}

					&::after {
						content: '';
						width: 22rpx;
						height: 22rpx;
						border-radius: 50%;
						position: absolute;
						right: -5%;
						top: -14%;
						background-color: #fff;
					}
				}
				
			}
			.moreTxt{
				@include flex(center, center);
				color: $system-auxiliary-deepgray;
				.useTxt{
					font-size: 28rpx;
				}
				.icon-xiala{
					font-size: 26rpx;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>