<template>
	<view class="content">
		<view class="card">
			<view class="item">
				<view class="lable">优惠券名称</view>
				<view class="value"> 
					<up-input placeholder="填写名称" border="none" clearable ></up-input>	
				</view>
			</view>
			<view class="item">
				<view class="lable">使用门槛</view>
				<view class="value"> 
					<view>满</view><input placeholder="填写金额" border="none"></input><view>元</view>，<view>减</view><input placeholder="填写金额" border="none"></input><view>元</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="item">
				<view class="lable">有效期类型</view>
				<view class="value"> 
					<up-radio-group v-model="saveData.type">
						<up-radio name="1" label="领券后有效期内可用" style="margin-right: 30rpx;"></up-radio>
						<up-radio name="0" label="固定有效期范围内可用"></up-radio>
					</up-radio-group>
				</view>
			</view>
			<view class="item">
				<view class="lable">有效期（天）</view>
				<view class="value"> 
					<up-input placeholder="填写天数" border="none"></up-input>	
				</view>
			</view>
			<view class="item">
				<view class="lable">隔天生效<up-icon @click="modalShow(1)" name="question-circle" color="#999" size="20" style="margin-left: 10rpx;"></up-icon></view>
				<view class="value"> 
					<view>隔</view><input placeholder="填写天数" border="none" ></input><view>天生效</view>
				</view>
			</view>
			<view class="item">
				<view class="lable">可用日期</view>
				<view class="value"> 
					 <up-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange" >
					    <up-checkbox
					        :customStyle="{marginBottom: '8px',marginRight: '15px'}"
					        v-for="(item, index) in pageData.value"
					        :key="index"
					        :label="item.name"
					        :name="item.name"
					    >
					    </up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
			<view class="item">
				<view class="lable">指定时间段可用</view>
				<view class="value"> 
					<up-radio-group v-model="saveData.timeType">
						<up-radio name="1" label="全时段可用" style="margin-right: 30rpx;"></up-radio>
						<up-radio name="0" label="指定时段可用"></up-radio>
					</up-radio-group>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="item">
				<view class="lable">总发放数量
				<up-icon @click="modalShow(2)" name="question-circle" color="#999" size="20" style="margin-left: 10rpx;"></up-icon>
				</view>
				<view class="value"> 
					<up-input v-model="saveData.num" placeholder="填写数量" border="none" clearable ></up-input>	
				</view>
			</view>
		</view>
		<view class="bottomPop">
			<button @click="save">保存</button>
		</view>
		
		<up-modal :show="pageData.show" :title="pageData.title" @confirm="pageData.show = false" ></up-modal>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		toRef,
		watch
	} from 'vue';
	const pageData = reactive({
		value: [
			{ name: "周一", },
			{ name: "周二", },
			{ name: "周三", },
			{ name: "周四", },
			{ name: "周五", },
			{ name: "周六", },
			{ name: "周日", },
		],
		title: "",
		show: false,
	})
	const saveData = reactive({
		type: '1',
		timeType: '1',
		num: '',
	})

	let modalShow = ( type ) => {
		if ( type == 1) {
			pageData.title = "领取后0天后的0点0分生效";
		} else {
			pageData.title = "限用户自行领取，（当库存为 0时，集草等活动仍会赠送）";
		}
		pageData.show = true;
	}
	
	let save = () => {
		console.log(saveData.type)
		console.log(saveData.timeType)
	}
	
</script>

<style lang="scss">
	
	.content {
		background: #F9F9F9;
		padding: 32rpx 28rpx 150rpx 28rpx;

		.card{
			padding: 32rpx 24rpx;
			background-color: #fff;
			margin-bottom: 32rpx;
			.item{
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #E5E5E5;
				margin-bottom: 24rpx;
				.lable{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
				}
				.value{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					input{
						width: 150rpx;
						text-align: center;
					}
				}
			}
			.item:last-child{
				border-bottom: none;
				margin-bottom: 0;
			}
		}
		.bottomPop{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			>button {
				width: 530rpx;
				margin: 30rpx 0;
				margin-left: 50%;
				transform: translateX(-50%);
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				background: #318AFE;
				border-radius: 56rpx 56rpx 56rpx 56rpx;
			}
		}
	}
</style>