<template>
	<view class="page u-font-24 color-333">
		<view class="box ">
			<view>
				<uni-forms :model="FormData" :rules="rules" err-show-type="undertext" validateTrigger="blur" ref="form"
					:border="true" :label-width="130">
					<view class="block u-p-b-16">

						<view class="">
							<view class="u-m-t-20">选择规格</view>
							<view class="u-m-t-16">
								<uni-data-picker :clear-icon="false" @change="specIdChange"
									:map="{text:'name',value:'id'}" placeholder="请选择规格" popup-title="请选择规格"
									:localdata="FormData.specList" v-model="FormData.specId">
								</uni-data-picker>
							</view>
						</view>
					
						<view class=" ">
							<view class="u-m-t-32" v-for="(item,index) in FormData.selectSpecInfo" :key="index">
								<view class="font-bold">
									{{item.name}}
								</view>
								<view class="u-m-t-16">
									

									<uni-data-checkbox @change="createResult" multiple :selectedColor="$utils.ColorMain"
										v-model="item.selectSpecResult" :localdata="item.children">
										</uni-data-checkbox>

								</view>

							</view>
							<view class="u-p-b-16"></view>
						</view>
					</view>


				</uni-forms>

				<view>
					<view class="block u-m-b-0 u-m-t-32" v-for="(item,index) in FormData.result" :key="index">
						<uni-forms :model="item.skus" :rules="rules" :ref="setFormRef(index)" err-show-type="undertext"
							validateTrigger="blur" :border="true" :label-width="130">

							<view class="">
								<view class="u-m-t-20 u-p-b-24 border-bottom" v-for="(val,key) in item.names"
									:key="key">
									<view class="font-bold u-m-r-12">
										{{key}}
									</view>
									<view class="u-m-t-16 color-666 u-font-24">{{val}}</view>
								</view>
							</view>
							<view class="u-m-t-24">
								<view label="">
									<view class="font-bold">
										图片
									</view>
									<view class="u-m-t-16">
										<my-upload-file @change="changeResultCover($event,index)" :limit="1"
											:imageStyles="imageStyles" :ref="setRefFile(index)"
											:images="item.coverImg"></my-upload-file>
									</view>
								</view>
							</view>
							<view class="skus u-m-t-24">
								<view class="">
									<uni-forms-item label="售价" required name="salePrice">
										<uni-easyinput @blur="priceFormat(item.skus,'salePrice')"
											:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
											:inputBorder="inputBorder" v-model="item.skus.salePrice" type="digit"
											placeholder="请输入售价（元）" />
									</uni-forms-item>
								</view>

								<uni-forms-item label="会员价（元）" required name="memberPrice">
									<uni-easyinput @blur="priceFormat(item.skus,'memberPrice')"
										:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
										:inputBorder="inputBorder" v-model="item.skus.memberPrice" type="digit"
										placeholder="请输入会员价（元）" />
								</uni-forms-item>
								<uni-forms-item label="成本价（元）" required name="costPrice">
									<uni-easyinput @blur="priceFormat(item.skus,'costPrice')"
										:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
										:inputBorder="inputBorder" v-model="item.skus.costPrice" type="digit"
										placeholder="请输入成本价（元）" />
								</uni-forms-item>
								<uni-forms-item label="原价（元）" required name="originPrice">
									<uni-easyinput @blur="priceFormat(item.skus,'originPrice')"
										:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
										:inputBorder="inputBorder" v-model="item.skus.originPrice" type="digit"
										placeholder="请输入原价（元）" />
								</uni-forms-item>
								<uni-forms-item label="起售数量" required name="suitNum">
									<uni-easyinput @blur="priceFormat(item.skus,'suitNum')" :paddingNone="inputPaddingNone"
										:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
										v-model="item.skus.suitNum" type="digit" placeholder="请输入起售数量" />
								</uni-forms-item>
						

								<uni-forms-item label="商品条码" required>
									<view class="bg-gray u-flex u-col-center u-col-center u-p-l-24" style="height: 72rpx;background: #F6F6F6;border-radius: 8rpx ;">
										<uni-easyinput disabled :paddingNone="inputPaddingNone"
											:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
											v-model="item.skus.barCode" placeholder="请输入商品条码" />
									</view>
									
								</uni-forms-item>

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

		</view>

		<view :style="{height:bottomHeight+'px'}"></view>
		<view class="safe-bottom fixed">
			<view class="btn">
				<up-button @click="save" shape="circle" type="primary" >
					<view class=" font-bold">
						保存
					</view>
				</up-button>
				<!-- <button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button> -->
				<view class="u-m-t-20">
					<button class="save-btn edit-btn" hover-class="btn-hover-class" @click="fastEditShow">
						<view class="u-flex u-row-center">
							<view class="u-m-r-6">批量修改</view>
							<up-icon name="edit-pen" :color="$utils.ColorMain"></up-icon>
						</view>
					</button>
				</view>
			</view>

		</view>

		<pop-fast-edit @update="updateSkuKey" v-model:show="fastEdit.show"></pop-fast-edit>
	</view>
