<template>
	<view>
		<view class="" v-for="(row,index) in lists" :key="index">
			<view  class="coupon-item" :class="row.voucher_state_id == 1501? '':'h'">
				<view class="coupon-item-left">
					<view class="coupon-item-info">
						<view class="coupon-item-money">¥{{row.voucher_price}}</view>
						<view class="coupon-item-ask">{{row.voucher_subtotal == 0?'无门槛':sprintf(__('满￥%s可用'), row.voucher_subtotal)}}</view>
					</view>
					<view class="coupon-item-content">
						<view class="coupon-left-top">
							<view class="coupon-item-name">{{row.activity_name}}</view>
							<view class="coupon-item-tip">{{__('订单结算支付时可用')}}</view>
							<view v-if="row.item_id" class="coupon-item-tag">{{__('指定商品可用')}}</view>
						</view>
						<view class="coupon-left-bottom">
							<view class="coupon-item-time">{{__('有效日期：')}}{{ row.voucher_start_date }}{{__('至')}}{{ row.voucher_end_date }}</view>
						</view>
					</view>
				</view>
			
				<view class="coupon-item-right" v-if="row.voucher_state_id == 1501 && 1">
					<view class="coupon-item-botton" @click.stop="userEvent"  :data-index="(index)">
						{{__('去使用')}}
					</view>
				</view>
				
				<view class="coupon-item-right" v-if="row.voucher_state_id == 1501 && 0">
					<view class="coupon-item-botton">
						{{__('未生效')}}
					</view>
				</view>
				
				<view class="coupon-item-right" v-if="row.voucher_state_id == 1502">
					<view class="coupon-item-botton">
						{{__('已用')}}
					</view>
				</view>
				<view class="coupon-item-right" v-if="row.voucher_state_id == 1503">
					<view class="coupon-item-botton">
						{{__('过期')}}
					</view>
				</view>
				
				<view class="coupon-item-right" v-if="row.voucher_state_id == 1504">
					<view class="coupon-item-botton">
						{{__('收回')}}
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		name: "lx-coupon",
		props: {
			lists:{
				type: Array,
				default: []
			},
			status: {
				type: Boolean,
				default: true
			},
			preferential: {
				type: Number,
				default: 0
			},
			content: {
				type: Number,
				default: 0
			},
			end_date: {
				type: String,
				default: '2023-05-26 12:00:00'
			}
		},
		methods:{
			userEvent(e){
				let that = this;
				var index = e.currentTarget.dataset.index;
				var voucher = this.lists[index]

				if(voucher.activity_on_is_off)
				{
					that.$.navigateTo({
						url: "/activity/coupon/detail?cid=" + voucher.activity_id + "&couponItemId=" + voucher.id
					})	
				}
				else
				{
					that.$.navigateTo({
						url: "/member/product/coupon?store_id=" + voucher.store_id + "&voucher_item_id=" + voucher.item_id
					})	
				}
				
			}
		}
	}
</script>

<style lang="scss">
  @import '@/styles/_variables.scss';

	.coupon-item {
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		&.h {
			filter: grayscale(100%);
		}

		.coupon-item-left {
			display: flex;
			align-items: center;

			.coupon-item-info {
				width: 170rpx;
				height: 170rpx;
				background-image: url("data:image/png;base64, ");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

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

				.coupon-item-money::first-letter {
					font-size: 24rpx;
					font-weight: normal;
				}

				.coupon-item-ask {
					font-size: 26rpx;
				}
			}

			.coupon-item-content {
				color: #333;
				font-size: 28rpx;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				flex-shrink: 0;

				.coupon-left-top {
					.coupon-item-name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.coupon-item-tip {
						font-size: 24rpx;
						color: #888888;
					}
					.coupon-item-tag {
						font-size: 24rpx;
						color: $default-skin-bg;
					}
				}

				.coupon-left-bottom {
					.coupon-item-time {
						font-size: 24rpx;
						color: #888888;
					}
				}
			}
		}

		.coupon-item-right {
			.coupon-item-botton {
				background: $default-skin-bg;
				color: #fff;
				border-radius: 50rpx;
				padding: 12rpx 24rpx;
				font-size: 24rpx;
				flex-shrink: 0;
			}
		}
	}
</style>