<template>
	<view class="content">
		<view class="coupons">
			<view class="red_envelope"></view>
			<view class="title">满减券每日限量</view>
			<view class="list">
				<view class="list_box" v-for="(item,index) in discount_for_a_amount" :key="index">
					<view class="l_left"><text>￥</text>{{item.discount}}</view>
					<view class="l_cont">
						<view class="lt_top">满{{item.for_a_amount}}可用</view>
						<view class="lt_footer">消费后次日领</view>
					</view>
					<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
					<view class="l_right l_right_y" v-else>已领取</view>

				</view>
				<!-- <view class="list_box1">
					<view class="l_left"><text>￥</text>5</view>
					<view class="l_cont">
						<view class="lt_top">满20可用</view>
						<view class="lt_footer">神券商家可有 消费后次日领</view>
					</view>
					<view class="l_right"></view>
				</view> -->
			</view>
		</view>
		<view class="coupons coupons1">
			<view class="title">代金券天天领</view>
			<view class="red_envelope"></view>
			<view class="list">
				<view class="list_box2" v-for="(item,index) in deduction" :key='index' >
					<view class="l2_top"><text>￥</text>{{item.price}}</view>
					<view class="l2_title">无门槛</view>
					<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
					<view class="l_right l_right_y" v-else>已领取</view>
				</view>
			</view>
		</view>
		<view class="coupons">
			<view class="title">全场促销折扣券</view>
			<view class="list">
				<view class="list_box" v-for="(item,index) in discount" :key="index">
					<view class="l_left">{{(item.precent/10).toFixed(0)}}<text>折</text></view>
					<view class="l_cont">
						<view class="lt_top">指定商品折上折</view>
						<view class="lt_footer">神券商家可有 消费后次日领</view>
					</view>
					<view class="l_right" v-if="!item.got" @click="receive_coupon(item.id)">立即领券</view>
					<view class="l_right l_right_y" v-else>已领取</view>
				</view>
				<!-- <view class="list_box1">
					<view class="l_left"><text>￥</text>5</view>
					<view class="l_cont">
						<view class="lt_top">满20可用</view>
						<view class="lt_footer">神券商家可有 消费后次日领</view>
					</view>
					<view class="l_right"></view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { coupon } from '@/api/coupon.js'
	let discount_for_a_amount = ref([]) // 满减券
	let deduction = ref([]) // 抵扣券
	let discount = ref([]) // 折扣券
	const data_get_coupon = async () => {
		let user = uni.getStorageSync('user')
		let { coupon: data } : any = await coupon.get_coupon({ user_id: user.id })
		discount_for_a_amount.value = data.filter((item : any) => {
			return item.type === 'discount_for_a_amount'
		})
		deduction.value = data.filter((item : any) => {
			return item.type === 'deduction'
		})
		discount.value = data.filter((item : any) => {
			return item.type === 'discount'
		})
	}
	const receive_coupon = async (id : any) => {
		console.log(id, 'id')
		let user = uni.getStorageSync('user')
		let coupon_id = id
		console.log({ user_id: user.id, coupon_id })
		let data = await coupon.post_coupon({ user_id: user.id, coupon_id })
		console.log(data)
		data_get_coupon()
	}
	onMounted(() => {
		data_get_coupon()
	})
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		width: 100%;
		background: url('@/static/my/bg.jpg') no-repeat transparent;
		background-size: 100% 100%;
		padding: 20rpx;

		.coupons {
			margin-top: 50rpx;
			position: relative;
			border-radius: 15rpx;
			background-color: #fff;
			padding: 10rpx;
			width: 100%;

			.red_envelope {
				width: 220rpx;
				height: 220rpx;
				background: url('@/static/my/red_envelope.png') no-repeat transparent;
				background-size: 100% 100%;
				position: absolute;
				top: -50rpx;
				left: -25rpx;
				z-index: 1;
			}

			.title {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #305def;
				font-weight: bold;
			}

			.list {
				position: relative;
				z-index: 1;
				padding: 10rpx;

				.list_box {
					padding-left: 10rpx;
					padding-right: 10rpx;
					margin-top: 20rpx;
					align-items: center;
					height: 132rpx;
					background: url('@/static/my/gr.png') no-repeat transparent;
					background-size: 100% 100%;
					color: #305def;
					display: flex;
					justify-content: space-between;

					.l_left {
						font-weight: bold;
						font-size: 50rpx;

						text {
							font-size: 20rpx;
						}
					}

					.l_cont {
						.lt_top {
							font-size: 30rpx;
							font-weight: bold;
						}

						.lt_footer {
							font-size: 24rpx;
						}
					}

					.l_right {
						width: 180rpx;
						padding: 10rpx 20rpx;
						background-color: #305def;
						color: #fff;
						text-align: center;
						border-radius: 30rpx;
					}
				}

				.list_box1 {
					margin-top: 20rpx;
					align-items: center;
					height: 132rpx;
					padding: 10rpx;
					background: url('@/static/my/grc.png') no-repeat transparent;
					background-size: 100% 100%;
					color: #7e91b4;
					display: flex;

					.l_left {
						margin-left: 30rpx;
						font-weight: bold;
						font-size: 50rpx;

						text {
							font-size: 20rpx;
						}
					}

					.l_cont {
						margin-left: 40rpx;

						.lt_top {
							font-size: 30rpx;
							font-weight: bold;
						}

						.lt_footer {
							font-size: 24rpx;
						}
					}

					.l_right {
						margin-left: 90rpx;
						width: 110rpx;
						height: 100rpx;
						background: url('@/static/my/over.png') no-repeat transparent;
						background-size: 100% 100%;
					}
				}
			}
		}

		.coupons1 {
			.red_envelope {
				width: 150rpx;
				height: 150rpx;
				background: url('@/static/my/logo.png') no-repeat transparent;
				background-size: 100% 100%;
				position: absolute;
				top: -50rpx;
				left: -10rpx;
				z-index: 1;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
			}

			.list_box2 {
				margin-bottom: 20rpx;
				margin-right: 25rpx;
				width: 200rpx;
				height: 180rpx;
				background: url('@/static/my/bg1.png') no-repeat transparent;
				background-size: 100% 100%;
				color: #305def;
				display: flex;
				flex-direction: column;
				align-items: center;

				.l2_top {
					margin-top: 10rpx;
					font-size: 40rpx;
					font-weight: bold;

					text {
						font-size: 20rpx;
					}
				}

				.l2_title {
					font-size: 24rpx;
				}
				.l_right {
					margin-top: 30rpx;
					width: 140rpx;
					padding: 10rpx 20rpx;
					background-color: #305def;
					color: #fff;
					font-size: 16rpx;
					text-align: center;
					border-radius: 30rpx;
				}
				

				.l2_footer {
					font-size: 24rpx;
					margin-top: 30rpx;
				}

				&:nth-child(3n) {
					margin-right: 0rpx;
				}

			}
		}
		.l_right_y{
			background-color: #92ACFF !important;
		}
	}
</style>