<template>
	<view class="page">
		<view class="box">
			<view class="block border-top-0">
				<uni-forms ref="nameFormRef" :model="specifications" :rules="rules" :label-width="350"
					label-position="top" validateTrigger="blur">
					<uni-forms-item label="模版名称" required name="name">
						<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
							v-model="specifications.name" placeholder="模版名称,如:衣服" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view v-for="(item,index) in specifications.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">
						<view class="border-top-0">
							<uni-forms-item label="规格组名" required name="name">
								<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
									v-model="item.name" placeholder="规格组名,如:尺码" />
							</uni-forms-item>
						</view>
						<uni-forms-item label="规格值">
							<view class="option">
								<view class="">
									<view class="u-flex option-item" v-for="(option,optionIndex) in item.options"
										:key="optionIndex">
										<view class="u-flex-1">
											<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'name']"
												:ref="setFormInputRef(index,optionIndex)"
												:rules="[{'required': true,errorMessage: '必填'}]" label-width="0"
												label="" required :showRequired="false">
												<uni-easyinput
													v-model="specifications.list[index].options[optionIndex].name"
													@input="inpuChange(index,optionIndex)"
													:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
													placeholder="请输入规格值,如:S、M" />
											</uni-forms-item>

										</view>
										<view class="  u-flex">
											<uni-forms-item :key="optionIndex" label-width="0" label=""
												:showRequired="false">
												<view class="u-flex">
													<!-- <uni-easyinput v-model="specifications.list[index].options[optionIndex].optionPrice"
													@input="inpuChange(index,optionIndex)"
													
														:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
														type="digit" placeholder="填写价格" /> -->

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

													</view>
												</view>

											</uni-forms-item>

										</view>
									</view>
								</view>
								<view class="u-flex" @click="addOptions(index)">
									<view class="icon icon-add u-m-r-22 ">

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


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

						<view class="u-flex u-m-t-48 u-m-b-24" @click="delSpecificationsGroup(index)">
							<view class="icon icon-reduce u-m-r-22 ">

							</view>
							<view class="color-red">删除规格组</view>
						</view>
					</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="addSpecificationsGroup">
				<view class="icon icon-add u-m-r-22 ">

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

			<view class="save-btn-box">
				<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
			</view>
		</view>
		<view class="bottom" ref="bottom"></view>
	</view>
</template>

<script setup>
	import go from '@/commons/utils/go.js';
	import {
		$productSpec
	} from '@/http/yskApi/goods.js'
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	import infoBox from '@/commons/utils/infoBox.js'
	import {
		onMounted,
		reactive,
		nextTick,
		ref,
		onBeforeMount
	} from 'vue';
	const nameFormRef = ref(null)
	// 表单样式
	const placeholderStyle = ref('font-size:28rpx;')
	//表单边框
	const inputBorder = ref(false)
	const form = ref(null)
	const bottom = ref(null)
	//表单验证
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		MinOptional: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		MaxOptional: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		},
		optionPrice: {
			rules: [{
				required: true,
				errorMessage: '必填'
			}]
		}
	}


	// 构造规格的选项值的基础数据
	const specificationsOptionsBasicData = {
		name: '',
		optionPrice: '0.00'
	}

	function returnOptionsBasicData() {
		return {
			...specificationsOptionsBasicData
		}
	}
	// 构造规格的基础数据
	const specificationsBasicData = {
		name: '',
		// MinOptional: 1,
		// MaxOptional: 1,
		options: []
	}

	function returnSpecificationsOptionsBasicData() {
		return {
			...specificationsBasicData,
			options: [returnOptionsBasicData()]
		}
	}

	function onFieldChange(e) {
		console.log(e);
	}
	// 规格列表
	const specifications = reactive({
		name: '',
		list: [returnSpecificationsOptionsBasicData()]
	})



	//添加规格组
	function addSpecificationsGroup() {
		specifications.list.push(returnSpecificationsOptionsBasicData())
		scrollPageBottom()
	}
	//删除规格组
	function delSpecificationsGroup(index) {
		specifications.list.splice(index, 1)
	}
	// 向指定索引的规格组添加规格项
	function addOptions(index) {
		specifications.list[index].options.push(returnOptionsBasicData())
	}
	// 删除指定索引的规格组添加规格项
	function delOption(index, optionIndex) {
		specifications.list[index].options.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 = index * 10000 + index1
		return (el) => {
			if (el) {
				if (!refFormInput.value[newIndex]) {
					refFormInput.value[newIndex] = el;
				}
			}
		}
	}
	// 当表单内容输入变化根据配置的rules进行验证
	function inpuChange(index, index1) {
		const newIndex = index * 10000 + index1
		console.log(refFormInput.value[newIndex]);
		refFormInput.value[newIndex].onFieldChange()
	}






	const option = {
		type: 'add',
		id: undefined
	}
	onLoad(opt => {
		console.log(opt);
		if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
			option.type = opt.type
			const data = uni.getStorageSync('spec')
			uni.removeStorageSync('spec')
			if(data){
				specifications.name = data.name
				specifications.id = data.id
				specifications.list = data.specList.map(v => {
					return {
						...v,
						options: v.value.map(v => {
							return {
								name: v
							}
						})
					}
				})
			}
			
		}
		uni.setNavigationBarTitle({
			title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
		})

	})

	function returnPromise(prosise, index) {
		return new Promise((resolve, reject) => {
			prosise.then(res => {
				console.log(res);
				resolve({
					sucees: true
				})
			}).catch(err => {
				console.log(err);
				resolve({
					sucees: false
				})
			})
		})
	}

	let timer = null

	function settimeoutBack(time) {
		clearTimeout(timer)
		timer = setTimeout(() => {
			uni.navigateBack()
		}, time)
	}
	async function save() {
		let isAllPassForm = 0
		const nameFormRes = await returnPromise(nameFormRef.value.validate())
		console.log(nameFormRes);
		if (!nameFormRes.sucees) {
			isAllPassForm -= 1
		}
		for (let i in specifications.list) {
			const res = await returnPromise(formRefs.value[i].validate(), i)
			isAllPassForm += res.sucees ? 1 : 0
		}
		//判断验证是否通过
		if (isAllPassForm === specifications.list.length) {
			console.log('pass');
			const data = {
				name: specifications.name,
				id:specifications.id,
				specList: specifications.list.map(v => {
					return {
						...v,
						value: v.options.map(v => v.name),
						options: undefined
					}
				})
			}
			if (option.type === 'add') {
				return $productSpec.add(data).then(res => {
					infoBox.showSuccessToast('添加成功')
					settimeoutBack(1500)
				})
			}

			$productSpec.update(data).then(res => {
				infoBox.showSuccessToast('修改成功')
				settimeoutBack(1500)
			})
		}

	}
</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: 34rpx;
	}
</style>