<template>
	<view>
		<view class="headerGetbg"></view>
		<view class="home-content">
			<form @submit="save">
				<!-- <view class="main"> -->
				<view class="bgf mar-24 home-content-top">
					<view class="br box-pack-between" style="padding: 32rpx 0 25rpx 0;">
						<text>活动信息</text>
						<view class="flex-y-center" v-if="id">
							<view @click="del" class="flex-y-center ft28" style="color: #999999;">
								<image src="/saomaDiancan/static/images/del2.png" class="list-icon" mode=""></image> 删除
							</view>
						</view>
					</view>
					<view>
						<view class="box-pack-between ft32 item">
							<text class="item_name ft28">活动类型<text style="color:red">*</text></text>
							<view class="flex-center ft28">
								<input :value="info.title" placeholder="请填写活动标题" name="title" />
							</view>
						</view>
					</view>
					<view class="box-pack-between ft32 item flex-y-center">
						<text class="item_name ft28">活动类型<text style="color:red">*</text></text>
						<picker class="ft28" :range="game_list" range-key="name" @change="bindGame">
							<view class="flex-y-center">
								<!-- <view v-if="game_index<=-1">{{game_name}}</view> -->
								<view >{{game_list[0].name}}</view>
								<text class="iconfont icon-prev"></text>
							</view>
						</picker>
					</view>
				</view>

		<!-- 		<view v-if="game_index!=2" class="home-content-top" style="padding-bottom: 20rpx;">
					<view class="box-pack-between ft32 item">
						<text class="ft28">奖品设置 <text style="color:red">*</text></text>
						<view class="add-home flex-center ft24" @click="open">
							添加
						</view>
					</view>
					<view class="item-bg" v-if="prize.length>0">
						<view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of prize" :key='index'>
							<view class="flex-y-center flex-grow-1 pdr-20">
								<text style="margin-right: 10rpx;">{{item.name}}/<text
										class="col-num">{{item.num}}张</text>/<text class="col-num">
										{{item.rate}}%</text></text>
							</view>
							<image class="item-del" @click="delScene" :data-index='index'
								src="../../static/images/del.png" mode=""></image>
						</view>
					</view>
				</view> -->
				
				<block v-if="game_index==2">
					<view class="home-content-top" style="padding-bottom: 20rpx;">
						<view class="box-pack-between ft32 item">
							<text class="ft28">奖品列表 </text>
						</view>

						<view class="box-pack-between ft32 item">
							<text class="item_name ft28">转盘ID</text>
							<view class="flex-center ft28">
								<input :value="info.content.dial_id" placeholder="请输入转盘ID" name="dial_id" />
							</view>
						</view>

						<view class="box-pack-between ft32 item">
							<text class="item_name ft28">旋转时间(秒)</text>
							<view class="flex-center ft28">
								<input :value="info.content.rotate_time" placeholder="请输入旋转时间(秒)" name="rotate_time" />
							</view>
						</view>

						<view class="box-pack-between ft32 item">
							<text class="item_name ft28">LED 数量</text>
							<view class="flex-center ft28">
								<input :value="info.content.led_num" placeholder="请输入LED 数量" name="led_num" />
							</view>
						</view>
					</view>

					<view class="home-content-top" v-for="(item,index) of content" :key='index'>
						<view class="box-pack-between ft32 item-li">
							<text class="item_name ft28">第{{index+1}}个灯奖项</text>
							<picker class="ft28" :range="coupon_list" range-key="name" @change="onCoupon"
								:data-index='index'>
								<view class="flex-y-center">
									<view v-if="!item.awards">请选择优惠劵类型</view>
									<view v-else>{{item.awards}}</view>
									<text class="iconfont icon-prev"></text>
								</view>
							</picker>
						</view>

						<view class="box-pack-between ft32 item-li">
							<text class="item_name ft28">概率</text>
							<view class="flex-center ft28">
								<input :value="item.probability" @input="getScene" :data-index="index"
									placeholder="请输入概率" />
							</view>
						</view>

						<view class="box-pack-between ft32 item-li">
							<text class="item_name ft28">数量</text>
							<view class="flex-center ft28">
								<input :value="item.num" @input="getNum" placeholder="请输入数量" :data-index="index" />
							</view>
						</view>

						<view class="box-pack-between ft32 item-li">
							<text class="item_name ft28">指定openid</text>
							<view class="flex-center ft28">
								<input :value="item.assign" @input="getOpenid" placeholder="请填写某音用户OPENID"
									:data-index="index" />
							</view>
						</view>
					</view>
				</block>
				<view class="home-content-top">
					<view class="br" style="padding: 32rpx 0 25rpx 0;">
						<text>活动时间</text>
					</view>
					<view class="box-pack-between ft32 item">
						<text>开始时间<text style="color:red">*</text></text>
						<view class="flex-center ft24">
							<view class="model-item" :class="act_index==1?'act':''">
								<picker mode='date' :value="start" :start="startDate" :end="endDate"
									@change="bindDateChange1" data-index="1">
									<view class="flex-center">
										<text>{{start}}</text>
										<text class="iconfont icongengduo"></text>
									</view>

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

					<view class="box-pack-between ft32 item">
						<text>结束时间<text style="color:red">*</text></text>
						<view class="flex-center ft24">
							<view class="model-item" :class="act_index2==2?'act':''">
								<picker mode='date' :value="end" :start="startDate" :end="endDate"
									@change="bindDateChange2" data-index="2">
									<view class="flex-center">
										<text>{{end}}</text> <text class="iconfont icongengduo"></text>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>


				<view class="home-content-top">
					<view class="br" style="padding: 32rpx 0 25rpx 0;">
						<text>活动说明</text>
					</view>
					<view class="box-pack-between ft32  descps ">
						<textarea :value='info.explain' placeholder-class="desc-placeholder" maxlength="200"
							placeholder="请输入内容（选填）" name='explain' />
					</view>
				</view>

				<view class="bottom-bar">
					<button form-type="submit" type="2" class="btn1 flex-center">
						确定
					</button>
				</view>

				<!-- </view> -->
			</form>
		</view>

		<zx-uni-popup ref="popup" type="center">
			<view class="games-model">
				<form @submit="sure">
					<view class="title">
						设置奖品
					</view>

					<view class="flex-y-center item">
						<view style="min-width: 150rpx;">名称
							<text class="red">*</text>
						</view>
						<view class="border-b flex-grow-1">
							<input name="name" type="text" maxlength="30" />
						</view>
					</view>

					<view class="flex-y-center item" @click="bindCoupon">
						<view style="min-width: 100rpx;">奖品<text class="red">*</text></view>
						<view class="flex-y-center box-pack-between flex-grow-1 ft28">
							<text></text>
							<view class="flex-y-center">
								<text>{{coupon_title}}</text>
								<text class="iconfont icon-prev"></text>
							</view>
						</view>
					</view>

					<view class="flex-y-center item">
						<view style="min-width: 100rpx;">数量<text class="red">*</text></view>
						<view class="border-b flex-grow-1">
							<input name="num" :value="num" type="number" value="" />
						</view>
					</view>

					<view class="flex-y-center item">
						<text style="min-width: 100rpx;"> 概率<text class="red">*</text></text>
						<view class="border-b flex-grow-1">
							<input name="probability" :value="probability" type="digit" value="" />
						</view>
						<text>%</text>
					</view>
					<text class="ft20 red">*所填写的奖品概率总和不能超过100,未中奖的概率 = 100 - 所填写的奖品概率的总和</text>
					<button class="btn flex-center" form-type="submit">确定</button>
				</form>
			</view>
		</zx-uni-popup>
	</view>
