<template>
	<view class="content">
		<view class="card">
			<view class="item">
				<view class="lable">优惠券名称</view>
				<view class="value"> 
					<up-input v-model="formData.title" placeholder="填写名称" border="none" clearable ></up-input>	
				</view>
			</view>
			<view class="item">
				<view class="lable">使用门槛</view>
				<view class="value"> 
					<view>满</view>
					<input v-model="formData.fullAmount"  @change="formData.fullAmount = $utils.isMoney(formData.fullAmount)" type="digit" placeholder="填写金额" border="none"></input>
					<view>元</view>
					<view v-if="formData.type == 1" style="display: flex;align-items: center;justify-content: flex-start;"> ，<view>减</view> <input v-model="formData.discountAmount" @change="formData.discountAmount = $utils.isMoney(formData.discountAmount)" type="digit" placeholder="填写金额" border="none"></input> <view>元</view> </view>
					
				</view>
			</view>
		</view>
		<view class="card">
			<view class="item">
				<view class="lable">有效期类型</view>
				<view class="value" style="display: flex;flex-direction: column;align-items: flex-start;"> 
					<view>
						<up-radio-group placement="column" v-model="formData.validityType" @change="typeChange('validityType')">
							<up-radio name="fixed" label="领券后有效期内可用"></up-radio>
							<up-radio name="custom" label="固定有效期范围内可用"></up-radio>
						</up-radio-group>
					</view>
					<view class="date"  v-if="formData.validityType=='custom'">
						<!-- {{formData.useStartTime +'—'+ formData.useEndTime}} -->
						<view @click="typeChange('validityType')">{{ formData.validStartTime || '开始时间'}}</view>--
						<view @click="typeChange('validityType')">{{ formData.validEndTime || '结束时间'}}</view>
					</view>
				
				</view>
			</view>
			<view class="item">
				<view class="lable">有效期（天）</view>
				<view class="value"> 
					<input style="width: 100%;text-align: left;padding-left: 20rpx;" v-model="formData.validDays"  @input="formData.validDays = $utils.isNumber(formData.validDays)" type="number" placeholder="填写天数" border="none"></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 v-model="formData.daysToTakeEffect"  @change="formData.daysToTakeEffect = $utils.isNumber(formData.daysToTakeEffect)" type="number" placeholder="填写天数" border="none" ></input><view>天生效</view>
				</view>
			</view>
			<view class="item">
				<view class="lable">可用日期</view>
				<view class="value"> 
					 <up-checkbox-group v-model="formData.userDays" placement="row">
					    <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" style="display: flex;flex-direction: column;align-items: flex-start;">
					<view>
						<up-radio-group v-model="formData.useTimeType" placement="column">
							<up-radio name="all" label="全时段可用" style="margin-right: 30rpx;"></up-radio>
							<up-radio name="custom" label="指定时段可用"></up-radio>
						</up-radio-group>
					</view>
					<view class="time"  v-if="formData.useTimeType=='custom'">
						<view @click="useTimeChange('useStartTime')">{{ formData.useStartTime || '开始时间'}}</view>--
						<view @click="useTimeChange('useEndTime')">{{ formData.useEndTime || '结束时间'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="item">
				<view class="lable">总发放数量
				</view>
				<view class="value"> 
					<input style="width: 100%;text-align: left;padding-left: 20rpx;" v-model="formData.number"  @change="formData.number = $utils.isNumber(formData.number)" placeholder="填写数量" border="none" clearable ></input>	
				</view>
			</view>
		</view>
		<view class="card product" v-if="formData.type == 2">
		
			<view class="item">
				<view class="lable">指定抵扣商品</view>
				<view class="value"> 
					<view class="selectGoods" @tap="selectGoodsOpen">
						<view>
							<view class="title">选择商品</view>
							<view class="goodsName" v-if='!formData.proId'>选择指定商品</view>
							<view class="goodsName" v-else>
								<view class="goodsItem" >
									<view class="productName">{{formData.proName}}</view>
									<!-- <up-input @tap.stop="stop" style="border-bottom: 1rpx solid #666;" v-model="item.num" placeholder="填写数量" border="none"  ></up-input>	 -->
								</view>
							</view>
						</view>
						<up-icon name="arrow-right" color="#9F9F9F" size="22"></up-icon>
					</view>
				</view>
			</view>
		</view>
			
		<view class="bottomPop">
			<button @click="save">保存</button>
		</view>
		<up-datetime-picker
		    :show="pageData.useTimeShow"
			v-model="pageData.useTime"
			mode="time" 
			@cancel="timeCancel"
			@confirm="timeConfirm"
			></up-datetime-picker>
		<my-date-pickerview @confirm="datePickerConfirm" :mode="pageData.mode" ref="datePicker"></my-date-pickerview>
		<up-modal :show="pageData.show" :title="pageData.title" @confirm="pageData.show = false" ></up-modal>
		
		<select-goods ref="goods" @affirm="affirm"></select-goods>
	</view>
</template>
<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad, onShow  } from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js'
	
	import selectGoods from './components/select-goods';
	
	import { addCoupon, updateCoupon } from '@/http/api/coupon.js'
	const pageData = reactive({
		value: [
			{ name: "周一", },
			{ name: "周二", },
			{ name: "周三", },
			{ name: "周四", },
			{ name: "周五", },
			{ name: "周六", },
			{ name: "周日", },
		],
		mode: "",
		title: "",
		show: false,
		useTimeShow: false,
		useTime: "",
		dateType: "",
		sueDateType: "",
	})
	const formData = reactive({
		type: '1',
		title: '',
		fullAmount: null,
		discountAmount: null,
		validityType: 'fixed',
		validStartTime: '',
		validEndTime: '',
		userDays: [],
		useTimeType: 'all',
		useStartTime: '',
		useEndTime: '',
		validDays: '',
		daysToTakeEffect: null,
		number: null,
		
		proId: null,
		proName: null,
	})
	
	let datePicker = ref(null)
	let refTime = ref(null)
	let goods = ref(null)
	
	
	onLoad((options) => {
		if ( options.isType ) {
			formData.type = options.isType;
		} 
		if ( options.type == 'info' ) {
			let itemData = JSON.parse(options.item);
			for (let item in itemData) {
			    formData[item] = itemData[item]
			}
			formData.userDays = formData.userDays.split(",");
		}
	})
	
	/**
	 * 选择商品
	 */
	let selectGoodsOpen = () => {
		goods.value.open();
	}
	
	let affirm = (item) => {
		formData.proId = item.id
		formData.proName = item.name
	}
	
	/**
	 * 查看生效时间/发放数量提示
	 */
	let modalShow = ( type ) => {
		if ( type == 1) {
			pageData.title = "领取后0天后的0点0分生效";
		} else {
			pageData.title = "限用户自行领取，（当库存为 0时，集草等活动仍会赠送）";
		}
		pageData.show = true;
	}
	
	let typeChange = ( type ) =>{
		pageData.dateType = type;
		pageData.mode = 'date'
		if ( formData.validityType == "custom") {
			datePicker.value.open()
		}
		
	}
	/**
	 * 指定时间段选择
	 */
	let useTimeChange = ( type ) => {
		console.log(type)
		pageData.sueDateType = type;
		pageData.mode = 'time';
		pageData.useTimeShow = true;
		
	}
	
	/**
	 * 关闭时间段弹窗
	 */
	let timeCancel = () => {
		pageData.useTimeShow = false;
	}
	
	/**
	 * 确认时间端选择
	 */
	let timeConfirm = () => {
		pageData.useTimeShow = false;
		if ( pageData.sueDateType == 'useStartTime') { formData.useStartTime = pageData.useTime}
		if ( pageData.sueDateType == 'useEndTime') { formData.useEndTime = pageData.useTime}
	}
	
	/**
	 * 有效期选择
	 */
	let datePickerConfirm = (data) => {
		if ( pageData.dateType == 'validityType') {
			formData.validStartTime = data.start;
			formData.validEndTime = data.end;
		}
	}
	
	/**
	 * 保存
	 */
	let save = () => {
		if( !formData.title ){
			uni.$utils.showToast("请输入优惠券名称")
			return false;
		}
		if( !formData.fullAmount || (formData.type == 1&&!formData.discountAmount) ){
			uni.$utils.showToast("请输入使用门槛")
			return false;
		}
		if( !formData.daysToTakeEffect ){
			uni.$utils.showToast("请输入生效天数")
			return false;
		}
		if( !formData.number ){
			uni.$utils.showToast("请输入发放数量")
			return false;
		}
		let userDays = formData.userDays.toString();
		let params = {
			...formData,
			userDays
		}
		if(formData.id){
			updateCoupon(params).then((res) => {
				uni.$utils.showToast("操作成功",1000)
				setTimeout(()=>{
					go.back(1)
				},1000)
			})
		} else{
			addCoupon(params).then((res) => {
				uni.$utils.showToast("操作成功",1000)
				setTimeout(()=>{
					go.back(1)
				},1000)
			})
		}
		
		
		
	}
	
</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;
					}
					.date,.time{
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						margin-top: 10rpx;
						view{
							border: 1rpx solid #999;
							padding: 10rpx 20rpx;
							border-radius: 10rpx
						}
						view:nth-child(1){
							margin-right: 10rpx;
						}
						view:nth-child(2){
							margin-left: 10rpx;
						}
					}
					.time{
						view{
							padding: 10rpx 30rpx;
						}
					}
				}
			}
			.item:last-child{
				border-bottom: none;
				margin-bottom: 0;
			}
		}
		
		.card.product{
			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;
					}
					.selectGoods{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 32rpx 16rpx;
						background: #F9F9F9;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						.title{
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 16rpx;
						}
						.goodsName{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
						.goodsItem{
							display: flex;
							align-items: center;
							.productName{
								margin-right: 20rpx;
							}
						}
					}
				}
			}
			.item:last-child{
				border-bottom: none;
				margin-bottom: 0;
			}
		}
		.bottomPop{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			z-index: 9;
			>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>