</template>
<script setup>
	import { reactive, nextTick, ref, watch } from 'vue';
	import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
	import { getSafeBottomHeight } from '@/commons/utils/safe-bottom.js'
	import { formatPrice } from "@/commons/utils/format.js";
	import popFastEdit from "./components/fast-edit.vue"
	import infoBox from '@/commons/utils/infoBox.js'
	import dayjs from "dayjs";
	import go from '@/commons/utils/go.js';
	import { $defaultSku } from '@/commons/goodsData.js'

	import { hasPermission } from '@/commons/utils/hasPermission.js';
	import { getSpecList,delSpec } from '@/http/api/product.js'

	
	//上个页面传来的参数
	let option = {}
	const FormData = reactive({
		specId: '',
		specItem: '',
		specAllList: [],
		result: [],
		selectSpecInfo: [],
	})
	
	//表单验证
	const rules = {
		salePrice: {
			rules: [{
				required: true,
				errorMessage: '售价必填'
			}]
		},
		memberPrice: {
			rules: [{
				required: true,
				errorMessage: '会员价必填'
			}]
		},
		costPrice: {
			rules: [{
				required: true,
				errorMessage: '成本价必填'
			}]
		},
		originPrice: {
			rules: [{
				required: true,
				errorMessage: '原价必填'
			}]
		},
		suitNum: {
			rules: [{
					required: true,
					errorMessage: '起售数量必填'
				},
				{
					validateFunction: function(rule, value, data, callback) {
						if (value < 1) {
							callback('起售数量至少为1个')
						}
						return true
					}
				}
			]
		}
	}
	let bottomHeight = ref(100)
	
	const inputPaddingNone = ref(true)
	const form = ref(null)
	const formRefs = ref([]);
	const originSpecMap = {}
	
	let emitName = ''
	
	onReady(() => {
		getSafeBottomHeight('safe-bottom').then(res => {
			console.log(res);
			bottomHeight.value = res
		})
	})
	
	onShow(() => {
		canEditGoodsStock()
	})
	
	onLoad(opt => {
		Object.assign(option, opt)
		const obj = uni.getStorageSync('guige')
		getTbProductSpec(obj)
		if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
			emitName = opt.emitName
		}
	
	})
	function triggerEvent(emitName, data) {
		if (emitName) {
			uni.$emit(emitName, data)
		}
	}
	/**
	 * 获取规格数据
	 */
	function getTbProductSpec(obj) {
		getSpecList({name: ''}).then(res => {
			FormData.specAllList = res;
			FormData.specAllList.map(item => {
				item.children.map(spe => {
					spe.children.map(v => {
						if (obj && JSON.stringify(obj) !== '{}') {
							spe.selectSpecResult = []
							for (var oe in obj.selectSpecInfo) {
							
								if ( spe.name == oe ) {
									spe.selectSpecResult = obj.selectSpecInfo[oe]
								}
							}
						} else {
							spe.selectSpecResult = []
						}
						v.text = v.name
						v.value = v.name
					})
				})
			});
			if (obj && JSON.stringify(obj) !== '{}') {
				FormData.specAllList.map(item=>{
					if( item.id == obj.specId ){
						obj.selectSpecInfo = item.children
					}
				})
			}
			FormData.specList = res.map(item => {
				return {
					id: item.id,
					name: item.name,
				}
			})
			if (obj && JSON.stringify(obj) !== '{}') {
				// console.log(obj.selectSpecInfo);
				Object.assign(FormData, obj)
				for (let i of obj.result) {
					const key = returnSpecSnap(i.names)
					originSpecMap[key] = i
				}
				nextTick(() => {
					FormData.result = obj.result
				})
			}
		console.log(FormData)
		})
	}
	
	/**
	 * 规则选择
	 * @param {Object} e
	 */
	function specIdChange(e) {
	
		const item = FormData.specAllList.find(v => v.id === FormData.specId)
		FormData.selectSpecInfo = (item.children || [])
		console.log(item)

	}

	
	
	
	
	
	
	const refFiles = ref([]);
	const imageStyles = reactive({
		width: 82,
		height: 82,
		border: {
			radius: '4px'
		}
	})
	//绑定文件上传元素
	function setRefFile(index) {
		refFiles.value[index] = null;
		return (el) => {
			if (el) {
				refFiles.value[index] = el;
			}
		};
	}

	const fastEdit = reactive({
		show: false,
		list: [{
				text: '会员价',
				key: 'memberPrice',
				value: ''
			},
			{
				text: '成本价',
				key: 'costPrice',
				value: ''
			},
			{
				text: '原价',
				key: 'originPrice',
				value: ''
			},
			{
				text: '起售数量',
				key: 'suitNum',
				value: ''
			},
			{
				text: '库存数量',
				key: 'stockNumber',
				value: ''
			}
		],
		sel: ''
	})
	
	/**
	 * 批量修改打开
	 */
	function fastEditShow() {
		fastEdit.show = true
	}




	/**
	 * number类型数据限制
	 * @param {Object} item
	 * @param {Object} key
	 */
	function priceFormat(item, key) {
		nextTick(() => {
			let min = 0;
			let max = 100000000;
			if (key == 'suitNum') {
				min = 1
			}
			const newval = formatPrice(item[key], min, max, true)
			if (typeof newval !== 'number') {
				item[key] = newval.value
				uni.showToast({
					title: `请输入${min}到${max}范围内的数字`,
					icon: 'none'
				})
			} else {
				item[key] = newval
			}
		})
	}


	/**
	 * 批量修改监听
	 * @param {Object} arr
	 */
	function updateSkuKey(arr) {
		for (let i in FormData.result) {
			const sku = FormData.result[i].skus
			for (let k in arr) {
				const item = arr[k]
				if (sku.hasOwnProperty(item.key)) {
					sku[item.key] = item.value
				}
			}

		}
	}



	//表单相关事件
	function changeResultCover(val, index) {
		FormData.result[index].coverImg = val
	}
	//绑定表单元素
	function setFormRef(index) {
		formRefs.value[index] = null;
		return (el) => {
			if (el) {
				formRefs.value[index] = el;
			}
		};
	}
	watch(() => FormData.specId, (newval) => {
		FormData.result = []
	})
	const bottom = ref(null)
	// 表单样式
	const placeholderStyle = ref('font-size:28rpx;')
	//表单边框
	const inputBorder = ref(false)

	//生成笛卡尔集
	function combineSpecs(specs) {
		if (specs.length === 0) {
			return [
				[]
			];
		} else {
			const [head, ...tail] = specs;
			const rest = combineSpecs(tail);
			const pairs = head.value.map(value => rest.map(r => {
				return {
					[head.name]: value,
					...r
				}
			}));
			return [].concat(...pairs);
		}
	};
	const defaultSku = reactive({
		...$defaultSku,
		coverImg: '',
		barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
	})

	function returnDefaultSku() {
		const randomNumber = Math.floor(Math.random() * 1000)
		return {
			...defaultSku,
			barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()-randomNumber}`
		}
	}
	
	/**
	 * 选择规格属性
	 */
	function createResult() {
		let arr = []
		for (let k of FormData.selectSpecInfo) {
			if (k.selectSpecResult.length) {
				arr.push({
					value: k.selectSpecResult,
					name: k.name
				})
			}
		}
		const spes = combineSpecs(arr)
		const result = spes.filter(v => {
			return !Array.isArray(v)
		}).map(v => {
			const specInfo = returnSpecSnap(v)
			const data = originSpecMap[specInfo]
			const skus = returnDefaultSku()
			const newdata = {
				names: v,
				specInfo,
				skus
			}
			return data || newdata
		})
		FormData.result = result
	}





	//页面滚动到最底部
	function scrollPageBottom() {
		nextTick(() => {
			uni.pageScrollTo({
				duration: 100, // 过渡时间
				scrollTop: 100000, // 滚动的实际距离
			})
		})
	}



	//生成name
	function returnSpecSnap(names) {
		const specInfo = Object.keys(names).reduce((prve, cur) => {
			return prve + names[cur] + ','
		}, '')
		return specInfo.substring(0, specInfo.length - 1)
	}
	// 允许修改商品库存
	let disabledStock = ref(false)
	async function canEditGoodsStock(tips = false) {
		console.log(tips);
		if (option.type === 'edit') {
			const res = await hasPermission({
				text: '允许修改商品库存',
				tips: tips
			})
			disabledStock.value = !res
		}
	}

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

	function returnPromise(prosise) {
		return new Promise((resolve, reject) => {
			prosise.then(res => {
				resolve({
					sucees: true
				})
			}).catch(err => {
				console.log(err);
				if (err.length >= 1) {
					infoBox.showToast(err[0].errorMessage)
				}
				resolve({
					sucees: false
				})
			})
		})
	}
	async function save() {
		if (!FormData.result.length) {
			return infoBox.showToast('请先选择规格！')
		}
		let isAllPassForm = 0
		for (let i in FormData.result) {
			const res = await returnPromise(formRefs.value[i].validate(), i)
			isAllPassForm += res.sucees ? 1 : 0
		}
		if (isAllPassForm < FormData.result.length) {
			return
		}
		//判断验证是否通过
		console.log('pass');
		const item = FormData.specList.find(v => v.id === FormData.specId)
		FormData.specName = item ? item.name : ''
		console.log(FormData);
		emitspecificationsSave()

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

	::v-deep.uni-forms-item__content {
		margin: auto;
	}

	::v-deep .uni-forms-item--border {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}

	::v-deep.uni-forms-item {
		min-height: inherit;
	}

	.page {
		background: #F9F9F9;
		padding: 30rpx 30rpx 0 30rpx;
	}

	.safe-bottom {
		padding: 34rpx 28rpx;
		position: fixed;
		background-color: #fff;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;

		.btn {
			padding: 0 88rpx 56rpx 88rpx;
		}
	}

	.my-switch {
		transform: scale(0.7);
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner{
		border-radius: 50%;
	}

	::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));
		}
	}

	::v-deep .uni-easyinput__content-input {
		height: inherit;
	}

	.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;
		z-index: 100;
	}

	::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;
	}

	.edit-btn {
		background-color: #fff;
		color: #333;
		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;
	}

	.fast-edit {
		.item {
			color: #333;
			border: 1px solid #bbb;
			padding: 4rpx 10rpx 8rpx 10rpx;
			border-radius: 10rpx;
			min-width: 186rpx;

			&.active {
				color: $my-main-color;
			}
		}
	}

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

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

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