<template>
	<view class="page-container">
		<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
		<ContainerLoading :loadingVisible="loadingState" style="height: 90vh;" @doRefresh="doRefreshList">
		<!-- #endif -->
			<!-- #ifdef MP-BAIDU -->
			<ContainerLoading :loadingVisible="loadingState" style="height: 90vh;" @doRefresh="doRefreshList">
			<!-- #endif -->
				<view class="order-box">
					<block v-for="(item,index) in packageList" :key="index">
						<view class="package-content">
							<!-- 标题和标签 -->
							<view class="package-header">
								<text class="package-title">{{item.orderTitle}}</text>
								<text class="package-tag">{{item.mode=='1'?'退回':'使用'}}</text>
							</view>
							<view class="package-counts">
								<view class="counts-label">{{item.description}}</view>
							</view>
							<!-- 次数信息 -->
							<view class="package-counts">
								<view class="package-counts-item">
									<text class="counts-label">剩余数量:</text>
									<text class="counts-value mr-10">{{item.itemCount}}</text>
									<text class="counts-label">使用数量:</text>
									<text class="counts-value">{{item.itemUseCount}}</text>
								</view>
								<view class="package-counts-item">
									<text class="counts-label">创建时间:</text>
									<text class="counts-label">{{item.gmtCreate}}</text>
								</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="hasMore"></uni-load-more>
				</view>
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			</ContainerLoading>
			<!-- #endif -->
		<!-- #ifdef MP-BAIDU -->
		</ContainerLoading>
		<!-- #endif -->
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import ContainerLoading from '@/components/container-loading.vue'
	import InvoiceApi from '@/common/js/net/InvoiceApi';
	export default {
		components: {
			ContainerLoading
		},
		setup() {},
		data() {
			return {
				packageList: [], //套餐包使用详情列表
				pageData: {
					page: 1,
					rows: 10,
					packageOrderId: 0
				}, //检索参数
				loadingState: 'loading', //加载状态
				listRefreshTrig: false, //list刷新状态
				isLoadMore: false, //加载更多的状态
				hasMore: 'more', //是否有更多数据
				msgType: 'error',
				msgHint: '',
				id: '',
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "详情",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			const _self = this
			let id = options.id
			let orderId = options.oId
			this.id = id
			this.pageData.packageOrderId = orderId
			if (this.id !== undefined && this.id !== '' && this.pageData.packageOrderId !== undefined && this.pageData
				.packageOrderId !== '') {
				this.doRefreshList()
			} else {
				setTimeout(() => {
					_self.doBackPage()
				}, 1000)
				this.loadingState = 'error'
			}
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.doLoadMore()
		},
		methods: {
			doBackPage() {
				this.msgHint = '数据有误,请稍后重试'
				this.msgType = 'error'
				this.$refs.msg.open()
				setTimeout(() => {
					uni.navigateBack()
				}, 1200)
			},
			//刷新列表
			doRefreshList() {
				console.log('正在刷新...')
				const _self = this
				_self.listRefreshTrig = true
				_self.loadingState = 'loading'
				_self.hasMore = 'more'
				_self.pageData.page = 1
				_self.isLoadMore = false
				_self.doGetMinePackageList(true)
			},
			//加载更多
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				const _self = this
				if (_self.isLoadMore || _self.hasMore == 'noMore') {
					return
				}
				_self.isLoadMore = true
				_self.pageData.page = ++_self.pageData.page
				_self.doGetMinePackageList(false)
			},
			//获取我的联系人列表 isRefresh false 加载更多  true 刷新
			doGetMinePackageList(isRefresh) {
				const _self = this
				_self.packageList = isRefresh ? [] : _self.packageList
				_self.loadingState = isRefresh ? 'loading' : ''
				InvoiceApi.doGetMinePackageUseDetail(_self.id, _self.pageData)
					.then(res => {
						console.log(res)
						uni.stopPullDownRefresh()
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.packageList = _self.packageList.concat(res.rows)
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = _self.packageList.length < res.total ? 'more' : 'noMore'
					})
					.catch(err => {
						uni.stopPullDownRefresh()
						_self.loadingState = 'error'
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = 'more'
					})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.order-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		width: 94vw;
	}




	/* 内容区域 */
	.package-content {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.02);
		width: 95%;
		padding: 16rpx;
	}

	.package-content:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	/* 标题和标签 */
	.package-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.package-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.package-tag {
		background-color: #f0f9ff;
		color: #0084ff;
		font-size: 24rpx;
		border-radius: 32rpx;
		padding: 0rpx 20rpx;
	}

	/* 价格和有效期 */
	.package-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.package-price {
		font-size: 32rpx;
		font-weight: bold;
		color: $red-color;
	}

	.package-validity {
		font-size: 24rpx;
		color: #999;
	}

	/* 次数信息 */
	.package-counts {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.counts-label {
		font-size: 24rpx;
		color: #999;
	}

	.counts-value {
		font-size: 24rpx;
		color: #333;
	}

	/* 操作按钮 */
	.package-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.action-button {
		padding: 8rpx 24rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		flex: 1;
		text-align: center;
		background-color: $gray-color-light;
	}
</style>