<template>
	<view class="CouponTemplate">
		<view class="coupon-item">
			<view class="coupon-left-rigth">
				<view class="coupon-left">
					<view class="coupon-img" v-if="item.type.value!== 2">
						<image src="/static/imgs/coupon-ti.png" v-if="item.type.value === 3" mode="widthFix" />
						<image src="/static/imgs/coupon-fu.png" v-if="item.type.value === 1" mode="widthFix" />
					</view>
					<view class="coupon-left-title" v-else>
						<span><span class='money'>{{item.price}}</span> 元</span>
						{{item.type.text}}
					</view>
				</view>
				<view class="coupon-right">
					<view class="coupon-right-left">
						<view class="coupon-right-title ellipsis-2">{{item.title}}</view>
						<view class="coupon-right-date">{{item.time.interval}}</view>
						<view class="coupon-right-des" v-if='item.type.value === 2'>{{item.price_text}}</view>
						<view class="coupon-right-day">剩余{{item.time.expire}}天</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <u-toast ref="uToast" /> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		couponsGrant
	} from '@/apis/interfaces/coupon'
	export default {
		name: "coupon-template",
		props: {
			item: Object,
			showUse:Boolean
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-item {
		margin: 20rpx;
		position: relative;
		z-index: 1;
		color: #fff;
		position: relative;
		overflow: hidden;
		box-shadow: 0 0 14rpx 4rpx rgba($color: #000000, $alpha: .1);
		border-radius: 20rpx;
		.coupon-left-rigth{
			padding: 20rpx;
			background-image: url('data:image/png;base64,[encoded data, 8032 characters]');
			background-position: left;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// height: 240rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
		}
		.has_all{
			width: 100%;
			height: 20rpx;
			color: green;
			position: absolute;
			bottom: 0;
		}

		.tags {
			background-image: linear-gradient(to left, $mian-color, $mian-color-light);
			// background-image: linear-gradient(to right, #f39e17, #f85b05);
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			padding: 2rpx 24rpx;
			font-size: 22rpx;
			border-radius: 20rpx 0 20rpx 0;
		}

		.coupon-left {
			width: 160rpx;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;


			.coupon-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background-color: rgba($color: $mian-color-light, $alpha: .2);
				padding: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;

				image {
					width: 90rpx;
				}
			}

			.coupon-left-title {
				width: 100%;
				color: #e93340;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;

				.money {
					font-size: 50rpx;
					font-weight: bold;
				}
			}
		}

		.coupon-right {
			width: calc(100% - 190rpx);
			height: 100%;
			padding: 10rpx 20rpx 10rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			color: #333;

			.coupon-right-left {
				width: calc(100%);

				.coupon-right-title {
					font-size: 32rpx;
					font-weight: 500;
				}

				.coupon-right-date,
				.coupon-right-des {
					font-size: 24rpx;
					color: #a6a6a6;
					padding-top: 10rpx;
				}

				.coupon-right-day {
					font-size: 22rpx;
					margin-top: 16rpx;
					// background-image: linear-gradient(to left, $mian-color, $mian-color-light);
					background-image: linear-gradient(to right, #f39e17, #f85b05);
					color: #Fff;
					display: inline-block;
					padding: 4rpx 14rpx;
					border-radius: 4rpx;
					opacity: .8;
				}
			}

			.coupon-to-used {
				background-image: linear-gradient(to left, $mian-color, $mian-color-light);
				// background-image: linear-gradient(to right, #f39e17, #f85b05);
				color: #Fff;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				font-size: 26rpx;
			}
		}

		.used {
			width: 150rpx;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			// bottom: 50%;
			// margin-bottom: -80rpx;
			z-index: 1000;
			opacity: .8;
		}

		.has-used-bg {
			background-color: rgba($color: #fff, $alpha: 0.6);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 300;
		}
		
		.check-all{
			width: 100%;
			background-color: #fff;
			border-top: solid 1rpx #f7f7f7;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: $padding;
			font-size: 24rpx;
			color: #555;
			position: relative;
			z-index: 3;
		}
	
		&::after{
			content: '111';
			position: absolute;
			z-index: -1;
		}
	}
</style>
