<template>
	<view class="coupon">
		<view class="coupon_text" @click="show = true">
			<view class="flex items-center">
				<u--text bold margin="0 6px 0 0" text="优惠券" align="right"></u--text>
				<!-- <u-tag v-if="currentcoupon.id" text="已选择" plain size="mini" type="error"></u-tag> -->
			</view>

			<u--text v-if="currentcoupon.id" type="error" :text="`- ￥${currentcoupon.coupon.price}`"
				align="right"></u--text>

			<u--text v-else type="info" text="请选择" align="right" suffixIcon="arrow-right"></u--text>
		</view>

		<u-popup bgColor="#fff" :round="22" :show="show" @close="show = false" @open="available = 1">
			<view class="pop">

				<view class="tabs">
					<view class="tab" @click="available = 1" :class="{ active: available === 1 }">可用优惠券 ({{ on.length }})
					</view>
					<view class="tab" @click="available = 0" :class="{ active: available === 0 }">不可用优惠券 ({{ off.length }})
					</view>
				</view>

				<view v-if="[off, on][available] && [off, on][available].length" class="chooseACoupon"
					:class="{ sideEffects: available === 0 }">

					<view class="item" v-for="item of [off, on][available]" @click="temporaryCurrentcoupon = item">
						<view class="info" :class="{ true: available === 1 }">
							<view class="left">
								<view class="num">
									￥{{ item.coupon.price || 0 }}
								</view>

								<view class="num_info" v-if="item.coupon.full_price || item.coupon.price">
									满{{ item.coupon.full_price }}减{{ item.coupon.price }}
								</view>
							</view>

							<view class="rigth">
								<view class="more">
									{{ item.coupon.name }}
								</view>
								<view class="type">
									类型: <text>{{ ["优惠券", "商品", "分类", "当面付"][item.coupon.coupon_type] }}可用</text>
								</view>
							</view>

							<view v-if="available === 1" class="operation"
								:class="{ active: item.id === temporaryCurrentcoupon.id }">
								<view class="checkbox" style="pointer-events: none;">
									<u-checkbox-group>
										<u-checkbox class="radio" shape="circle" activeColor="#F0250E"
											:checked="item.id === temporaryCurrentcoupon.id"></u-checkbox>
									</u-checkbox-group>
								</view>
								<view class="c"></view>
							</view>
						</view>

						<view class="more_info">
							<view class="top">
								详细信息 <u-icon name="arrow-down" color="#808080"></u-icon>
							</view>

							<view class="cont">
								<text>过期时间：{{ $u.timeFormat(item.end_time, 'yyyy年mm月dd日 hh:MM:ss') }}</text>
							</view>
						</view>
					</view>

				</view>

				<view v-if="[off, on][available] && [off, on][available].length === 0" class="chooseACoupon"
					style="padding: 60rpx 0;">
					<u-empty text="优惠券为空 ~">
					</u-empty>
				</view>

				<view class="btn" @click="confirmationVoucher" v-show="available == 1">
					<view>确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		coupon: {
			type: Array,
			default: () => []
		},
		currentPrice: {
			type: Number | String,
			default: 0
		},
	},
	data() {
		return {
			currentcoupon: {},
			temporaryCurrentcoupon: {},
			available: 1,
			show: false
		}
	},
	watch: {
		currentPrice(newVal) {
			try {
				const coupon = this.coupon.filter(item => {
					return newVal >= Number(item.coupon.full_price)
				}).sort((a, b) => Number(b.coupon.price) - Number(a.coupon.price))[0]

				this.currentcoupon = coupon || {}
				this.temporaryCurrentcoupon = coupon || {}
				this.$emit("update:activeCoupon", this.currentcoupon);
			} catch (e) {
				this.currentcoupon = {}
				this.temporaryCurrentcoupon = {}
				this.$emit("update:activeCoupon", this.currentcoupon);
			}

			if (Number(newVal) < Number(this.currentcoupon?.coupon?.full_price)) {

				this.$u.toast("付款金额发生变化,请重新选择优惠券")

				this.currentcoupon = {}
				this.temporaryCurrentcoupon = {}
				this.$emit("update:activeCoupon", this.currentcoupon);
			}
		}
	},
	computed: {
		on() {
			return this.coupon.filter(item => Number(this.currentPrice) >= Number(item.coupon.full_price))
		},
		off() {
			return this.coupon.filter(item => {
				return Number(this.currentPrice) < Number(item.coupon.full_price)
			})
		},
	},
	methods: {
		confirmationVoucher() {
			this.currentcoupon = JSON.parse(JSON.stringify(this.temporaryCurrentcoupon))
			this.$emit("update:activeCoupon", this.currentcoupon);
			this.show = false
		},
	}
}
</script>