</template>

<script>
	import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue'
	export default {
		components: {
			zxUniPopup,
		},
		data() {
			return {
				
				game_list: [
					// {
					// 	name: "刮刮卡",
					// },
					// {
					// 	name: "大转盘",
					// },
					{
						name: "实体大转盘",
					}
				],
				game_index: 2,
				game_name: "请选择小游戏类型",
				game_id: "",
				prize: [],
				coupon_title: "",
				num: "",
				coupon_id: "",
				startDate: "2020-10-01",
				endDate: "2030-10-01",
				start: "请选择开始时间",
				end: "请选择结束时间",
				act_index: 0,
				act_index2: 0,
				info: {},
				id: "",
				coupon_name: "请选择优惠劵类型",
				coupon_list: [],
				coupon_index: -1,

				content: [{
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					},
					{
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					},
					{
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					}, {
						awards: "请选择优惠劵类型",
						probability: "",
						num: "",
						assign: "",
					},
				]
			}
		},
		onLoad(e) {

			if (e.id) {
				this.id = e.id;
				uni.setNavigationBarTitle({
					title: "编辑活动"
				})
			}
			// this.coupon();
		},

		onShow() {
			uni.$on("handleFun", res => {
				console.log(res, "res")
				this.coupon_title = res.title;
				this.coupon_id = res.coupon_id;
				this.number = res.num;
				// 清除监听
				uni.$off('handleFun');
			})
		},

		methods: {

			coupon(e) {
				this.request({
					url: "coupon/lists",
					data: {
						token: uni.getStorageSync("token"),
						page: 1,
						limit: 100,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						for (let i of res.data.list) {
							i.name = i.type == 1 ? '[' + i.title + ']' + '满减劵' + ':满' + Number(i.cut_price) + '减' +
								Number(i.full_price) :
								i.type == 2 ? '[' + i.title + ']' + '折扣劵' + ':折扣' + Number(i.discount) : '[' + i
								.title + ']' + '礼品劵:' + i.gift;
							// item.name=item.type==3?'['+item.title+']'+'礼品劵'+
						}
						console.log(res.data.list, "res.data.list")
						this.coupon_list = res.data.list;

						if (this.id) {
							this.http();
						}
					}
				}).catch((res) => {});
			},


			http(e) {
				let url = "lottery/detail";
				this.request({
					url,
					data: {
						id: this.id
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === "200") {

						this.info = res.data.detail;
						this.start = res.data.detail.start_time;
						this.end = res.data.detail.end_time;

						this.game_index = res.data.detail.type == 2 ? 1 : res.data.detail.type == 3 ? 2 : 0;

						if (res.data.detail.type == 3) {
							for (let i of res.data.detail.content.data) {
								for (let j of this.coupon_list) {
									if (i.awards == j.id) {
										i.awards = j.name;
										i.id = j.id
									}
								}
							}
							this.content = res.data.detail.content.data;
							// this.content[index].awards = this.coupon_list[e.detail.value].name;
							// this.content[index].id = this.coupon_list[e.detail.value].id;
						} else {
							this.prize = res.data.detail.content;
						}

					}
				});
			},

			del() {
				uni.showModal({
					title: '提示',
					content: '是否要删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: 'lottery/del',
								data: {
									id: this.info.id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === 200 || res.code === "200") {
									uni.showToast({
										title: "删除成功",
										icon: "none",
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2e3)
								}
							}).catch(() => {
								uni.showToast({
									title: res.message,
									icon: "none",
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

			bindDateChange1(e) {
				this.act_index = e.currentTarget.dataset.index;
				this.start = e.target.value;
			},

			bindDateChange2(e) {
				this.act_index2 = e.currentTarget.dataset.index;
				this.end = e.target.value;
			},

			bindGame(e) {
				console.log(e.detail.value, "e.detail.value")
				// this.game_index = e.detail.value;
				// this.game_id = this.game_list[e.detail.value].id;
			},


			onCoupon(e) {
				var index = e.currentTarget.dataset.index;
				this.content[index].awards = this.coupon_list[e.detail.value].name;
				this.content[index].id = this.coupon_list[e.detail.value].id;
			},

			getScene(e) {
				var index = e.currentTarget.dataset.index;
				this.content[index].probability = e.detail.value
			},
			getNum(e) {
				var index = e.currentTarget.dataset.index;
				this.content[index].num = e.detail.value
			},

			getOpenid(e) {
				var index = e.currentTarget.dataset.index;
				this.content[index].assign = e.detail.value
			},


			bindCoupon() {
				uni.navigateTo({
					url: "./CouponList"
				})
			},

			sure(e) {

				if (!this.coupon_title || !e.detail.value.num || !e.detail.value.probability) {
					uni.showToast({
						title: "必选项不能为空",
						icon: 'none'
					})
					return
				}

				if (e.detail.value.probability > 100) {
					uni.showToast({
						title: "概率不能大于100",
						icon: 'none'
					})
					return
				}

				if (e.detail.value.num > Number(this.number)) {
					uni.showToast({
						title: "数量不能大于优惠劵数量",
						icon: 'none'
					})
					return
				}

				let sum = this.prize.reduce((acc, curVal) => acc + Number(curVal.probability), 0);

				if ((sum + Number(e.detail.value.probability)) > 100) {
					uni.showToast({
						title: "奖品合计概率不能超过100%",
						icon: 'none'
					})
					return
				}

				if (this.prize.length > 0) {
					let hasGoodStudentType = this.prize.some((v, i) => v.coupon_id == this.coupon_id)
					console.log(hasGoodStudentType); // true
					if (hasGoodStudentType) {
						uni.showToast({
							title: "已有此优惠劵",
							icon: 'none'
						})
						return
					}
				}
				this.prize.push({
					coupon_id: this.coupon_id,
					coupon_title: this.coupon_title,
					name: e.detail.value.name,
					num: e.detail.value.num,
					rate: e.detail.value.probability,
				})
				this.probability = "";
				this.coupon_title = "";
				this.$refs.popup.close();
			},

			open() {
				if (this.prize.length > 8) {
					uni.showToast({
						title: "奖品已超限制长度",
						icon: 'none'
					})
					return
				}
				this.$refs.popup.open();
			},


			delScene(e) {
				var index = Number(e.currentTarget.dataset.index);
				this.prize.splice(index, 1);
			},


			save(e) {

				let data = e.detail.value;

				data.type = this.game_index == 1 ? 2 : this.game_index == 2 ? 3 : 1;

				data.token = uni.getStorageSync("token");

				data.time = this.start + " - " + this.end;

				if (data.type == 3) {
					let content = [];
					for (let i of this.content) {
						content.push({
							awards: i.id,
							probability: i.probability,
							num: i.num,
							assign: i.assign
						})
					}
					data.content = JSON.stringify(content);
				} else {
					data.content = JSON.stringify(this.prize);
				}

				if (this.id) {
					data.id = this.id;
				}


				let a = ((Date.parse(new Date(this.start))) / 1000); //开始的时间戳
				let b = ((Date.parse(new Date(this.end))) / 1000); //结束的时间戳

				// console.log(isNaN(a), "aad")
				if (isNaN(a)) {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (isNaN(b)) {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (a > b) {
					uni.showToast({
						title: '开始时间不能大于结束时间哦',
						icon: 'none',
						duration: 2000
					});
					return false
				}

				if (this.prize.length <= 0 && this.game_index != 2) {
					uni.showToast({
						title: "请选择奖品",
						icon: 'none'
					})
					return false
				}
				if (!data.title) {
					uni.showToast({
						title: "必填项不能为空",
						icon: 'none'
					})
					return false
				}
				this.request({
					url: "lottery/save",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						console.log(res)
						uni.showToast({
							title: "提交成功",
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					})
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F1F1;
	}

	.home-content {
		width: 690rpx;
		opacity: 1;
		border-radius: 14rpx;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
		margin: 0 auto;
		position: relative;

		.home-content-top {
			width: 100%;
			opacity: 1;
			background: #ffffff;
			border-radius: 14rpx;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
			padding: 0 24rpx;
			margin-top: 24rpx;
		}
	}

	.list-icon {
		width: 29rpx;
		height: 29rpx;
		margin-right: 6rpx;
	}

	.mar64 {
		margin-bottom: 60rpx;
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.col-num {
		color: #007AFF;
	}

	.item_name {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		flex: none;
		width: 176rpx;
	}

	.content {
		word-wrap: break-word;
		word-break: break-all;
	}

	.pdr-20 {
		padding-right: 20rpx;
	}

	.item {
		padding: 32rpx 0rpx;
	}

	.item input {
		text-align: right;
	}

	.upimg {
		width: 126rpx;
		height: 126rpx;
	}

	.add-home {
		color: #FFFFFF;
		width: 126rpx;
		height: 54rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	}

	.item-bg {
		// width: 670rpx;
		/* height: 298rpx; */
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
	}

	.item-del {
		width: 40rpx;
		height: 40rpx;
		min-width: 40rpx;
	}

	.item-bg-32 {
		margin-right: 32rpx;
	}

	.mgr57 {
		margin-bottom: 57rpx;
	}

	.item-li {
		padding: 20rpx 0;
		text-align: right;

		.item_name {
			text-align: left;
		}
	}

	.games-model {
		background: #FFFFFF;
		width: 500rpx;
		padding: 0rpx 40rpx 40rpx 40rpx;
		border-radius: 12rpx;

		.title {
			text-align: center;
			padding: 20rpx 0;
		}

		.item {
			padding: 20rpx 0;

			.border-b input {
				margin-left: 10rpx;
				text-align: center;
			}
		}

		.red {
			color: red;
		}

		.btn {
			margin: 0 auto;
			color: #FFFFFF;
			width: 250rpx;
			height: 60rpx;
			background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
			border-radius: 8rpx;
			box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
			margin-top: 30rpx;
		}
	}

	.model-item {
		text-align: center;
		font-size: 28rpx;
		color: #999;
		position: relative;
		padding: 10rpx 0;
		text-align: center;
		border-radius: 8rpx;
	}

	.act {
		color: #000;
	}

	.descps textarea {
		padding-top: 20rpx;
		width: 100%;
	}

	.bottom-bar {
		width: 100%;
		background: none;
		margin-top: 100rpx;
	}

	.btn1 {
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		opacity: 1;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 32rpx;
	}

	.ft32 {
		font-size: 28rpx;
	}
</style>
