<template>
	<!-- 20221018 -->
	<view class="receive-coupon-layer-cn">

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

			<!-- 浮层组件 -->
			<ty-layer-pop-up v-if="show" @overlayClick="close">

				<!-- 浮层内容 -->
				<view @click.stop="">

					<!-- 主内容板块 高度 上下内边距+首尾文案高度+优惠券块上下边距 40*2+80+40+60+60+index*140+(index-1)*20 =  -->
					<view class="layer-content margin-lr-75 padding-40 radius-20"
						:style="{'margin-top': 'calc(50vh - 150rpx - ' + 80 * list.length + 'rpx)'}">
						<!-- 头部文案 -->
						<view class="text-center text-ff">
							<view class="line-height-80 text-60">{{text}}</view>
							<view class="line-height-40 text-32">{{subText}}</view>
						</view>

						<!-- 优惠券列表 -->
						<view class="margin-top-30">
							<view class="margin-top-20" v-for="(item,index) in list" :key="index">
								<!-- 单张优惠券 140rpx-->
								<view class="padding-tb-15 flex align-center bg-ff">
									<!-- 优惠券左侧 -->
									<view class="flex flex-direction align-center" style="width: 125rpx;">
										<view class="flex align-start justify-center">
											<text class="text-24 text-main">¥</text>
											<text class="line-height-70 text-44 text-main">{{item.price}}</text>
										</view>
									</view>

									<!-- 优惠券右侧 -->
									<view class="border-left flex-one padding-lr-20">
										<text class="line-height-40 text-28 text-cut-one">{{item.name}}</text>
										<view class="margin-top-10">
											<view class="line-height-30 text-20 text-98 text-cut-one">
												· {{item.brief}}
											</view>
											<view class="line-height-30 text-20 text-98 text-cut-one">
												· 满{{item.limit_price}}元可用
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 尾部文案 -->
						<view class="margin-top-30 height-60 line-30 text-center">
							<text class="text-24 text-ff">{{footerText}}</text>
						</view>

					</view>

					<!-- 关闭按钮 -->
					<view>
						<view class="margin-top-40 text-center">
							<text class="tyIcon-guanbi1 text-ff text-48" @click="close"></text>
						</view>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>

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

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

<script>
	import common from '@/components/hzjc/utils/common.js';
	export default {
		props: {
			// 是否显示该浮层
			show: {
				type: Boolean,
				default: false
			},
			// 获得的优惠券列表
			list: {
				type: Array,
				default: []
			},
			// 主标题文案
			text: {
				type: String,
				default: '您好！初次见面'
			},
			// 副标题文案
			subText: {
				type: String,
				default: '送您几张优惠券随便花花吧～'
			},
			// 尾部文案
			footerText: {
				type: String,
				default: '不知不觉这么多优惠券\n放入了您的账户'
			}
		},

		data() {
			return {

			}
		},

		methods: {
			/**
			 * 关闭浮层
			 * @date 2022-10-18
			 */
			close() {
				// 更新显示状态为false
				this.$emit("update:show", false)
			}
		}
	}
</script>

<style scoped>
	.layer-content {
		background: linear-gradient(to left top, var(--auxiliary), var(--auxiliaryGradient));
	}

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