<template>
	<div class="coupon-sel">
		<radio-group class="radio-group" name="coupon" @change="checkChange">
            <!-- 会员优惠 -->
			<div class="sel-list flex-center-between" v-if="discountArr.indexOf('member') > -1">
				<div class="sel-tit">
					<radio value="1" :checked="memberCheck" />
					<span class="dis-pormpt">您是3级会员，享9折优惠</span>
				</div>
				<div class="app-price app-size-28">-￥5</div>
			</div>
            <!-- 优惠券优惠 -->
			<div class="sel-list" v-if="discountArr.indexOf('coupon') > -1">
				<div class="sel-tit">
					<radio value="2" />
					<span class="dis-pormpt">您有优惠券可用，请选择</span>
				</div>
				<div class="coupon-wrap" v-show="selIndex == 2">
					<div class="coupon-list" v-for="(item, index) in 2" :key="index" @click="couponChange(index + 1)">
						<div class="list-img">
							<!-- 已过期 -->
							<template v-if="couponSelInx && couponSelInx == (index + 1)">
								<img src="../static/images/coupon/is-check.png" alt mode="widthFix" />
							</template>
							<template v-else>
								<img src="../static/images/coupon/no-check.png" alt mode="widthFix" />
							</template>
						</div>
						<!-- 列表 -->
						<div class="list-det">
							<div class="list-det-left">
								<div class="price-wrap">
									<span>￥</span>
									<span class="price">1000</span>
								</div>
								<div class="full-reduc app-size-28">满100可使用</div>
							</div>
							<div class="list-det-right">
								<div class="coupon-message">
									<div class="app-color-2">优惠券</div>
									<div>适用：全品类</div>
									<div>有效至：2020-10-11</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</radio-group>
	</div>
</template>

<script>
export default {
	name: 'coupon-sel',
	props: {
		// 可使用优惠列表
		discountArr: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			mainColor: 'green',
			memberCheck: false,
			selIndex: null,
			couponSelInx: null
		}
	},
	computed: {
	},
	mounted() {
		if (this.discountArr.indexOf('member') > -1) {
			this.selIndex = 1
		    this.memberCheck = true
		}
	},
	methods: {
		checkChange(e) {
			this.selIndex = e.detail.value
		},
		// 优惠券选择
		couponChange(index) {
			this.couponSelInx = this.couponSelInx == index ? null : index
		}
	}
}
</script>

<style lang="scss" scoped>
	.sel-list {
		.sel-tit {
            @include disFlex(center, flex-start);
            margin-top: 30px;
            .dis-pormpt {
                font-size: 28px;
                color: $fontColor2;
                margin-left: 6px;
            }
        }
        &:first-child .sel-tit {
            margin-top: 0;
        }
	}
	// 优惠券
	.coupon-wrap {
        padding-top: 20px;
		.coupon-list {
			position: relative;
			margin-bottom: 6px;
			.list-det {
				width: 100%;
				@include disFlex(center, space-between);
				position: absolute;
				top: 0;
				left: 0;
				.list-det-left {
					padding: 20px 0 20px 36px;
					width: 210px;
					color: $mainColor;
					.price-wrap {
						margin-bottom: 6px;
						font-size: 26px;
						.price {
							font-size: 60px;
							font-weight: bold;
							line-height: 1;
						}
					}
				}
				.list-det-right {
					width: calc(100% - 280px);
					margin-left: 22px;
					@include disFlex(center, space-between);
					padding: 20px 26px 20px 0;
					.coupon-message {
						color: $fontColor3;
						& > div {
							margin: 6px 0;
						}
					}
				}
			}
		}
	}
	// 修改uni-app组件
	/deep/.uni-radio-input-checked {
		background-color: $mainColor !important;
		border-color: $mainColor !important;
	}
</style>
