<template>
	<view class="index">
		<com-navbar :title="title" :titleStyle="{ color: '#000000', fontSize: '32rpx' }" />
		<view class="index-content" v-if="useCouponList.length && couponLoseList.length">
			<view class="index-content-item" v-for="(item,index) in useCouponList">
				<view class="index-content-item-nav baiyin-flex baiyin-flex-c-b">
					<text></text>
					<view>可用优惠券{{cantotal}}</view>
				</view>
				<view class="index-content-item-qu" @click="optionData.type === 'pay'?jump(item):null">
					<image class="index-content-item-qu-bg" src="@/static/icon/xy01.png" mode=""></image>
					<view class="index-content-item-qu-bl">
						<text class="index-content-item-qu-bl-tl">满减优惠券</text>
						<view class="index-content-item-qu-bl-lk">
							<view class="index-content-item-qu-bl-lk-t">
								<text>￥</text>
								<text>{{item.fullSubtraction}}</text>
								优惠券
							</view>
							<view class="index-content-item-qu-bl-lk-b">有效期：{{item.effectiveTime | formatDate}}-{{item.failureTime | formatDate}}</view>
						</view>
						<template v-if="optionData.type === 'pay'">
							<view class="index-content-item-qu-bl-rk">
								<view class="index-content-item-qu-bl-rk-a">订单金额满</view>
								<view class="index-content-item-qu-bl-rk-b">{{item.minUsed}}元</view>
								<view class="index-content-item-qu-bl-rk-c">可使用</view>
								<view class="index-content-item-qu-bl-rk-d">当前可使用</view>
							</view>
						</template>
						<template v-if="optionData.type === 'coupon'">
							<view class="index-content-item-qu-bl-rk">
								<view class="index-content-item-qu-bl-rk-a index-content-item-qu-bl-rk-axl">订单金额满</view>
								<view class="index-content-item-qu-bl-rk-b index-content-item-qu-bl-rk-bxl">{{item.minUsed}}元</view>
								<view class="index-content-item-qu-bl-rk-c index-content-item-qu-bl-rk-cxl">可使用</view>
								<view class="index-content-item-qu-bl-rk-d index-content-item-qu-bl-rk-dxl">去使用</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="index-content-item" v-if="couponLoseList.length">
				<view class="index-content-item-nav index-content-item-navx baiyin-flex baiyin-flex-c-b">
					<text></text>
					<view>不可用优惠券{{couponLoseList.length}}</view>
				</view>
				<view class="index-content-item-qu" v-for="(info,ix) in couponLoseList">
					<image class="index-content-item-qu-bg" src="@/static/icon/xy02.png" mode=""></image>
					<view class="index-content-item-qu-bl">
						<text class="index-content-item-qu-bl-tl index-content-item-qu-bl-tlx">满减优惠券</text>
						<view class="index-content-item-qu-bl-lk">
							<view class="index-content-item-qu-bl-lk-t index-content-item-qu-bl-lk-tx">
								<text>￥</text>
								<text>{{info.fullSubtraction}}</text>
								优惠券
							</view>
							<view class="index-content-item-qu-bl-lk-b index-content-item-qu-bl-lk-bx">
								有效期：{{info.effectiveTime | formatDate}}-{{info.failureTime | formatDate}}</view>
						</view>
						<view class="index-content-item-qu-bl-rk">
							<view class="index-content-item-qu-bl-rk-a index-content-item-qu-bl-rk-ax">订单金额满</view>
							<view class="index-content-item-qu-bl-rk-b index-content-item-qu-bl-rk-bx">{{info.minUsed}}元</view>
							<view class="index-content-item-qu-bl-rk-c index-content-item-qu-bl-rk-cx">可使用</view>
							<view class="index-content-item-qu-bl-rk-d index-content-item-qu-bl-rk-dx">不可用</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="diagram">
			<image src="@/static/icon/qst.png" mode=""></image>
			<view class="">
				暂无优惠券
			</view>
		</view>
	</view>
</template>

