<template>
	<view class="container">
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">基本信息</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>优惠券名称</text>
					</view>
					<view class="desc">
						<input type="text" class="input-box" v-model="info.name" placeholder="请输入优惠券名称"
							placeholder-class="desc-placeholder">
					</view>
				</view>
				<view class="cell flex flex-y-center arr-r">
					<view class="title-block required">
						<text>发放对象</text>
					</view>
					<view class="desc">
						<picker mode="selector" :range="objectList" range-key="name" @change="onObjectChange">
							<view :class="[objectActive == -1?'desc-placeholder':'','input-box']">
								<block v-if="objectActive>-1">
									{{objectList[objectActive].name}}
								</block>
								<block v-else>
									请选择
								</block>
							</view>
						</picker>
					</view>
				</view>

				<view class="cell flex flex-y-center arr-r">
					<view class="title-block required">
						<text>推荐到支付成功领劵</text>
					</view>
					<view class="desc">
						<picker mode="selector" :range="typeList" range-key="name" @change="onTypeChange">
							<view :class="[typeActive == -1?'desc-placeholder':'','input-box']">
								<block v-if="typeActive>-1">
									{{typeList[typeActive].name}}
								</block>
								<block v-else>
									请选择
								</block>
							</view>
						</picker>
					</view>
				</view>

				<view class="cell flex flex-y-center arr-r">
					<view class="title-block required">
						<text>首页弹窗</text>
					</view>
					<view class="desc">
						<picker mode="selector" :range="typeIndex" range-key="name" @change="onTypeIndexChange">
							<view :class="[typeActiveIndex == -1?'desc-placeholder':'','input-box']">
								<block v-if="typeActiveIndex>-1">
									{{typeIndex[typeActiveIndex].name}}
								</block>
								<block v-else>
									请选择
								</block>
							</view>

						</picker>
					</view>
				</view>



				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>优惠券数量</text>
					</view>
					<view class="desc">
						<input type="text" class="input-box" v-model="info.number" placeholder="请输入优惠券数量"
							placeholder-class="desc-placeholder">
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>优惠券剩余数量</text>
					</view>
					<view class="desc">
						<input type="text" class="input-box" v-model="info.stock" placeholder="请输入优惠券剩余数量"
							placeholder-class="desc-placeholder">
					</view>
				</view>
			</view>
		</view>

		<view class="page-block">
			<view class="page-title-block">
				<view class="title">优惠信息</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>优惠金额</text>
					</view>
					<view class="desc">
						<input type="text" class="input-box" v-model="info.reduce" placeholder="请输入优惠金额"
							placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>最低消费金额</text>
					</view>
					<view class="desc">
						<input type="text" class="input-box" v-model="info.full" placeholder="请输入满减金额"
							placeholder-class="desc-placeholder">
					</view>
					<view class="input-box" style="color:#333">元</view>
				</view>
				<view class="cell flex flex-y-center arr-r">
					<view class="title-block required">
						<text>开始时间</text>
					</view>
					<view class="desc">
						<picker mode="date" @change="onTimeChange" data-type="start_time">
							<view :class="[info.start_time?'':'desc-placeholder','input-box']">
								{{info.start_time || '请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cell flex flex-y-center arr-r">
					<view class="title-block required">
						<text>结束时间</text>
					</view>
					<view class="desc">
						<picker mode="date" @change="onTimeChange" data-type="end_time">
							<view :class="[info.end_time?'':'desc-placeholder','input-box']">{{info.end_time || '请选择'}}
							</view>
						</picker>
					</view>

				</view>
			</view>
		</view>
		<!-- <view class="page-block" v-if="info.type == 2">
			<view class="page-title-block">
				<view class="title">指定商品</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center goods-item arr-r">
					<image src="../static/images/avatar_def.png" mode="aspectFill" class="goods-img"></image>
					<view class="goods-info">
						<view class="name text-1">巨无霸汉堡</view>
						<view class="stock text-1">库存:100</view>
						<view class="price text-1">￥100.00</view>
					</view>
				</view>
				<view class="cell flex flex-y-center goods-item arr-r">
					<image src="../static/images/avatar_def.png" mode="aspectFill" class="goods-img"></image>
					<view class="goods-info">
						<view class="name text-1">巨无霸汉堡</view>
						<view class="stock text-1">库存:100</view>
						<view class="price text-1">￥100.00</view>
					</view>
				</view>
			</view>
		</view> -->
		<view style="height:25rpx;"></view>
		<view class="footer-bar">
			<view class="content flex flex-center" style="background: none;position: relative;">
				<view class="btn" @click="onSubmit">{{id?'保存':'立即添加'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				info: {
					id: '',
					name: '',
					start_time: '',
					end_time: '',
					full: '',
					reduce: '',
					store_id: '',
					type: '',
					goods_id: [],
					number: '',
					stock: '',
					status: '',
				},
				store_id: "",
				objectActive: -1,
				objectList: [{
					id: 1,
					name: "全平台"
				}, {
					id: 2,
					name: "新用户"
				}],
				typeActive: -1,
				typeList: [{
						id: 1,
						name: "是"
					},
					{
						id: 2,
						name: "否"
					}
				],
				typeActiveIndex: -1,
				typeIndex: [{
						id: 1,
						name: "是"
					},
					{
						id: 0,
						name: "否"
					}
				],

			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getData()
			} else {
				this.store_id = options.store_id
			}
		},
		methods: {
			getData() {
				this.request({
					url: "Smdcshop/coupon_info",
					data: {
						id: this.id
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
						this.store_id = res.data.store_id
						if (res.data.status == 1) {
							this.objectActive = 0
						} else if (res.data.status == 2) {
							this.objectActive = 1
						}
						if (res.data.is_index == 1) {
							this.typeActiveIndex = 0;
						} else {
							this.typeActiveIndex = 1;
						}
						if (res.data.is_pay == 1) {
							this.typeActive = 0
						} else if (res.data.is_pay == 2) {
							this.typeActive = 1
						}
					}
				}).catch(err => {
					console.log('err:', err)
				})
			},
			onObjectChange(e) {
				this.objectActive = e.detail.value
				this.info.status = this.objectList[e.detail.value].id
			},
			onTypeChange(e) {
				this.typeActive = e.detail.value
				this.info.type = this.typeList[e.detail.value].id
			},

			onTypeIndexChange(e) {
				this.typeActiveIndex = e.detail.value
				this.info.is_index = this.typeIndex[e.detail.value].id
			},

			onTimeChange(e) {
				console.log(e)
				this.info[e.currentTarget.dataset.type] = e.detail.value
			},
			onSubmit() {
				let params = {
					store_id: this.store_id, //	176	string	是	暂无描述
					name: this.info.name, //端午大礼包	string	是	优惠券名称
					status: this.info.status, //1	string	是	发放对象：1全平台，2新用户
					is_pay: this.info.type,
					is_index: this.info.is_index,
					full: this.info.full, //50	string	是	最低消费金额（元）
					reduce: this.info.reduce, //5	string	是	优惠金额（元）
					start_time: this.info.start_time, //2021-05-12	string	是	优惠券有效期 开始时间
					end_time: this.info.end_time, //2021-05-30	string	是	优惠券有效期 结束时间
					number: this.info.number, //10000	string	是	优惠券数量
					stock: this.info.stock, //剩余数量
				}
				if (this.id) {
					params.id = this.id
				}
				for (let key in params) {
					if (params[key] === '' || params[key] === undefined) {
						uni.showToast({
							title: "请完整填写",
							icon: 'none'
						})
						return false
					}
				}
				let start_time = Date.parse(params.start_time.replace(/-/g, '/'))
				let end_time = Date.parse(params.end_time.replace(/-/g, '/'))
				if (end_time < start_time) {
					uni.showToast({
						title: "结束时间不能小于开始时间",
						icon: 'none'
					})
					return false
				}
				this.request({
					url: this.id ? 'Smdcshop/coupon_update' : 'Smdcshop/coupon_add',
					data: params
				}).then(res => {
					uni.showModal({
						content: this.id ? '编辑成功' : '添加成功',
						showCancel: false,
						success: (r) => {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							//
							// #ifdef H5
							prevPage.getData(1)
							// #endif
							// #ifndef H5
							prevPage.$vm.getData(1)
							// #endif
							uni.navigateBack()
						}
					})
				})
			}
		}
	}
</script>

<style>
	@import url("../static/css/common.css");

	page {
		background: #F4F5F7;
	}

	.goods-item {
		padding: 25rpx 0;
	}

	.goods-item .goods-img {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;

	}

	.goods-item .goods-info {
		padding-left: 25rpx;
	}

	.goods-item .goods-info .name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		line-height: 1;
	}

	.goods-item .goods-info .stock {
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
		line-height: 1;
	}

	.goods-item .goods-info .price {
		font-size: 30rpx;
		color: #FD3939;
		margin-top: 20rpx;
		font-weight: 600;
		line-height: 1;
	}
</style>
