<template>
	<view class="container" :style="{paddingTop:paddingTop}">
		<!-- #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">
						<text class="useTxt">使用记录 <text class="iconfont icon-youjiantou "></text> </text>
					</view> -->
				</view>
				<view class="moudleItem" v-for="(item,index) in alreadyList" :key="index">
					<view class="itemTop">
						<view class="itemL">
							<view class="productName">
								{{item.cardName}}
							</view>
							<view class="timeTxt">
								激活时间：{{item.activeTime}}
							</view>
						</view>
						<view class="itemR">
							￥{{item.price || '--'}}
						</view>
					</view>
					<view class="itemBottom">
						激活手机号：{{item.recipientMobile?item.recipientMobile :'--'}}
					</view>
				</view>
				<view class="moreTxt">
					<!-- 点击更多的时候要请求接口拿取分页数据 -->
					<text class="useTxt" @click="getMore" v-if="alreadyList.length < totalElements">更多 <text class="iconfont icon-xiala "></text> </text>
					<text class="useTxt" v-if="alreadyList.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 '@/util/api'
	import commonHeader from '@/components/commonHeader/commonHeader.vue'
	import dataHandling from '@/util/dataHandling'
	import * as environment from '@/environments/environment'
	import CustomNavbar from '@/components/CustomNavbar/CustomNavbar.vue'
	import { useSafeArea } from '@/mixins/safeAreaMixin'
	const { paddingTop } = useSafeArea()
	const paginationInfo = ref({
			"number": 1,
			"size": 10,
		})
	const totalElements = ref()//总条数
	let alreadyList = ref([])
	let dealerInfo = ref({})
	onMounted(() => {


	})
	onLoad(() => {
		// getList(paginationInfo.value)
		// initShare()
		dataHandling.pocessTracking(null, '点击', '进入我的卡券', '进入我的卡券', '2', '0');
	})
	const initShare = () => {
		let name = uni.getStorageSync('hoservice_name')
		let shareData = {
			title: '邀请您体验金融工具',
			desc: `${name}邀请您免费使用金融工具`,
			imgUrl: `${environment.baseURL}/ydMall/static/img/share.png`,
			// path: '/myPackageA/rights/rightsActive',
			link: `${environment.baseURL}/ydMall/#/myPackageA/financial/toolsList?orderFlag=3`
		}
		dataHandling.wxJsSdkConfig(shareData, '金融工具')
	}
	// 分页获取卡券数据
	const getList = (paginationInfo) => {
		uni.showLoading({
			title: '加载中...'
		})
		let obj = {
		"paginationInfo" : paginationInfo,
		"dealerId": dealerInfo.value.id, 
		// "dealerId": JSON.parse(JSON.stringify(uni.getStorageSync('hoservice_userId'))), //经销商ID（必填）
		"status": 3 //卡券状态: 0-未使用 1-已赠送 2-已领取 3-已激活 4-已过期/失活
		}
		api.dealerCouponCardList(obj).then(res => {
			uni.hideLoading()
			if (res.success) {
				alreadyList.value = alreadyList.value.concat(res.data.list)
			    totalElements.value =  res.data.paginationInfo.totalElements
			} else {
				dataHandling.showToast(res['message'])
			}
		})
	}
	const getMore = ()=>{
		if(alreadyList.value.length < totalElements.value){
			paginationInfo.value.number += 1
			paginationInfo.value.size = 10
			getList(paginationInfo.value)
		}
	}
	onShow(()=>{
		alreadyList.value = []
		paginationInfo.value = {
			"number": 1,
			"size": 10,
		}
		dealerInfo.value = JSON.parse(JSON.stringify(uni.getStorageSync('dealerInfo')))
		getList(paginationInfo.value)
	})
</script>

<style lang="scss" scoped>
	@import '../../static/css/variable.scss';

	.container {
		box-sizing: border-box;
		background-color: rgba(235, 239, 247, 1);

		.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: 30rpx;
					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>