<template>
	<view class="CouponTemplate">
		<view class="coupon-item">
			<view class="coupon-left-rigth">
				<view class="coupon-left">
					<view class="tags" v-if="item.time.is_new">新</view>
					<view class="coupon-img" v-if="item.type.value!== 2">
						<!-- <image src="/static/images/coupon-quan.png" v-if="item.type.value === 1" mode="widthFix" /> -->
						<image class="image-icon" src="/static/images/coupon-ti.png" v-if="item.type.value === 3" mode="widthFix" />
						<image class="image-icon" src="/static/images/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 class="coupon-to-used" v-if="item.status.status !== 3"  @click="couponDetailGo(item.coupon_grant_id)">	去使用 </view>
				</view>
			</view>
			<view class="check-all" v-if="item.coupon_count>2" @click="couponMoreListGo(item.coupon_id)">
				查看全部{{item.coupon_count}}张优惠券 <uni-icons type="arrowright" size="16" color="#cacaca"></uni-icons>
			</view>
			<!-- 已使用未使用标识 -->
			<image class="used" v-if='item.status.status === 2' src="/static/images/has_used.png" mode="widthFix" />
			<image class="used" v-if="item.status.status === 3" src="/static/images/has_un_used.png" mode="widthFix" />
			<!-- <view class="has-used-bg" v-if="item.status.status === 2 || item.status.status === 3"></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 {

			};
		},
		methods:{
			couponDetailGo(id) {
				// this.$router.push({name: 'CouponDetail', query: {id: id}})
				uni.navigateTo({
					url:'/pages/property/coupon/detail?id='+id
				})
			},
			couponMoreListGo(id) {
				// this.$router.push({name:'CouponMoreList', query:{id: id}})
				uni.navigateTo({
					url:  '/pages/property/coupon/couponMore?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$padding:20rpx;
	.coupon-item {
		margin: $padding $padding;
		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,iVBORw0KGgoAAAANSUhEUgAAArcAAADeCAYAAAAn+SjMAAAXTUlEQVR4nO3deYxd51nH8d9z7jarx7sd28mkdpuWLonSDZRIhFbJAEKg8gcqiOWPFv5BanGrgkCqqFhLU6mARCX+aIVQQgX8kaqogsatEtoqIW3VgtMlNKFubCde4m28zH7vedDZ7r0znpl44ng87znfT2T73HPPuct778l9nvc8533N3XWt/OihzRra8wUb3PZWNUaGFNVNFllvd+9f9EW3tczzLHru/MZy6/r3z1Z5d92i53HvPc3iB5LHrr6des+X3u7d122QdJt4yTZx9shxdzl7Ti+W4+769HHS28X7aveeJ1nvnd52aufrO/Jk/zi/T53udum/3X062T7FfWrn6/Lt8sdzX5C8vXgbH5Y0ma+LF++bvs92vk/fa022KV5jsk9yvyWPtdB77+n2HSku9vXsPWshWy+TLHt8j9u9fWwhfZzkOayv7TxekGw+29d3KvuWzcn9/4r3Y+MTswIAAOhzTcGtv/C199nWN35arbEBWaTsj73sfsD6cmn63JyGtg+s19P6uWe+bZsPvHXxyqXH1BqSvpWSu2wxunofvyqP6/3jUjw/1ZecFYlWf0IYyxdljksSuG7SGXeTvWS99ydqSxO4brLX6W3Xl4wtm8D1JWfel7StlsClyVt6u92X0HXyZElpYuVFcud5EpXfds1LPp/dZwtZMpVKErT5/LGSf+ezRC592mR5Ln+8eVn+nHG6frZ729P9iwRutlgmGQOA9VFf7Vn86KHdtuUnvmd77tkmqxHQYoO7Cd/PWmubas217LGWF/lqvKHhV7ITR/p6uPrE1DI3FluxM2JpkrTSY62WTC3ZxhdlStew/1XJ2DI3FiVj3jv7Vjx294za1Wff0r9j7519U3G2rj85WyWB6z5e7L0zecslcEvPvqnvTJRWSOCWnH1LH7qTJW/SCglcb5/FyVl/Qrc4gesleAv5WbEiqVzorV+awFm+XVycRVOawHmR3C2XwOX3JQlbmrylN1ZN4EjesJGsGNz6i0/8nt1yz6fUGIrSnloAyxwoa6jrARbpSyFshfWr7LIO1vpsweREJG/r5UYncKskZys+3tIzaf3rrrF8ctHitZZPFqvWUj6pvgTumssnE/EayyeLx11D+aT6ErjVyieL9VclcKuUT6Z3JGWIc1Ln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');
			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%;
			background-color: pink;
			height: 20rpx;
			color: green;
			position: absolute;
			bottom: 0;
		}

		.tags {
			background-image: linear-gradient(to right, #e93340, #e93340);
			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: $main-color-light, $alpha: .2);
				padding: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;

				.image-icon {
					width: 90rpx;
				}
			}

			.coupon-left-title {
				width: 100%;
				color: $main-color;
				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% - 140rpx);

				.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, $main-color, $main-color-light);
					background-image: linear-gradient(to right, #e93340, #e93340);
					color: #Fff;
					display: inline-block;
					padding: 4rpx 14rpx;
					border-radius: 4rpx;
					opacity: .8;
				}
			}

			.coupon-to-used {
				// background-image: linear-gradient(to left, $main-color, $main-color-light);
				background-image: linear-gradient(to right, #e93340 40%,  #f85b05 20%, #e93340 40%);
				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>
