<template>
	<!-- 20221017 -->
	<view class="discount-coupon-cn">

		<!-- 组件内容 -->
		<view class="cn-content">

			<!-- 单张优惠券 -->
			<view class="position-relative margin-30 shadow-grey">

				<!-- 已使用、已过期、不可选择状态加透明度 -->
				<view class="padding-tb-20 flex align-center bg-ff"
					:style="data.status == 2 || data.status == 3 || data.is_able == 0 ? 'opacity: 0.5;' : ''">
					<!-- 左侧 -->
					<view class="flex flex-direction align-center" style="width: 140rpx;">
						<view class="flex align-start justify-center">
							<text class="text-24 text-main">¥</text>
							<text class="line-height-50 text-50 text-main">{{data.price}}</text>
						</view>
						<view class="margin-top-20 text-20 text-main">满{{data.limit_price}}元可用</view>
					</view>

					<!-- 右侧 -->
					<view class="flex-one padding-lr-30 border_left">
						<text class="line-height-40 text-30 text-cut-one">{{data.name}}</text>
						<view class="margin-top-10">
							<view class="line-height-30 text-20 text-98 text-cut-one">
								<text v-if="data.brief">· {{data.brief}}</text>
							</view>
							<view class="margin-top-30 line-height-30 text-20 text-98 text-cut-one">·
								{{data.validity_text}}
							</view>
						</view>
					</view>

					<!-- 右侧插槽 -->
					<view class="" style="width: 130rpx;">
						<slot></slot>
					</view>
				</view>

				<!-- 底部插槽 -->
				<slot name="bottom"></slot>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 优惠券数据
			data: {
				type: Object,
				default: () => {}
			}
		},

		data() {
			return {

			}
		},

		methods: {

		}
	}
</script>

<style scoped>
	.border_left {
		border-left: 1rpx dashed #e6e6e6;
	}

	.btn.active {
		border: 1rpx solid var(--main);
		color: var(--main);
	}
</style>