<style  lang="scss" scoped>
.coupon {
	padding: 32rpx 0rpx 20rpx 0;

	.coupon_text {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.pop {

	.tabs {
		width: 100%;
		display: flex;
		padding: 40rpx 0;

		box-shadow: 0 0.3125rem 1.25rem rgba(166, 199, 251, 0.12);
		position: relative;
		z-index: 99999;

		.tab {
			flex: 1;
			text-align: center;

			color: black;
		}

		.active {
			position: relative;

			&::before {
				content: "";

				position: absolute;
				width: 44rpx;
				height: 10rpx;
				border-radius: 100px;

				background: linear-gradient(86deg, #fc5928 0%, #ff7f58 100%);

				bottom: -16rpx;
				left: 0;
				right: 0;

				margin: 0 auto;
			}
		}
	}

	.sideEffects {
		margin-bottom: 0rpx !important;
		height: 680rpx !important;
	}

	.chooseACoupon {
		display: flex;
		flex-direction: column;

		margin-bottom: 80rpx;

		height: 600rpx;
		overflow: auto;
		padding: 42rpx 34rpx;

		.item {
			margin-bottom: 26rpx;
			background-color: white;
			border-radius: 22rpx;
			box-shadow: 0 0.4125rem 2rem 2px rgba(215, 216, 217, 0.49);

			.info {
				display: flex;
				flex: 1;


				padding: 20rpx;

				border-radius: 22rpx 22rpx 0rpx 22rpx;
				position: relative;
				overflow: hidden;

				.left {
					padding: 32rpx 42rpx 32rpx 14rpx;

					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.num {
						background: linear-gradient(90deg, #ff1e00 0%, #fc5420 100%);
						background-clip: text;
						color: transparent;
						font-size: 54rpx;
						font-weight: 600;
						letter-spacing: 2rpx
					}

					.num_info {
						color: #808080;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.rigth {
					z-index: 999;
					font-size: 24rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.time {
						color: black;
						font-weight: 600;
					}

					.type {
						font-size: 24rpx;
						color: #808080;
					}
				}

				.operation {
					position: absolute;
					right: 0;
					width: 17%;
					top: 0;
					bottom: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					color: white;
					font-weight: 600;

					font-size: 32rpx;

					&.active {
						.c {
							&::after {
								background-color: #fc511d !important;
							}
						}
					}

					.c {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;

						transform: translateY(-8%) rotate(8deg);
						transform-origin: bottom left;


						// new
						transform: translateY(-4%) rotate(0deg);
						transform-origin: top left;

						&::after {
							content: "";
							top: 44rpx;
							left: 0;
							position: absolute;
							width: 32rpx;
							height: 32rpx;
							background-color: white;
							border-radius: 100px;

							transform: translateX(-64%);
						}

						// new
						&::after {
							top: 33rpx;
							transform: translateX(-36%);
						}

						// &::before {
						//     content: "";
						//     bottom: 0px;
						//     left: 0;
						//     position: absolute;
						//     width: 32rpx;
						//     height: 32rpx;
						//     background-color: white;
						//     border-radius: 100px;

						//     transform: translateX(-56%) translateY(50%);
						// }
					}
				}
			}

			.true {
				background: linear-gradient(86deg, #FFF 82.7%, rgb(252, 183, 162) 83%, #f8cb00 100%);

				.operation {
					transform: scale(1.1) translateY(0%);

					&.active {
						.c {
							&::after {
								background: white !important;
							}
						}
					}

					.c {
						transform: translateY(-4%) rotate(0deg);
						transform-origin: top left;

						&::after {
							top: 33rpx;
							transform: translateX(-36%);
						}

						// &::before {
						//     content: "";
						//     bottom: 0px;
						//     left: 0;
						//     position: absolute;
						//     width: 32rpx;
						//     height: 32rpx;
						//     background-color: white;
						//     border-radius: 100px;

						//     transform: translateX(-56%) translateY(50%);
						// }
					}
				}
			}

			.more_info {
				padding: 18rpx;
				border-top: 2px dotted #f3f3f3;

				color: #808080;
				font-size: 24rpx;

				.top {
					display: flex;
					align-items: center;
					grid-gap: 12rpx;
					gap: 12rpx;
					display: none;
				}

				.cont {
					// padding: 20rpx 0 0 0;
				}
			}
		}

	}


	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 22rpx 36rpx 12rpx;
		padding: 22rpx 36rpx calc(constant(safe-area-inset-bottom) + 22rpx);
		padding: 22rpx 36rpx calc(env(safe-area-inset-bottom) + 22rpx);
		background: #fff;
		box-sizing: border-box;

		transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
		z-index: 9999;

		&:hover {
			opacity: 0.8;
		}

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 76rpx;
			background: linear-gradient(90deg, rgb(250, 144, 112) 0%, #f8cb00 100%);
			border-radius: 32px;
			font-size: 26rpx;
			font-weight: bold;
			color: #fff;
		}
	}

}

::v-deep {
	.u-checkbox__icon-wrap {
		border-width: 0px !important;
	}
}
</style>
