<template>
	<view class="page">
		<view class="box">
			<view v-for="(item,index) in recharge.list" :key="index">
				<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur"
					:ref="setFormRef(index)" :border="true" label-position="top" label-width="350">
					<view class="block">
						<uni-forms-item label="充值面额" required name="miane">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="item.miane" placeholder="填输入面额" />
						</uni-forms-item>
						<uni-forms-item label="赠送金额" required name="jine">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="item.jine" placeholder="请输入金额" />
						</uni-forms-item>
						<uni-forms-item label="赠送积分" required name="jifen">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="item.jifen" placeholder="请输入赠送积分" />
						</uni-forms-item>
						<uni-forms-item label="赠送券">
						
							<view class="option">
								<template v-if="item.options.length">
								<view class="u-flex">
									<view class="u-flex-1">赠送券</view>
									<view class="u-flex-1 u-p-l-60">赠送数量</view>
								</view>
								<view class="">
									<view class="u-flex option-item" v-for="(option,optionIndex) in item.options"
										:key="optionIndex">

										<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
										<view class="u-flex-1">
											<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'quan']"
												:ref="setFormInputRef(index,optionIndex)"
												:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0"
												label="" required>

												<uni-data-select
													v-model="recharge.list[index].options[optionIndex].quan"
													:localdata="quans"
													@change="inpuChange(index,optionIndex)"></uni-data-select>

												<!-- 	<uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
												 @input="inpuChange(index,optionIndex)"
												
													:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
													placeholder="选项名" /> -->
											</uni-forms-item>

										</view>
										<view class="u-p-l-60 u-flex-1 u-flex">
											<uni-forms-item :key="optionIndex"
												:rules="[{'required': true,errorMessage: '必填'}]"
												:ref="setFormInputRef(index,optionIndex)"
												:name="['options',optionIndex,'quanNumber']" label-width="0" label=""
												required>
												<view class="u-flex">
													<uni-easyinput
														v-model="recharge.list[index].options[optionIndex].quanNumber"
														@input="inpuChange(index,optionIndex)"
														:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
														type="number" placeholder="填写数量 张" />

													<view class="icon icon-reduce u-m-l-38"
														@click="delOption(index,optionIndex)">

													</view>
												</view>
											</uni-forms-item>

										</view>
									</view>
								</view>
								</template>
								<view class="u-flex u-m-t-32" >
									<view class="u-flex" @click="addOptions(index)">
										<view class="icon icon-add u-m-r-22 ">
										
										</view>
										<view class="color-main">添加</view>
									</view>
								</view>

							</view>
						</uni-forms-item>
						<!-- <view class="u-flex u-m-t-48 u-m-b-24" @click="delrechargeGroup(index)">
							<view class="icon icon-reduce u-m-r-22 ">

							</view>
							<view class="color-red">删除规格组</view>
						</view> -->
					</view>

					<view class="block u-m-t-30">
						<view class="u-p-t-30 u-p-b-30">
							<view class="u-flex   u-row-between">
								<view class="">首冲赠送</view>
								<view>
									<my-switch v-model="item.isFirst"></my-switch>
								</view>
							</view>
							<view class="color-999" v-if="item.isFirst">当用户首次充值时，仅赠送以下内容:</view>
						</view>
						<template v-if="item.isFirst">
							<uni-forms-item label="赠送金额" required name="zengJie">
								<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
									v-model="item.zengJie" placeholder="请输入金额" />
							</uni-forms-item>
							<uni-forms-item label="赠送积分" required name="zengJifen">
								<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
									v-model="item.zengJifen" placeholder="请输入积分" />
							</uni-forms-item>
							<uni-forms-item label="赠送券">
							
								<view class="option">
									<template v-if="item.zengOptions.length">
									<view class="u-flex">
										<view class="u-flex-1">赠送券</view>
										<view class="u-flex-1 u-p-l-60">赠送数量</view>
									</view>
									<view class="">
										<view class="u-flex option-item" v-for="(option,optionIndex) in item.zengOptions"
											:key="optionIndex">
							
											<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
											<view class="u-flex-1">
												<uni-forms-item :key="optionIndex" :name="['zengOptions',optionIndex,'quan']"
													:ref="setFormInputRef(index,optionIndex)"
													:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0"
													label="" required>
							
													<uni-data-select
														v-model="recharge.list[index].zengOptions[optionIndex].quan"
														:localdata="quans"
														@change="inpuChange(index,optionIndex)"></uni-data-select>
							
													<!-- 	<uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
													 @input="inpuChange(index,optionIndex)"
													
														:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
														placeholder="选项名" /> -->
												</uni-forms-item>
							
											</view>
											<view class="u-p-l-60 u-flex-1 u-flex">
												<uni-forms-item :key="optionIndex"
													:rules="[{'required': true,errorMessage: '必填'}]"
													:ref="setFormInputRef(index,optionIndex)"
													:name="['zengOptions',optionIndex,'quanNumber']" label-width="0" label=""
													required>
													<view class="u-flex">
														<uni-easyinput
															v-model="recharge.list[index].zengOptions[optionIndex].quanNumber"
															@input="inpuChange(index,optionIndex)"
															:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
															type="number" placeholder="填写数量 张" />
							
														<view class="icon icon-reduce u-m-l-38"
															@click="delZengOption(index,optionIndex)">
							
														</view>
													</view>
												</uni-forms-item>
							
											</view>
										</view>
									</view>
									</template>
									<view class="u-flex u-m-t-32" >
										<view class="u-flex" @click="addZengOptions(index)">
											<view class="icon icon-add u-m-r-22 ">
											</view>
											<view class="color-main">添加</view>
										</view>
									
									</view>
							
								</view>
							</uni-forms-item>
						</template>
						
						
					</view>
				</uni-forms>
			</view>
			<!-- <view class="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addrechargeGroup">
				<view class="icon icon-add u-m-r-22 ">

				</view>
				<view class="color-main">添加规格组</view>
			</view> -->

			<view class="save-btn-box">
				<my-button @tap="save" showShadow shape="circle">保存</my-button>
				<view class="u-m-t-20">
					<my-button @tap="back"  type="cancel">取消</my-button>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="bottom" ref="bottom"></view>
	</view>
