<template>
	<view :class="[AppTheme]" class="coupon">

		<!-- #ifdef APP-PLUS -->
		<u-sticky offsetTop="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offsetTop="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="uTabs_list">
					<u-tabs ref="uTabs" :list="tabTitle" :activeStyle="{
			        color: primary,
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" lineWidth="30" :scrollable="false" :lineColor="primary" :current="cur" @click="hadle">
					</u-tabs>
				</view>
			</u-sticky>

			<swiper class="swiper_item" :current="cur" @change='swiperchange'>
				<swiper-item v-for="(item,index) in tabTitle" :key="index">
					<view :scroll-y="true" class="coupon_list" @scrolltolower="onbuntin()">
						<view @click="godetile(item2.id)" class="activity_item" v-for="(item2, index2) in cuntlist"
							:key="index2">
							<view class="coupon_item_title">
								<view class="title_icon">
									<u-icon name="chrome-circle-fill" :color="primary" size="30"></u-icon>
									<view style="padding: 0rpx 10rpx;font-weight: 650;">{{ item2.cate_name }}
									</view>
								</view>
								<view class="ticket_status" v-if="item2.status_pay=='已支付'">
									<text style="margin-right: 20rpx;">{{item2.status_pay}}</text>
								</view>
								<view class="ticket_status1" v-else-if="item2.status_pay=='退款中'">
									<text style="margin-right: 20rpx;">{{item2.status_pay}}</text>
								</view>
								<view class="ticket_status2" v-else>
									<text style="margin-right: 20rpx;">{{item2.status_pay}}</text>
								</view>
							</view>
							<view class="activity_item_box">
								<view class="activity_item_top">
									<u--image :showLoading="true" :src="item2.activity_img" width="100rpx"
										height="100rpx" @click="click"></u--image>
								</view>
								<view class="activity_item_bottom">
									<!-- 标题 -->
									<view class="expiration_reminder">{{ item2.activity_title }}</view>
									<!-- 总价 -->
									<view class="activity_price">
										<span v-if="item2.adult_num>0">成人票：{{item2.adult_num}}张</span> <span
											v-if="item2.child_num>0"
											style="padding-left: 10rpx;">儿童票：{{item2.child_num}}张</span>，共 <view
											class="activity_price_p1">{{ item2.order_money }}</view> 元
									</view>
									<!-- 时间 -->
									<view class="activity_id">{{ retushorttime(item2.start_time) }}
										~{{ retushorttime(item2.end_time) }}</view>
									<view class="activity_refund ">
										<view v-if="item2.status_pay=='已支付'" @click.stop="refund(item2)"
											class="action-btn recom  text-primary  border-primary">退款
										</view>
										<view v-else-if="item2.status_pay=='未支付'" @click.stop="gopay(item2)"
											class="action-btn recom  text-primary  border-primary">
											<u-icon name="zhifubao" label='去付款' :color="primary" size="18" labelSize="14"></u-icon>
											
										</view>
										<view class="action-btn recom  text-primary  border-primary">
											<u-icon name="file-text" label='详情' :color="primary" size="18" labelSize="14"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore v-if="cuntlist.length>0" :line="true" :status="status" />
						<view v-if="cuntlist.length===0" style="padding-top: 100px;">
							<u-empty text="暂时无活动" mode="list"></u-empty>
						</view>
					</view>
					<view style="height: 2rpx;" class=""></view>
				</swiper-item>
			</swiper>
			<payment ref="payment" :channel="5" :alipay="true" :weixinpay="true" :zhtpay="true"></payment>
	</view>
