<!-- 优惠券图标 -->
<template>
	<view class="container">
		<view class="icon icon1" v-if="props.item.couponType == 1">
			<view class="top">
				<text class="i">￥</text>
				<text class="num">{{ props.item.discountAmount }}</text>
			</view>
			<view class="intro">
				<text class="t">满{{ props.item.fullAmount }}可用</text>
			</view>
		</view>
		<view class="icon icon2" v-if="props.item.couponType == 2">
			<view class="top">
				<text class="i">{{ props.item.discountNum }}件</text>
				<text class="num">商品兑换</text>
			</view>
			<view class="intro">
				<text class="t">满{{ props.item.fullAmount }}可用</text>
			</view>
		</view>
		<view class="icon icon3" v-if="props.item.couponType == 3">
			<view class="top">
				<text class="num">{{ props.item.discountRate }}折</text>
			</view>
			<view class="intro">
				<text class="t">满{{ props.item.fullAmount }}可用</text>
			</view>
		</view>
		<view class="icon icon2" v-if="props.item.couponType == 4">
			<view class="top">
				<text class="i">第二件</text>
				<text class="num">半价券</text>
			</view>
		</view>
		<view class="icon icon2" v-if="props.item.couponType == 6">
			<view class="top">
				<text class="i">买一送</text>
				<text class="num">一券</text>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	item: {
		type: Object,
		default: {}
	}
});
</script>

<style scoped lang="scss">
$color: #ff1c1c;
.container {
	width: 100%;
	height: 100%;
	padding: 0;
	.icon {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&.icon1 {
			.top {
				.i {
					color: $color;
					font-size: 24upx;
					font-weight: bold;
				}
				.num {
					color: $color;
					font-size: 72upx;
					font-weight: bold;
				}
			}
		}
		&.icon2 {
			.top {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.i {
					color: $color;
					font-size: 34upx;
					font-weight: bold;
				}
				.num {
					color: $color;
					font-size: 34upx;
					font-weight: bold;
				}
			}
		}
		&.icon3 {
			.top {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.i {
					color: $color;
					font-size: 34upx;
					font-weight: bold;
				}
				.num {
					color: $color;
					font-size: 52upx;
					font-weight: bold;
				}
			}
		}

		.intro {
			display: flex;
			justify-content: center;
			.t {
				font-size: 22upx;
				color: #999;
			}
		}
	}
}
</style>
