<template>
	<view>
		<view class="coupons-preview">
			<view class="item cover">
				<view v-if="types[typeIndex].id == 2">
					<view class="cover-price">{{price || 0}}<text>元</text></view>
					<view class="cover-subtitle">代金券</view>
				</view>
				<view @click="updCover" v-else>
					<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
					<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
				</view>
			</view>
			<view class="item mian">
				<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
				<block v-if="timeIndex == 0">
					<view class="time nowrap">{{datePickerValue.length == 0 ? '有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
				</block>
				<block v-else>
					<view class="time nowrap">领取后{{timeNumber}}天内有效</view>
				</block>
			</view>
		</view>
		<view class="add-info">
			<view class="inputs">
				<label class="input-label">券类型</label>
				<picker :range="types" range-key="text" :value="typeIndex" data-type="typeIndex" @change="changePicker">
					<view class="input-text">{{types[typeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
				</picker>
			</view>
			<view class="inputs">
				<label class="input-label">券标题</label>
				<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
			</view>
			<view class="inputs">
				<label class="input-label">发券数量</label>
				<view class="input-number">
					<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
				</view>
			</view>
			<view class="inputs">
				<label class="input-label">每人限领</label>
				<view class="input-number">
					<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
				</view>
			</view>
			<block v-if="types[typeIndex].id == 2">
				<view class="inputs">
					<label class="input-label">满</label>
					<input type="digit" v-model="full" placeholder="输入券最低消费金额" />
				</view>
				<view class="inputs">
					<label class="input-label">减</label>
					<input type="digit" v-model="price" placeholder="输入券优惠金额" />
				</view>
				<view class="inputs">
					<label class="input-label">使用渠道</label>
					<view class="input-checkbox">
						<radio-group @change="radioChange">
							<label class="input-checkbox-item">
								<radio color="#e93340" value="1" checked/>
								<text>线上优惠</text>
							</label>
							<label class="input-checkbox-item">
								<radio color="#e93340" value="2"/>
								<text>线下活动</text>
							</label>
						</radio-group>
					</view>
				</view>
			</block>
			<view class="inputs">
				<label class="input-label">时间类型</label>
				<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
					<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
				</picker>
			</view>
			<view class="inputs">
				<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
				<block v-if="timeIndex === 0">
					<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
					<tn-date-picker :show="showDatePicker" :monthNum="12" color="#e93340" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
				</block>
				<block v-if="timeIndex === 1">
					<view class="input-number">
						<uni-number-box class="number" :min="1" :value="timeNumber" @change="timeNumberChange"></uni-number-box>
					</view>
				</block>
			</view>
			<view class="inputs">
				<label class="input-label">关联商品</label>
				<view class="input-text" @click="onSelectGoods">
					<block v-if="coupongoods.length > 0">已关联{{coupongoods.length}}件商品</block>
					<block v-else>选择关联商品</block>
					<uni-icons class="picker-icon" type="arrowdown" size="14" />
				</view>
			</view>
		</view>
		<view class="add-textarea">
			<label>使用规则</label>
			<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
		</view>
		<view class="add-btn ios-bottom">
			<button type="default" @click="updComponent">发布优惠券</button>
		</view>
	</view>
</template>

<script>
	import TnDatePicker from "@/components/tn-datepicker/tn-datepicker";
	import { uploads } from '@/apis/interfaces/uploading'
	import { pushCoupons } from '@/apis/interfaces/coupons'
	export default {
		components:{
			TnDatePicker
		},
		data() {
			return {
				typeIndex		: 0,
				types			: [
					{ id: 1, text: '服务券' },
					{ id: 2, text: '代金券' },
					{ id: 3, text: '提货券' },
				],
				timeIndex		: 0,
				times			: [
					{ type: 2, text: '固定时间（区间范围）' },
					{ type: 1, text: '延期券（用户领取后有效天数）' }
				],
				showDatePicker	: false,	// 活动弹出层时间
				datePickerValue	: [],		// 活动时间
				cover			: '',		// 优惠券图标
				useWay			: 1,		// 使用途径
				couponsTitle	: '',		// 优惠券标题
				quantity		: 1,		// 发券数量
				personQuantity	: 1,		// 每人限领
				full			: '',		// 满足金额
				price			: '',		// 减少金额
				description		: '',		// 使用规则
				coupongoods		: [],		// 关联商品
				timeNumber		: 1			// 延期券时间
			};
		},
		onShow(){
			this.coupongoods = this.$store.getters.getCoupongoods
		},
		methods:{
			// 发券数量
			quantityChange(value){
				this.quantity = value
			},
			// 每人限领
			personQuantityChange(value){
				this.personQuantity = value
			},
			// 延期券时间
			timeNumberChange(value){
				this.timeNumber = value
			},
			// 使用渠道
			radioChange(e){
				this.useWay = e.detail.value
			},
			// 选择
			changePicker(e){
				this[e.target.dataset.type] = e.detail.value
			},
			// 日期
			confirmDatePicker(e){
				this.datePickerValue = e.value
				this.showDatePicker	 = false
			},
			// 上传优惠券封面
			updCover(){
				uni.chooseImage({
					crop: {width: 300, height: 300},
					success: path=> {
						uploads([{
							uri : path.tempFilePaths[0]
						}]).then(res => {
							this.cover = res.url[0]
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			},
			// 选择关联商品
			onSelectGoods(){
				this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
			},
			// 发布优惠券
			updComponent(){
				let valuss = {
					title			: this.couponsTitle,
					cover			: this.cover,
					type			: this.types[this.typeIndex].id,
					full			: this.full || 0,
					price			: this.price || 0,
					quantity		: this.quantity,
					use_way			: this.useWay,
					person_quantity	: this.personQuantity,
					start_at		: this.datePickerValue[0],
					end_at			: this.datePickerValue[1],
					description		: this.description,
					time_type		: this.times[this.typeIndex].type,
					days			: this.timeNumber,
					goodsable_ids	: this.coupongoods
				}
				
				pushCoupons(valuss).then(res => {
					uni.showModal({
						title		: '提示',
						content		: res,
						showCancel	: false,
						confirmText	: '确定',
						confirmColor: '#e93340',
						success		: modalRes => {
							this.$store.commit('setCoupongoods', [])
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.add-btn{
		padding: $padding;
		button{
			height: 90rpx;
			line-height: 90rpx;
			background: $text-price;
			color: white;
			font-size: $title-size;
			font-weight: bold;
			border-radius: 0;
			&::after{
				border: none;
			}
		}
	}
	// 优惠券详情
	.add-textarea{
		background: white;
		margin-top: $margin;
		padding: $padding $padding $padding ($padding + 180rpx);
		label{
			position: absolute;
			left: $padding;
			line-height: 40rpx;
			height: 40rpx;
		}
		textarea{
			width: 100%;
			padding: 0;
			margin: 0;
			line-height: 40rpx;
			height: 200rpx;
		}
	}
	// 优惠券配置
	.add-info{
		background-color: white;
		padding: 0 $padding;
		.inputs{
			position: relative;
			padding-left: 180rpx;
			&::after{
				position: absolute;
				height: 1rpx;
				content: " ";
				background: $border-color;
				left: 0;
				right: -$padding;
				bottom: 0;
			}
			&:last-child::after{
				display: none;
			}
			.input-label{
				position: absolute;
				left: 0;
				line-height: 90rpx;
				height: 90rpx;
			}
			.input-text,
			input{
				height: 90rpx;
				line-height: 90rpx;
				font-size: $title-size-lg;
			}
			.input-text{
				position: relative;
				padding-right: 90rpx;
				.picker-icon{
					position: absolute;
					right: 0;
				}
			}
			.input-number{
				display: flex;
				align-items: center;
				height: 90rpx;
			}
			.input-checkbox{
				min-height: 90rpx;
				display: flex;
				.input-checkbox-item{
					line-height: 90rpx;
					margin-right: $margin;
					radio{
						transform:scale(0.8);
						margin-right: -15rpx;
					}
					text{
						padding: 0 ($padding/2);
						line-height: 50rpx;
						display: inline-block;
						font-size: $title-size-lg;
					}
				}
			}
			.inputs{}
		}
	}
	// 发布预览
	.coupons-preview{
		background: white;
		margin: $margin;
		border-radius: $radius/2;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: $padding 0;
		.item{
			position: relative;
			padding: 0 $padding;
		}
		.cover{
			position: relative;
			border-right: dashed 3rpx $border-color;
			width: 148rpx;
			text-align: center;
			.cover-img{
				width: 148rpx;
				height: 148rpx;
				border-radius: $radius/2;
				vertical-align: top;
				background: $border-color-lg;
				border:solid 1rpx $border-color;
				box-sizing: border-box;
			}
			.cover-price{
				padding-top: 24rpx;
				font-weight: bold;
				line-height: 58rpx;
				font-size: $title-size + 10;
				color: $text-price;
				text{
					font-size: 70%;
					padding-left: 5rpx;
				}
			}
			.cover-subtitle{
				padding-bottom: 24rpx;
				line-height: 40rpx;
				color: $text-gray;
				font-size: $title-size-sm;
			}
			&::after,&::before{
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				background: #f8f8f8;
				content: " ";
				right: -16rpx;
				border-radius: 50%;
			}
			&::after{
				top: -($padding + 15);
			}
			&::before{
				bottom: -($padding + 15);
			}
		}
		.mian{
			justify-content: center;
			width: calc(100% - 148rpx - #{$padding*2});
			box-sizing: border-box;
			@extend .vertical;
			.title{
				font-size: $title-size-lg;
				line-height: 50rpx;
			}
			.time, .goods{
				color: $text-gray-m;
				font-size: $title-size-m;
				line-height: 40rpx;
			}
		}
	}
</style>
