<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 -->
				<!-- <scroll-view scroll-y style="height: 90vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
				@scrolltolower="doLoadMore"> -->
				<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.packageName}}</text>
								<text
									class="package-tag">{{item.packageInfoAppDTO.packageType=='MATERIAL'?'写材料':'全托管'}}</text>
							</view>

							<!-- 价格和有效期 -->
							<view class="package-info">
								<rich-text class="package-price"
									:nodes="moneyTxt(12,14,item.packageTotalMoney/100)"></rich-text>
								<text class="package-validity"
									v-if="item.packageExpireTime != ''">有效期至:{{item.packageExpireTime}}</text>
							</view>

							<!-- 次数信息 -->
							<view class="package-counts">
								<view class="package-counts-item">
									<text class="counts-label">剩余次数:</text>
									<text class="counts-value mr-10">{{item.packageTotalSurplusCount}}</text>
									<text class="counts-label">总次数:</text>
									<text class="counts-value">{{item.packageTotalCount}}</text>
								</view>
								<view class="package-counts-item">
									<text class="counts-label">下单时间:</text>
									<text class="counts-label">{{item.gmtCreate}}</text>
								</view>
							</view>

							<!-- 操作按钮 -->
							<view class="package-actions">
								<view class="action-button mr-10" :data-item="item" @click="goCreate">去使用
								</view>
								<view class="action-button" :data-item="item" @click="goDetail">查看详情</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="hasMore"></uni-load-more>
				</view>
				<!-- </scroll-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 ProApi from '@/common/js/net/projectApi.js'
	import UserApi from '@/common/js/net/UserApi.js'

	import {
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			ContainerLoading
		},
		setup() {},
		data() {
			return {
				packageList: [], //联系人列表
				loadingState: 'loading',
				isLoadMore: false,
				listRefreshTrig: false,
				pageData: {
					page: 1,
					rows: 10,
				},
				hasMore: 'more',
				msgHint: '',
				msgType: 'error',
				msgShow: false,
				urgent: false,
				allPrice: 0,
				materialPrice: 0
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "套餐包",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doGetPrice()
			this.doRefreshList()
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.doLoadMore()
		},
		methods: {
			moneyTxt,
			//创建
			goCreate(e) {
				const _self = this
				const item = e.currentTarget.dataset.item
				if (item.packageTotalSurplusCount > 0) {
					const price = item.packageInfoAppDTO.packageType == "MATERIAL" ? _self.materialPrice : _self
						.allPrice
					uni.redirectTo({
						url: '/pages/copyright/createProjectInfo/createProjectInfo?type=' + item.packageInfoAppDTO
							.packageType + '&price=' + price + '&isUrgent=false&pId=' + item.packageInfoId,
					})
				} else {
					_self.msgHint = '该套餐包已无剩余次数'
					_self.msgType = 'error'
					_self.$refs.msg.open()
				}
			},
			//详情
			goDetail(e) {
				const item = e.currentTarget.dataset.item
				uni.navigateTo({
					url: '/pages/mine/mineAccount/minePackageRecordDetail/minePackageRecordDetail?id=' + item
						.modifier + '&oId=' + item.packageOrderId
				})
			},
			doGetPrice() {
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				ProApi.doGetPrice()
					.then(res => {
						uni.hideLoading()
						console.log(res)
						res.projTypes.forEach(el => {
							if (el.type == 'ALL') {
								_self.allPrice = el.price
							} else if (el.type == 'MATERIAL') {
								_self.materialPrice = el.price
							}
						});
						_self.urgent = res.additional.urgent
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = '数据有误,请刷新页面'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			//刷新列表
			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' : ''
				UserApi.doGetMinePackageRecord(_self.pageData)
					.then(res => {
						uni.stopPullDownRefresh()
						console.log(res)
						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>
	.content-container {
		height: 93vh;
	}


	.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>