<script>
	import {couponListGet,userCouponList,userCouponListLose} from '../../api/my/index.js'
	export default {
		data() {
			return {
				scrollTopHeader: 0,
				optionData: {},
				title: '',
				queryParams:{
					// pageNum:1,
					// pageSize:10,
					deleteStatus:0,
					useStatus:0	
				},//优惠券有效参数
				useCouponList:[],//可使用的优惠券列表
				cantotal:0,
				loseParams:{
					// pageNum:1,
					// pageSize:10,
					deleteStatus:1,
					useStatus:1
				},
				couponLoseList:[],
				loseTotal:0
			};
		},
		onLoad(option) {
			let self = this;
			self.optionData = option;
			console.log(option)
			self.initial();
			self.getCoupon()
			self.getLoseCoupon()
		},
		methods: {
			async getCoupon(){
				let that = this
				const back_data = await userCouponList(that.queryParams)
				console.log(back_data,'优惠券')
				const {code,rows,total} = back_data
				that.cantotal = total
				if(total > 0){
					that.useCouponList =rows
				}
			},
			async getLoseCoupon() {
				let that = this
				const back_data = await userCouponListLose(that.loseParams)
				console.log(back_data, '失效优惠券')
				const {
					code,
					rows,
					total
				} = back_data
				that.loseTotal = total
				if (total > 0) {
					that.couponLoseList = rows
				}
			},
			
			initial() {
				let self = this;
				switch (self.optionData.type) {
					case 'coupon': //优惠券
						self.title = '优惠券';
						break;
					case 'pay': //支付
						self.title = '确认支付';
						break;
				}
			},
			jump(data) {
				uni.$emit('payInfo',data)
				// 获取所有页面栈实例列表
				// let pages = getCurrentPages();

				// // 上一页页面实例
				// let prevPage = pages[pages.length - 2];

				// // 修改上一页data里面的times参数值为100
				// prevPage.$vm.times = 100;

				//uni.navigateTo跳转的返回，默认1为返回上一级
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f7f8f9;
	}
</style>
<style lang="scss" scoped>
	.index {
		&-content {
			margin: 24rpx 20rpx;
			width: calc(100% - 20rpx * 2);

			&-item {
				margin-bottom: 30rpx;

				&-nav {
					margin-bottom: 20rpx;

					>text {
						display: inline-block;
						width: 6rpx;
						height: 36rpx;
						background: #2c66ff;
						border-radius: 3rpx;
						margin-right: 10rpx;
					}

					>view {
						font-size: 28rpx;
						font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
						font-weight: 500;
						color: #333333;

						>text {
							color: #2c66ff;
						}
					}
				}

				&-nav:last-child {
					margin-bottom: 0rpx;
				}

				&-navx {
					>text {
						background: #666666;
					}
				}

				&-qu {
					width: 710rpx;
					height: 200rpx;
					background: #ffffff;
					box-shadow: 1rpx 1rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
					border-radius: 16rpx;
					overflow: hidden;
					margin-bottom: 20rpx;
					position: relative;

					&-bg,
					&-bl {
						width: 710rpx;
						height: 200rpx;
					}

					&-bg {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
					}

					&-bl {
						position: relative;

						>text,
						>view {
							position: absolute;
						}

						&-tl {
							font-size: 20rpx;
							font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
							font-weight: 400;
							color: #4384ff;
							top: 4rpx;
							left: 62rpx;
						}

						&-tlx {
							color: #666666;
						}

						&-lk {
							bottom: 20rpx;
							left: 20rpx;

							&-t {
								font-size: 30rpx;
								font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
								font-weight: 400;
								color: #333333;

								>text:nth-child(1) {
									font-size: 40rpx;
									font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
									font-weight: 500;
									color: #2c66ff;
								}

								>text:nth-child(2) {
									font-size: 72rpx;
									font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
									font-weight: bold;
									color: #2c66ff;
									margin-right: 20rpx;
								}
							}

							&-tx {
								color: #999999;

								>text:nth-child(1) {
									color: #999999;
								}

								>text:nth-child(2) {
									color: #999999;
								}
							}

							&-b {
								font-size: 20rpx;
								font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
								font-weight: 400;
								color: #333333;
							}

							&-bx {
								color: #999999;
							}
						}

						&-rk {
							width: 170rpx;
							height: 200rpx;
							right: 0rpx;
							top: 0rpx;

							>view {
								text-align: center;
							}

							&-a {
								font-size: 20rpx;
								font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
								font-weight: 400;
								color: #ffffff;
								margin-top: 26rpx;
							}

							&-ax {
								color: #999999;
								margin-top: 21rpx;
							}

							&-axl {
								margin-top: 21rpx;
							}

							&-b {
								font-size: 30rpx;
								font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
								font-weight: 500;
								color: #ffffff;
								margin-top: 10rpx;
							}

							&-bx {
								color: #666666;
								margin-top: 5rpx;
							}

							&-bxl {
								margin-top: 5rpx;
							}

							&-c,
							&-d {
								font-size: 20rpx;
								font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
								font-weight: 400;
								color: #ffffff;
								margin-top: 10rpx;
							}

							&-cx {
								color: #999999;
								margin-top: 5rpx;
							}

							&-cxl {
								margin-top: 5rpx;
							}

							&-d {
								font-weight: 500;
								margin-top: 21rpx;
							}

							&-dx {
								width: 120rpx;
								border: 1rpx solid #999999;
								margin: 0 calc((100% - 120rpx - 2rpx) / 2);
								height: 44rpx;
								line-height: 44rpx;
								border-radius: 10rpx;
								color: #999999;
								margin-top: 17rpx;
							}

							&-dxl {
								width: 120rpx;
								height: 44rpx;
								line-height: 44rpx;
								margin: 0 calc((100% - 120rpx) / 2);
								background: #ffffff;
								border-radius: 10rpx;
								color: #4486ff;
								background-color: #ffffff;
								margin-top: 17rpx;
							}
						}
					}
				}
			}
		}
		.diagram {
			text-align: center;
			margin-top: 335rpx;
		
			>image {
				width: 396rpx;
				height: 243rpx;
			}
		
			>view {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #444444;
			}
		}
	}
</style>
