<template>
	<!-- 基础赠送设置切换 -->
	<view class="foundation">
		<view :class="[switchTop==1?'active':'']" @click="switchTop =1">
			基础设置
		</view>
		<view :class="[switchTop==2?'active':'']" @click="switchTop=2">
			赠送设置
		</view>
	</view>
	<view class="content">
		<view class="content1">
			<view>
				折扣名称
			</view>
			<input type="text" placeholder="填写名称" />
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				折扣（%）
			</view>
			<input type="text" placeholder="填写名称" />
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				使用门槛
			</view>
			<input type="text" placeholder="隔多少元，可用 " />
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				优惠券类型
			</view>
			<radio-group @change="radioChange" style="margin-top: 16rpx;">
				<radio style="transform:scale(0.7)">单次折扣券</radio>
				<radio style="transform:scale(0.7)">储值折扣券</radio>
			</radio-group>
			<view class="siwtichStyle">
				<span>最大抵扣金额</span>
				<switch color="#FFCC33" style="transform:scale(0.7)" />
			</view>
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				抵扣规则
			</view>
			从最高价开始抵扣
			<view class="siwtichStyle">
				<span>可抵扣件数</span>
				<switch color="#FFCC33" style="transform:scale(0.7)" />
			</view>
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				有效期类型
			</view>
			领券后有效期内可用
			<view class="siwtichStyle">
				<span>有效期（天）</span>
				<input type="text" placeholder="填写天数 " />
			</view>
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				隔天生效
			</view>
			<input type="text" placeholder="隔多少天，生效 " />
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content1">
			<view>
				总发放数量
			</view>
			<input type="text" placeholder="填写数量" />
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
		</view>
		<view class="content2">
			<view class="">
				可用门店
			</view>
			<view class="">
				<span>进本店可用</span>
				<span>></span>
			</view>
		</view>
		<view class="content2">
			<view class="">
				可用商品
			</view>
			<view class="">
				<span>指定商品可用</span>
				<span>></span>
			</view>

			<view class="siwtichStyle">
				<!-- <span>选择商品</span> -->
				<!-- <view class=""> -->
				<span>选择商品</span>
				<input type="text" placeholder="选择指定商品 " />
				<span>></span>
				<!-- </view> -->
			</view>
		</view>
		<view class="content2">
			<view class="">
				
			</view>
			<view class="">
				<span>更多设置</span>
				<span>></span>
			</view>
		</view>
		<view class="content2">
			<view>
				指定时间段可用
			</view>
			<radio-group @change="radioChange" style="margin-top: 16rpx;">
				<radio style="transform:scale(0.7)">全时段可用</radio>
				<radio style="transform:scale(0.7)">指定时段可用</radio>
			</radio-group>
		</view>
		<view class="content2">
			<view class="">
				发放方式
			</view>
			<view class="">
				<span>用户不可自行领取</span>
				<span>></span>
			</view>
		</view>
		<view class="content1">
			<view>
				每人领取限量
			</view>
			不限量
			<hr style="margin-top: 24rpx;color: #E5E5E5;" />
			<view class="siwtichStyle2">
				<span>不限量</span>
				<switch color="#FFCC33" style="transform:scale(0.7)" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		toRef,
		watch
	} from 'vue';
	let switchTop = ref(1)
</script>

<style lang="scss">
	.foundation {
		width: 694rpx;
		height: 70rpx;
		background: #E6F0FF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		align-items: center;
		margin: 36rpx auto;

		>view {
			text-align: center;
			width: 344rpx;
			height: 56rpx;
			line-height: 56rpx;
			color: #318AFE;
		}

		.active {
			margin: auto;
			width: 344rpx;
			height: 56rpx;
			background: #318AFE;
			color: #fff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
	}

	.content {
		width: 750rpx;
		background: #F9F9F9;
		padding: 32rpx;

		.content1 {
			background-color: #fff;
			padding: 32rpx 24rpx;

			>input {
				margin-top: 16rpx;
			}

			>view {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.siwtichStyle {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				width: 646rpx;
				height: 104rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}
			.siwtichStyle2 {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				width: 646rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}
		}

		.content2 {
			padding: 32rpx 24rpx;
			margin: 32rpx 0;
			box-sizing: border-box;
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			>view:first-child {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;

			}

			>view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			>view:nth-child(3) {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				background: #FFFFFF;
				width: 646rpx;
				height: 154rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}

			.siwtichStyle {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				width: 646rpx;
				height: 104rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}
		}
	}
</style>