</template>

<script setup>
	import mySwitch from '@/components/my-components/my-switch.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import go from '@/commons/utils/go.js';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		reactive,
		nextTick,
		ref,
		onBeforeMount
	} from 'vue';
	// 表单样式
	const placeholderStyle = ref('font-size:28rpx;')
	//表单边框
	const inputBorder = ref(false)
	const form = ref(null)
	const bottom = ref(null)
	//表单验证
	const rules = {
		miane: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		jine: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		zengJie:{
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		zengJifen:{
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		jifen: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		quan: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		quanNumber: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		}
	}


	const quans = reactive([{
			value: 0,
			text: "充值18元优惠券"
		},
		{
			value: 1,
			text: "邀新10元优惠券"
		},
		{
			value: 2,
			text: "10元新人券"
		},
	])

	// 构造规格的选项值的基础数据
	const rechargeOptionsBasicData = {
		quan: null,
		quanNumber: 1
	}

	function returnOptionsBasicData() {
		return {
			...rechargeOptionsBasicData
		}
	}
	// 构造规格的基础数据
	const rechargeBasicData = {
		GroupName: '',
		miane: '',
		jine: '',
		jifen: '',
		zengJie:'',
		zengJifen:'',
		isFirst:false,
		options: [],
		zengOptions:[]
	}
	
	function back(){
		go.back()
	}

	function returnrechargeOptionsBasicData() {
		return {
			...rechargeBasicData,
			options: [returnOptionsBasicData()],
			zengOptions: [returnOptionsBasicData()],
		}
	}

	function onFieldChange(e) {
		console.log(e);
	}
	// 规格列表
	const recharge = reactive({
		list: [returnrechargeOptionsBasicData()]
	})



	//添加规格组
	function addrechargeGroup() {
		recharge.list.push(returnrechargeOptionsBasicData())
		scrollPageBottom()
	}
	//删除规格组
	function delrechargeGroup(index) {
		recharge.list.splice(index, 1)
	}
	// 向指定索引的优惠券添加规格项
	function addOptions(index) {
		recharge.list[index].options.push(returnOptionsBasicData())
	}
	// 向指定索引的赠送优惠券添加规格项
	function addZengOptions(index) {
		recharge.list[index].zengOptions.push(returnOptionsBasicData())
	}
	// 删除指定索引的优惠券添加规格项
	function delOption(index, optionIndex) {
		recharge.list[index].options.splice(optionIndex, 1)
	}
	// 删除指定索引的赠送优惠券添加规格项
	function delZengOption(index, optionIndex) {
		recharge.list[index].zengOptions.splice(optionIndex, 1)
	}
	//页面滚动到最底部
	function scrollPageBottom() {
		nextTick(() => {
			uni.pageScrollTo({
				duration: 100, // 过渡时间
				scrollTop: 100000, // 滚动的实际距离
			})
		})
	}
	//设置表单验证规则
	function setFormRules() {
		form.value.setRules(rules)
	}
	const formRefs = ref([]);
	//绑定表单元素
	function setFormRef(index) {
		formRefs.value[index] = null;
		return (el) => {
			if (el) {
				formRefs.value[index] = el;
			}
		};
	}
	// 绑定option input元素
	const refFormInput = ref([])

	function setFormInputRef(index, index1) {
		const newIndex = 1000 + index * 10000 + index1
		return (el) => {
			if (el) {
				if (!refFormInput.value[newIndex]) {
					refFormInput.value[newIndex] = el;
				}
			}
		}
	}

	function testVaildata(index, index1) {
		const newIndex = 1000 + index * 10000 + index1
		recharge.list[0].options[0].quanNumber = 1
		refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange()
	}
	// 当表单内容输入变化根据配置的rules进行验证
	function inpuChange(index, index1) {
		const newIndex = 1000 + index * 10000 + index1
		refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange()
	}






	let emitName = ''

	function triggerEvent(emitName, data) {
		if (emitName) {
			uni.$emit(emitName, data)
		}
	}
	onLoad(opt => {
		const arr = uni.getStorageSync('guige')
		if (arr.length) {
			recharge.list = arr
			console.log(arr);
		}
		console.log(opt);
		if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
			emitName = opt.emitName
		}

	})

	function emitrechargeSave() {
		// emitrechargeSave  触发规格保存事件将数据给到添加商品页面
		// guigeEdit  触发规格保存事件将数据给到添加规格页面
		uni.removeStorageSync('guige')
		triggerEvent(emitName, recharge.list)
	}

	function returnPromise(index, prosise) {
		return new Promise((resolve, reject) => {
			prosise.then(res => {
				console.log(res);
				resolve({
					sucees: true
				})
			}).catch(err => {
				console.log(err);
				resolve({
					sucees: false
				})
			})
		})
	}
	async function save() {
		let isAllPassForm = 0
		for (let i in recharge.list) {
			const res = await returnPromise(i, formRefs.value[i].validate())
			isAllPassForm += res.sucees ? 1 : 0
		}
		//判断验证是否通过
		if (isAllPassForm === recharge.list.length) {
			console.log('pass');
			emitrechargeSave()
			go.back()
		}

	}