</template>
<script>
	import mineApi from '@/api/mall/index.js'
	import untiljs from '@/common/until.js'
	export default {
		components: {},
		data() {
			return {
				status: 'loadmore',
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				tabTitle: [{
					name: '全部'
				}, {
					name: '未支付'
				}, {
					name: '已支付'
				}],
				cur: 0,
				piindex: 0,
				cuntlist: [],
				ifnextindex: true,
				p: 1,
			}
		},
		computed: {},
		methods: {
			swiperchange(e) {
				let that = this
				that.cur = e.detail.current
				let params = {
					p: that.piindex,
					status_pay: that.cur
				}
				mineApi.myacunton(params).then(res => {
					if (res.status === 1) {
						that.cuntlist = res.data

					} else {
						that.ifnextindex = false
						that.cuntlist = [];
					}
				})
			},
			refund(item) {
				var that = this;
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['returnReminder']], tmplIdsone, function() {
						that.refund2(item)
					});
				} else {
					that.refund2(item)
				}
			},
			//  报名订单退款
			refund2(item) {
				mineApi.refund({
					order_sn: item.order_sn
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.status == 1) {
						item.status_pay = '退款中';
					}

				})
			},


			gopay(item) {

				let that = this
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess']], tmplIdsone, function() {
						that.gopay2(item)
					});
				} else {
					that.gopay2(item)
				}
			},
			gopay2(item) {
				let that = this;
				let parms = {
					id: item.id,
					money: item.order_money
				};
				that.$refs.payment.payopen(parms);
			},
			//返回指定格式时间
			retushorttime(time) {
				let date = time
				var t = date.substr(0, 10)
				return t
			},
			hadle(e) {
				console.log(e, "hadle")
				let that = this
				that.cur = e.index
				let params = {
					p: that.piindex,
					status_pay: that.cur
				}
				mineApi.myacunton(params).then(res => {
					if (res.status === 1) {
						that.cuntlist = res.data

					} else {
						that.ifnextindex = false
						that.cuntlist = [];
					}
				})
			},
			getindex(pindex, status) {
				let that = this
				that.status = 'loading'
				let params = {
					p: pindex,
					status_pay: status
				}
				mineApi.myacunton(params).then(res => {
					if (res.status === 1) {
						let culist = res.data
						that.cuntlist = []
						culist.forEach(item => {
							that.cuntlist.push(item)
						})
						that.piindex = pindex
						if (culist.length == 10) {
							that.status = 'loadmore'
						} else {
							that.status = 'nomore'
						}
					} else {
						that.ifnextindex = false
						that.status = 'nomore'
					}
				})
			},
			onbuntin() {
				this.getindex(this.piindex + 1, this.cur)
			},
			godetile(itemid) {
				uni.navigateTo({
					url: '/pagesB/pages/activorderdails/activorderdails?itemid=' + itemid
				})
			}
		},
		onLoad() {
			this.getindex(this.piindex + 1, this.cur, )
		},
		onShow() {},
		onPullDownRefresh() {
			console.log("下拉刷新成功")
			this.getindex(1, this.cur)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			console.log('到底了');
			let that = this
			that.status = 'loading'
			that.p++
			let params = {
				p: that.p,
				status_pay: that.cur
			}
			mineApi.myacunton(params).then(res => {
				console.log(res, "resres++")
				if (res.status === 1) {
					console.log("获取成功")
					let culist = res.data
					culist.forEach(item => {
						that.cuntlist.push(item)
					})
					if (culist.length == 10) {
						that.status = 'loadmore'
					} else {
						that.status = 'nomore'
					}

				} else {
					console.log("获取失败")
					that.p--
					that.ifnextindex = false
					that.status = 'nomore'
				}
			})
		},
	}
</script>
<style lang="scss">
	page {
		height: 101%;
	}

	.coupon {
		position: relative;
		width: 100%;
	}

	.action-btn {
		width: 150upx;
		height: 55rpx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 55rpx;
		font-size: $font-sm + 2upx;
		background: #fff;
		border-radius: 100px;
		display: flex;
		align-items: center;
		justify-content: center;

		&:after {
			border-radius: 100px;
		}

		&.recom {
			background: #fff9f9;
			border-width: 1rpx;
			border-style: solid;
		}
	}

	.uTabs_list {
		height: 44px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		background-color: #ffffff;
		width: 100%;
		z-index: 99;

		.uTabs_item {
			padding: 20rpx 0;
			flex: auto;
			text-align: center;
		}
	}

	.my {
		width: 100%;
		margin-bottom: 18rpx;
		margin-top: -10rpx;
		padding-bottom: 30rpx;
	}

	.swiper_item {
		height: calc(100vh - 44px);

		.coupon_list {
			overflow-y: auto;
			height: 101%;

			.activity_item {
				margin: 15rpx;
				z-index: 10;
				box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
				border-radius: 10rpx;
				padding: 20rpx 25rpx;
				background-color: #ffffff;

				.coupon_item_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15rpx 0;

					.title_icon {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 29rpx;
						color: #000;
						line-height: 35rpx;

						u-icon {
							margin-right: 15rpx;
						}
					}

					.ticket_status {
						display: flex;
						width: 100rpx;
						justify-content: space-around;
						align-items: center;
						font-size: 24rpx;
					}

					.ticket_status1 {
						display: flex;
						color: red;
						width: 100rpx;
						justify-content: space-around;
						align-items: center;
						font-size: 24rpx;
					}

					.ticket_status2 {
						display: flex;
						color: #d3d3d3;
						width: 100rpx;
						justify-content: space-around;
						align-items: center;
						font-size: 24rpx;
					}
				}

				.activity_item_box {
					display: flex;
					align-items: flex-start;

					.activity_item_top {
						position: relative;
						background-size: cover;
						width: 187rpx;
						border-radius: 7.5rpx;

						.activity_time {
							position: absolute;
							right: 0;
							top: 25rpx;
							background-color: rgba(0, 0, 0, 0.4);
							z-index: 7;
							padding: 10rpx 25rpx;
							color: #ffffff;
							border-radius: 15rpx 0 0 15rpx;
							font-size: 26rpx;
							letter-spacing: 2.5rpx;
						}
					}

					.activity_item_bottom {

						width: 100%;
						background-color: #ffffff;
						border-radius: 0 0 15rpx 15rpx;
						padding: 0rpx 0rpx 0rpx 20rpx;

						.expiration_reminder {
							color: #333;
							font-size: 30rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.activity_price {
							font-size: 24rpx;
							color: #999;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin: 20rpx 0;

							.activity_price_p1 {
								font-size: 26rpx;
								color: red;
								padding: 0rpx 10rpx;
								font-weight: 700;
							}
						}

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

						.activity_refund {
							margin-top: 30rpx;
							margin-bottom: 0;
							display: flex;
							justify-content: flex-end;
							align-items: center;

							.refund {
								width: 150rpx;
								text-align: center;
								line-height: 60rpx;
								font-size: 28rpx;
								color: #fff;
								border-radius: 30rpx;
							}
						}
					}
				}

			}
		}
	}
</style>
