<template>
	<view>
		<view class="coupons-preview">
			<view class="item cover" @click="updCover">
				<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 class="item mian">
				<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
				<view class="time nowrap">{{datePickerValue.length == 0 ? '优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
				<view class="goods nowrap">全店通用</view>
			</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>
				<input type="number" v-model="quantity" placeholder="输入优惠券发放量" />
			</view>
			<view class="inputs">
				<label class="input-label">每人限领</label>
				<input type="number" v-model="personQuantity" placeholder="输入每人限领数, 0为不限制" />
			</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>
			</block>
			<view class="inputs">
				<label class="input-label">使用渠道</label>
				<view class="input-checkbox">
					<radio-group @change="radioChange">
						<label class="input-checkbox-item">
							<radio color="#c82626" value="1" checked/>
							<text>线上</text>
						</label>
						<label class="input-checkbox-item">
							<radio color="#c82626" value="2"/>
							<text>线下</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="inputs">
				<label class="input-label">券有效期</label>
				<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
				<tn-date-picker :show="showDatePicker" :monthNum="12" color="#c82626" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
			</view>
			<view class="inputs">
				<label class="input-label">设为推荐</label>
				<picker :range="recommend" range-key="text" :value="recommendIndex" data-type="recommendIndex" @change="changePicker">
					<view class="input-text">{{recommend[recommendIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
				</picker>
			</view>
			<view class="inputs">
				<label class="input-label">产品限制</label>
				<picker :range="product" range-key="text" :value="productIndex" data-type="productIndex" @change="changePicker">
					<view class="input-text">{{product[productIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
				</picker>
			</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">{{product[productIndex].type === 'all' ? '发布优惠券': '选择关联商品'}}</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: '提货券' },
				],
				recommendIndex	: 0,
				recommend		: [
					{ type: '0', text: '不推荐' },
					{ type: '1', text: '推荐' }
				],
				productIndex	: 0,
				product			: [
					{ type: 'all', text: '全部商品通用' },
					{ type: 'part', text: '部分商品可用' }
				],
				showDatePicker	: false,
				datePickerValue	: [],
				cover			: '',
				useWay			: 1,
				couponsTitle	: '',
				quantity		: '',
				personQuantity	: '',
				full			: '',
				price			: '',
				description		: ''
			};
		},
		methods:{
			// 使用渠道
			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'
							})
						})
					}
				})
			},
			// 发布优惠券
			updComponent(){
				let recommendVlue = this.recommend[this.recommendIndex].type === 1 ? 2 : ''
				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],
					channel			: this.product[this.productIndex].type,
					description		: this.description,
					position		: [1, recommendVlue]
				}
				pushCoupons(valuss).then(res => {
					uni.showModal({
						title		: '提示',
						content		: res.message,
						confirmText	: res.linkGoods ? '关联商品' : '确定',
						confirmColor: '#c82626',
						cancelText	: '稍后',
						cancelColor	: '#555555',
						showCancel	: res.linkGoods,
						success		: modalRes => {
							if(modalRes.confirm && res.linkGoods){
								this.$Router.replace({name: 'selectGoods', params:{couponId: res.coupon_id}})
								return
							}
							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-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;
					}
				}
			}
		}
	}
	// 发布预览
	.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;
			}
			&::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>