</script>
<style scoped>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	$icon-size: 34rpx;
	$icon-line-width: 20rpx;
	$icon-line-height: 4rpx;

	.page {
		background: #F9F9F9;
		padding: 30rpx;
		padding-bottom: 200rpx;
	}

	.my-switch {
		transform: scale(0.7);
	}

	::v-deep .uni-forms-item__error {
		display: none !important;
	}

	::v-deep .option .uni-forms-item {
		padding: 0;
		min-height: inherit;
		background-color: transparent;
		border-top: none;
	}

	.icon {
		width: $icon-size;
		height: $icon-size;
		position: relative;
		border-radius: 50%;

		&:before,
		&::after {
			position: absolute;
			display: block;
			content: '';
			background-color: #fff;
		}
	}

	.icon-add {
		background-color: $my-main-color;

		&::before {
			width: $icon-line-height;
			height: $icon-line-width;
			top: calc(($icon-size /2) - ($icon-line-width / 2));
			left: calc(($icon-size /2) - ($icon-line-height / 2));
		}

		&::after {
			width: $icon-line-width;
			height: 4rpx;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}

	.icon-reduce {
		background-color: $my-red-color;

		&::after {
			width: $icon-line-width;
			height: $icon-line-height;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}

	.label-title {
		font-size: 28rpx;
		font-weight: bold;
		font-family: Source Han Sans CN, Source Han Sans CN;
	}

	.lh40 {
		line-height: 40rpx;
	}

	.box {
		margin-top: 70rpx;
		font-size: 28rpx;

		.block {
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 32rpx;
		}
	}

	.save-btn-box {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 60rpx;

	}

	::v-deep.uni-forms-item {
		align-items: inherit;
	}

	::v-deep .uni-forms-item .uni-forms-item__label {
		text-indent: 0;
		font-size: 28rpx !important;
		font-weight: bold;
		color: #333;
	}

	::v-deep .border-top-0 .uni-forms-item.is-direction-top {
		border-color: transparent !important;
	}

	.save-btn {
		background-color: $my-main-color;
		color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.btn-hover-class {
		opacity: .6;
	}

	.zuofa {
		padding: 28rpx 0;
		background: #F9F9F9;
		padding-left: 42rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	::v-deep .uni-input-placeholder {
		font-size: 28rpx;
	}

	.option {
		padding: 26rpx 30rpx 24rpx 24rpx;
		background: #F9F9F9;
	}

	.option-item {
		margin-bottom: 10rpx;
	}
</style>