<!-- 优惠券item -->
<template>
	<view class="item">
		<view class="header">
			<text class="title" v-if="item.couponType == 5">消费赠券</text>
			<text v-else>{{ item.title }}</text>
			<text class="id">ID:83713</text>
		</view>
		<view class="content">
			<slot></slot>
		</view>
		<view class="total-info">
			<view class="item">
				<text class="info">
					<template v-if="item.giveNum == -10086">无限</template>
					<template v-else>{{ item.giveNum }}</template>
				</text>
				<text class="title">总发放</text>
			</view>
			<view class="item" v-if="item.couponType == 5">
				<text class="info">{{ item.giftNum }}</text>
				<view class="title">
					<text class="t">已赠送</text>
					<text class="l" @click="toDetail(item)">详情</text>
				</view>
			</view>
			<template v-else>
				<view class="item">
					<text class="info">{{ item.giftNum }}</text>
					<text class="title">已领取</text>
				</view>
				<view class="item">
					<text class="info">{{ item.useNum }}</text>
					<text class="title">已使用</text>
				</view>
			</template>
			<view class="item">
				<text class="info">
					<template v-if="item.giveNum == -10086">无限</template>
					<template v-else>{{ item.leftNum }}</template>
				</text>
				<text class="title">剩余</text>
			</view>
		</view>
		<view class="footer-wrap">
			<view class="btn">
				<u-button shape="circle" @click="emits('delete', item)">删除</u-button>
			</view>
			<view class="btn">
				<u-button shape="circle" type="primary" @click="emits('editor', item)">编辑</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import go from '@/commons/utils/go.js';

const props = defineProps({
	item: {
		type: Object,
		default: {}
	}
});

const emits = defineEmits(['delete', 'editor']);

// 去领取详情
function toDetail(item) {
	go.to('PAGES_COUPON_GET_DETAIL', { couponId: item.couponGiftList[0].couponId });
}
</script>

<style scoped lang="scss">
.item {
	background-color: #fff;
	border-radius: 20upx;
	padding: 28upx;
	.header {
		display: flex;
		justify-content: space-between;
		.title {
			font-size: 32upx;
			color: #333;
		}
		.id {
			font-size: 24upx;
			color: #999;
			background-color: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 8upx;
			border-radius: 4upx;
		}
	}
	.content {
		margin-top: 28upx;
		padding: 20upx;
		background-color: #f8f8f8;
		border-radius: 12upx;
	}
	.total-info {
		display: flex;
		.item {
			flex: 1;
			display: flex;
			gap: 12upx;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.info {
				font-weight: bold;
				font-size: 28upx;
				color: #333;
			}
			.title {
				font-size: 24upx;
				color: #999;
				display: flex;
				gap: 28upx;
				.t {
					font-size: 24upx;
					color: #999;
				}
				.l {
					font-size: 24upx;
					color: #318afe;
				}
			}
		}
	}
	.footer-wrap {
		display: flex;
		justify-content: flex-end;
		gap: 28upx;
		.btn {
			width: 200upx;
		}
	}
}
</style>
