<template>
	<view class="u-p-30 safe-page min-page">
		<up-sticky v-if="option.type === 'edit'" offset-top="20" zIndex="99">
			<my-tabs :list="tabsList" v-model="tabsCurrent"></my-tabs>
		</up-sticky>
		<view class="box">
				<view class="basic" v-show="tabsCurrent === 0">
					<uni-forms :model="FormData" :rules="rules" :border="true" label-position="top"
						err-show-type="toast" validateTrigger="submit" label-width="350" ref="Forms">
						<view class="block">
							<view class="border-top-0 typeEnum">
								<uni-forms-item label="商品类型" required showRequired>
									<up-radio-group v-model="FormData.type" @change="changeFormDatatype">
										<view style="display: flex; flex-wrap: wrap; justify-content: flex-start">
											<view v-for="(item, index) in pageData.types" :key="index"
												style="margin-right: 30rpx">
												<up-radio :label="item.name" :name="item.value"></up-radio>
											</view>
										</view>
									</up-radio-group>
								</uni-forms-item>
							</view>

							<view class="" v-if="FormData.type === 'package'">
								<uni-forms-item label="套餐商品">
									<up-radio-group v-model="FormData.groupType" placement="row">
										<up-radio :custom-style="{ marginRight: '30px' }"
											v-for="(item, index) in packageType.list" :key="index" :label="item.name"
											:name="item.value"></up-radio>
									</up-radio-group>
								</uni-forms-item>
							</view>
							<uni-forms-item required name="name" label="商品名称" showRequired>
								<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
									:inputBorder="inputBorder" v-model="FormData.name" placeholder="请输入商品名称" />
							</uni-forms-item>
							<uni-forms-item ref="fileItem" label="图片" required showRequired>
								<my-upload-file ref="refFile" :images="FormData.images"
									:imageStyles="imageStyles"></my-upload-file>
								<view class="u-m-t-16 color-999 u-font-24">注:第一张图为商品封面图，图片尺寸为750x750</view>
							</uni-forms-item>
							<view class="u-relative">
								<uni-forms-item label="商品分类" required showRequired name="categoryId">
									<uni-data-picker :clear-icon="false" :map="{ text: 'name', value: 'id' }"
										placeholder="请选择商品分类" popup-title="请选择商品分类" :localdata="pageData.category"
										v-model="FormData.categoryId"></uni-data-picker>
								</uni-forms-item>
								<view class="zhezhao u-absolute position-all" @click="canEditGoodsCategory(true)"
									v-if="option.type == 'edit' && disabledChangeCategory"></view>
							</view>
							<view class="">
								<uni-forms-item label="单位" required showRequired name="units">
									<uni-data-picker :clear-icon="false" @change="unitIdChange"
										:map="{ text: 'name', value: 'id' }" placeholder="请选择单位" popup-title="请选择单位"
										:localdata="pageData.units" v-model="FormData.unitId"></uni-data-picker>
								</uni-forms-item>
							</view>
							<template v-if="FormData.type === 'package'">
								<view class="border-top" v-if="FormData.proGroupVo">
									<view class="" v-if="
											(FormData.groupType == 1 && FormData.proGroupVo.length) ||
											(FormData.groupType == 0 && FormData.proGroupVo.length && FormData.proGroupVo[0].goods.length)
										">
										<view class="border-bottom u-p-b-32"
											v-for="(item, index) in FormData.proGroupVo" :key="index">
											<view class="u-p-t-24" v-if="FormData.groupType == 1">
												<view class="u-flex u-row-between">
													<view class="u-flex">
														<text class="color-red">*</text>
														<text class="font-bold">套餐名称</text>
													</view>

													<view class="u-flex color-999" @tap="delproGroupVo(index)">
														<uni-icons type="minus-filled" :size="16"
															:color="$utils.ColorRed"></uni-icons>
														<view class="u-m-l-10">删除套餐组</view>
													</view>
												</view>
												<view class="u-flex u-m-t-16">
													<up-input v-model="item.title" placeholder="请输入套餐名称"></up-input>
													<view class="u-flex color-main u-font-24 u-m-l-24"
														@click="proGroupVoAddGoods(index, item.goods)">
														<up-icon name="plus" :size="12"
															:color="$utils.ColorMain"></up-icon>
														<view class="font-bold">添加商品</view>
													</view>
												</view>
											</view>
											<view class="u-m-t-24" v-if="item.goods.length > 0">
												<!-- <view class="font-bold">商品信息</view> -->
												<view class="u-font-24 table">
													<view class="u-flex title">
														<view class="u-flex-1">名称</view>
														<view class="u-flex-1 u-text-center">规格</view>
														<view class="u-flex-1 u-text-center">价格</view>
														<view class="u-flex-1 u-text-right">
															<view class="u-p-r-40">数量</view>
														</view>
													</view>
													<view class="u-flex row u-p-24 u-row-between"
														v-for="(product, goodsIndex) in item.goods" :key="goodsIndex">
														<view class="u-flex u-flex-1">
															<view class="  ">
																{{ product.name || product.proName }}
															</view>
														</view>
														<view class="u-flex u-row-center u-flex-1">
															<view
																@click="refChooseGuigeOpen(product.skuList, index, goodsIndex)"
																class="">
																<template
																	v-if="!product.skuName && product.type == 'sku'">
																	<up-button type="primary"
																		size="mini">设置规格</up-button>
																</template>
																<template v-else>
																	<text
																		class="color-main">{{ product.skuName }}</text>
																</template>
															</view>
														</view>
														<view class="u-flex u-flex-1 u-row-center">
															<view class="u-text-center">
																{{ product.lowPrice || product.price }}
															</view>
														</view>
														<view class="u-flex u-text-right u-flex-1 u-row-right">
															<view class="u-flex u-p-r-30">
																<up-number-box :button-size="14" integer
																	v-model="product.number">
																	<template #minus>
																		<view class="minus">
																			<up-icon name="minus" size="12"></up-icon>
																		</view>
																	</template>
																	<template #plus>
																		<view class="plus">
																			<up-icon name="plus" size="12"></up-icon>
																		</view>
																	</template>
																</up-number-box>
															</view>
															<up-icon @click="proGroupVoGoodsDel(index, goodsIndex)"
																size="14" name="trash"
																:color="$utils.ColorMain"></up-icon>
														</view>
													</view>
												</view>
											</view>
											<template v-if="FormData.groupType == 1">
												<view class="u-m-t-24">
													<text class="color-red">*</text>
													<text class="font-bold">几选几</text>
												</view>
												<view class="u-flex u-m-t-16">
													<uni-number-box :min="1" :max="item.goods.length" :width="200"
														v-model="item.number" placeholder="几选几"></uni-number-box>
												</view>
											</template>
										</view>
									</view>
									<template v-if="FormData.groupType == 1">
										<view class="bg-fff u-flex u-p-t-24 u-p-b-24 border-r-12" @tap="proGroupVoPush">
											<uni-icons type="plus-filled" :color="$utils.ColorMain"
												:size="20"></uni-icons>
											<view class="u-m-l-16">添加套餐组</view>
										</view>
									</template>
									<template v-else>
										<view class="bg-fff u-flex u-p-t-24 u-p-b-24 border-r-12"
											@tap="proGroupVoAddGoods()">
											<uni-icons type="plus-filled" :color="$utils.ColorMain"
												:size="20"></uni-icons>
											<view class="u-m-l-16">添加商品</view>
										</view>
									</template>
								</view>
							</template>

							<view class="">
								<uni-forms-item label="商品描述">
									<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
										type="textarea" v-model="FormData.shortTitle" placeholder="请填写商品简述" />
								</uni-forms-item>
							</view>
						</view>
						<template v-if="FormData.type == 'sku'">
							<view class="block border-top-0 u-p-t-32 u-p-b-32">
								<view class="u-flex u-row-between">
									<view class="color-333 font-bold">
										<text v-if="!skuList.list.length">选择规格</text>
										<text v-else>编辑规格</text>
									</view>
									<view class="u-flex u-col-center" @tap="toGuige">
										<view>
											<text v-if="FormData.specName">{{ FormData.specName }}</text>
											<text class="color-999" v-else>请选择</text>
										</view>
										<view class="u-flex u-p-t-2">
											<uni-icons type="right" :size="14" color="#999"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</template>

						<template v-if="FormData.type != 'sku'">
							<view class="block u-p-t-32 u-p-b-32" v-for="(sku, index) in skuList.list" :key="index">
								<view class="font-bold u-m-b-32 u-text-center">规格属性</view>
								<view class="u-flex w-full gap-26 u-row-between">
									<view class="u-flex-1">
										<view>
											<text class="color-red">*</text>
											<text>原价</text>
										</view>
										<view class="u-m-t-16">
											<price-number-box placeholder="请输入原价"
												v-model="sku.originPrice"></price-number-box>
										</view>
									</view>
									<view class="u-flex-1">
										<view>
											<text class="color-red">*</text>
											<text>售价</text>
										</view>
										<view class="u-m-t-16">
											<price-number-box placeholder="请输入售价"
												v-model="sku.salePrice"></price-number-box>
										</view>
									</view>
								</view>
								<view class="u-flex w-full gap-26 u-row-between u-m-t-24">
									<view class="u-flex-1">
										<view>
											<text class="color-red">*</text>
											<text>会员价</text>
										</view>
										<view class="u-m-t-16">
											<price-number-box placeholder="请输入会员价（元）"
												v-model="sku.memberPrice"></price-number-box>
										</view>
									</view>
									<view class="u-flex-1">
										<view>
											<text class="color-red">*</text>
											<text>成本价</text>
										</view>
										<view class="u-m-t-16">
											<price-number-box placeholder="请输入成本价"
												v-model="sku.costPrice"></price-number-box>
										</view>
									</view>
								</view>
								<view class="u-m-t-24">
									<view>
										<text class="color-red">*</text>
										<text>起售数量</text>
									</view>
									<view class="u-m-t-16">
										<price-number-box inputType="number" placeholder="请输入起售数量"
											v-model="sku.suitNum"></price-number-box>
									</view>
								</view>
								<view class="u-m-t-24">
									<view class="">商品条形码</view>
									<view class="u-m-t-16 barCode color-999">
										{{ sku.barCode }}
									</view>
								</view>
							</view>
						</template>
						<template v-if="FormData.type == 'weight'">
							<view class="block u-p-t-32 u-p-b-32">
								<view class="font-bold">
									<text class="color-red">*</text>
									<text>单位</text>
								</view>
								<view class="u-m-t-16">
									<up-input v-model="FormData.weight">
										<template #suffix>
											<view class="bg-gray">{{ activeinHouseList }}</view>
										</template>
									</up-input>
									<view class="u-m-t-16 color-999 u-font-24">用于快递或配送运费计重</view>
								</view>
							</view>
						</template>

						<template v-if="FormData.type != 'group'">
							<view class="block">
								<view>
									<uni-forms-item label="">
										<view class="u-flex u-row-between" @tap="toTimerPage">
											<view style="display: flex">
												<text class="color-red">*</text>
												<view class="label-title">定时上下架</view>
											</view>
											<view class="u-flex u-font-24">
												<view>
													<view class="color-666">{{ returnTimerDayText() }}</view>
													<view class="color-666 u-m-t-4" v-if="FormData.days">
														{{ returnTimerTimeText() }}
													</view>
												</view>
												<uni-icons type="right"></uni-icons>
											</view>
										</view>
									</uni-forms-item>
								</view>
								<view class="">
									<uni-forms-item label="">
										<view class="u-flex u-row-between">
											<view class="label-title">上架</view>
											<my-switch disabled :openDisabledClass="false" @click="isGroundingChange"
												v-model="FormData.isSale"></my-switch>
										</view>
									</uni-forms-item>
								</view>
								<!-- <uni-forms-item label="">
									<view class="u-flex u-row-between">
										<view class="label-title">库存开关</view>
										<my-switch v-model="FormData.isStock"></my-switch>
									</view>
									<view class="color-999 u-m-t-16 u-font-24">注：关闭则不计算出入库数据</view>
								</uni-forms-item>
								<template v-if="FormData.isStock">
									<view class="u-relative">
										<uni-forms-item label="库存数量">
											<uni-easyinput
												@blur="priceFormat(FormData, 'stockNumber')"
												:paddingNone="inputPaddingNone"
												:disabled="disabledStock"
												:placeholderStyle="placeholderStyle"
												:inputBorder="inputBorder"
												v-model="FormData.stockNumber"
												type="digit"
												placeholder="请输入库存数量"
											/>
										</uni-forms-item>
										<view class="u-absolute position-all" v-if="disabledStock" @click="canEditGoodsStock(true)"></view>
									</view>
								</template> -->

								<uni-forms-item label="">
									<view class="u-flex u-row-between">
										<view class="label-title">设为推荐</view>
										<my-switch v-model="FormData.isHot"></my-switch>
									</view>
								</uni-forms-item>

								<uni-forms-item label="打包费">
									<uni-easyinput @blur="priceFormat(FormData, 'packFee')"
										:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
										:inputBorder="inputBorder" v-model="FormData.packFee" type="digit"
										placeholder="请输入打包费" />
								</uni-forms-item>

								<template v-if="option.type === 'edit'">
									<uni-forms-item label="排序">
										<uni-easyinput @blur="priceFormat(FormData, 'sort')"
											:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
											:inputBorder="inputBorder" v-model="FormData.sort" type="digit"
											placeholder="请输入排序" />
									</uni-forms-item>
								</template>




							</view>
						</template>
					</uni-forms>
					<view style="height: 100rpx"></view>
					<view style="padding-left: 110rpx; padding-right: 110rpx" class="u-m-t-20"
						v-if="option.type === 'edit'" @click="delModelShow">
						<my-button bgColor="#F9F9F9" shape="circle" type="cancel">
							<view class="color-red">删除该商品</view>
						</my-button>
					</view>
					<view class="bootom">
						<view class="save-btn-box">
							<my-button fontWeight="700" shape="circle" @tap="save">保存</my-button>
						</view>
					</view>
				</view>
			<template v-if="tabsCurrent === 1">
				<edit-haocai @updateGoods="updateGoodsDetail" :goods="FormData"
					v-model:isAutoSoldStock="FormData.isAutoSoldStock"
					v-model:refundMode="FormData.refundMode"
				
					@cancel="changeTabsCurrent(0)"></edit-haocai>
			</template>
			<template v-if="tabsCurrent === 2">
				<view class="link-goods">
					<view class="font-bold">关联推荐商品</view>
					<view class="tips u-m-t-10">
						<text class="t">设置商品后，用户可以在商品详情页中看到推荐商品，最多设置{{ goodsListMax }}个商品</text>
					</view>
					<view class="table">
						<view class="tabhead">
							<view class="tr">
								<view class="td">
									<text class="t">图片</text>
								</view>
								<view class="td">
									<text class="t">商品名称</text>
								</view>
								<view class="td">
									<text class="t">操作</text>
								</view>
							</view>
						</view>
						<view class="tbbody">
							<view class="tr" v-for="(item, index) in FormData.relatedRecommendJson" :key="index">
								<view class="td">
									<image class="cover" :src="item.coverImg" mode="aspectFill"></image>
								</view>
								<view class="td">
									<text class="t">{{ item.name }}</text>
								</view>
								<view class="td">
									<u-text type="error" text="删除"
										@click="FormData.relatedRecommendJson.splice(index, 1)"></u-text>
								</view>
							</view>
							<view class="table-tips" v-if="!FormData.relatedRecommendJson.length">
								<text class="t">暂无数据</text>
							</view>
						</view>
					</view>
					<view class="add-goods" v-if="FormData.relatedRecommendJson.length < goodsListMax">
						<view class="btn">
							<u-text type="primary" text="添加商品" prefixIcon="plus" iconStyle="color:#409EFF;"
								@click="toSelectGoodsPage"></u-text>
						</view>
					</view>
				</view>

			</template>
		</view>
		<!-- 删除弹窗 -->
		<my-model @confirm="delmodelConfirm" ref="delModel" desc="确认删除"></my-model>
		<!-- 选择商品 -->
		<choose-goods ref="refChooseGoods" @confirm="refChooseGoodsConfirm"
			:category="pageData.category"></choose-goods>
		<!-- 选择规格 -->
		<choose-guige ref="refChooseGuige" @confirm="refChooseGuigeConfirm"></choose-guige>
	</view>
</template>

<script setup>
	import {
		computed,
		onBeforeUnmount,
		reactive,
		ref,
		watch,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';

	import dayjs from 'dayjs';
	import {
		formatPrice
	} from '@/commons/utils/format.js';

	import go from '@/commons/utils/go.js';

	import linkGoods from './components/link-goods.vue';
	import chooseGoods from './components/choose-goods';
	import chooseGuige from './components/choose-guige';
	import editHaocai from './components/edit-haocai.vue';
	import chooseGroupCategory from './components/choose-coupon-category';
	import priceNumberBox from './components/price-number-box';

	import infoBox from '@/commons/utils/infoBox.js';

	import {
		hasPermission
	} from '@/commons/utils/hasPermission.js';

	import {
		$defaultSku
	} from '@/commons/goodsData.js';

	import {
		getCategoryList,
		getProdUnitList,
		getProductDetail,
		addProduct,
		updateProduct,
		delProduct,
		productBindCons
	} from '@/http/api/product.js';
	import {
		uploadFile
	} from '@/http/api/index.js';

	const imageStyles = reactive({
		width: 82,
		height: 82,
		border: {
			radius: '4px'
		}
	});

	let option = reactive({
		type: 'add',
		productId: ''
	});

	// 表单样式
	//可以不使用ref，但是小程序一堆wraning ，烦，改为了ref
	const placeholderStyle = ref('font-size:28rpx;');
	const inputPaddingNone = ref(true);

	// ================== 关联商品 start
	const goodsListMax = ref(9);

	// 跳转去选择商品
	function toSelectGoodsPage() {
		uni.navigateTo({
			url: '/pageMarket/packagePopularize/selectGoods'
		});
	}

	// 从本地获取选择的商品
	function getLocalSelectGoods() {
		let res = uni.getStorageSync('packageSelectGoods');
		if (res && res.id) {
			if (res.id === FormData.id) {
				uni.showToast({
					title: '不能选择当前商品',
					icon: 'none'
				});
				return;
			}

			let obj = FormData.relatedRecommendJson.find((item) => item.id == res.id);
			if (obj && obj.id) {
				uni.showToast({
					title: '该商品已选择',
					icon: 'none'
				});
				return;
			}
			FormData.relatedRecommendJson.push({
				...res
			});
		}
		uni.setStorageSync('packageSelectGoods', '');
	}
	// ================== 关联商品 end

	//表单边框
	const inputBorder = ref(false);
	const FormData = reactive({
		id: '',
		name: '', //商品名称
		shortTitle: '', //商品介绍
		unitId: '', //单位id
		categoryId: '', //商品分类id
		coverImg: '', //封面图url
		images: [], //详情图urls
		type: 'single', //商品类型single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
		specId: '', //规格ID
		skuList: [], //规格数据
		groupType: null, //套餐类型
		proGroupVo: [], //套餐数据
		weight: 0, //重量
		isAllowTempModifyPrice: 1, //是否允许改价
		days: 'Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday', //定时上下架周期
		startTime: '00:00:00', //开始时间
		endTime: '23:59:00', //结束时间
		isSale: 1, //是否上架
		isStock: 0, //是否开启库存
		isHot: 0, //设为推荐
		stockNumber: 0, //库存数量
		packFee: 0, //打包费
		sort: 1, //排序值
		specName: '', //规格模版名称
		isAutoSoldStock:0,
		isRefundStock:1,
		unitName: '',
		specificationsGroup: '',
		relatedRecommendJson: [] // 关联商品
	});
	//页面全部数据
	const pageData = reactive({
		// 商品类型
		types: [{
				name: '单规格商品',
				value: 'single'
			},
			{
				name: '多规格商品',
				value: 'sku'
			},
			{
				name: '套餐商品',
				value: 'package'
			},
			{
				name: '称重商品',
				value: 'weight'
			}
			// {
			// 	name: '团购券',
			// 	value: 'coupon'
			// },
		],
		// 单位
		units: [],
		// 分类
		category: [],
		//库存
		skuList: []
	});
	const skuList = reactive({
		list: [{
			...$defaultSku,
			barCode: `${uni.getStorageSync('shopId')}${dayjs().valueOf()}`
		}]
	});

	let $goodsData = {};
	// 商品图片组件
	const refFile = ref(null);
	/**
	 * 监听商品类型变化
	 */
	console.log(FormData);
	watch(
		() => FormData.type,
		(newval) => {
			if (option.type == 'edit') {
				FormData.specId = newval != 'sku' ? '' : $goodsData.specId || '';
				console.log($goodsData);
				if (newval == $goodsData.type) {
					skuList.list = $goodsData.skuList;
					if ($goodsData.groupSnap) {
						FormData.proGroupVo = $goodsData.groupSnap || [];
					} else {
						initDefaultProGroupVo();
					}
				} else {
					if (newval != 'sku') {
						skuList.list = [{
							...$defaultSku,
							barCode: `${uni.getStorageSync('shopId')}${dayjs().valueOf()}`
						}];
					} else {
						skuList.list = [];
					}
				}
				if (FormData.groupType == null) {
					FormData.groupType = 0;
				}
			} else {
				FormData.specId = '';
				if (newval != 'sku') {
					skuList.list = [{
						...$defaultSku,
						barCode: `${uni.getStorageSync('shopId')}${dayjs().valueOf()}`
					}];
				} else {
					skuList.list = [];
				}
				if (newval == 'package') {
					initDefaultProGroupVo();
				}
			}
		}
	);

	/**
	 * 监听套餐类型变化
	 */
	watch(
		() => FormData.groupType,
		(newval) => {
			if (newval == 0) {
				return initDefaultProGroupVo();
			}
			if (option.type == 'edit') {
				if (newval == $goodsData.groupType) {
					FormData.proGroupVo = $goodsData.groupSnap;
				}
				return;
			}
			initDefaultProGroupVo();
		}
	);
	watch(
		() => pageData.types,
		(newval) => {
			Forms.value.setRules(rules);
		}
	);
	watch(
		() => skuList.list,
		(newval) => {
			console.log(newval);
		}
	);

	onLoad((params) => {
		if (params && JSON.stringify(params) !== '{}') {
			option.type = params.type ? params.type : 'add';
			option.productId = params.productId;
		}
		canEditGoodsCategory();
		uni.setNavigationBarTitle({
			title: option.type === 'add' ? '添加商品' : '编辑商品'
		});
		if (option.type === 'edit') {
			getGoodsDetail();
		}

		getCategory();
		getTbShopUnit();

		uni.setStorageSync('packageSelectGoods', '');
	});
	onReady(() => {
		Forms.value && Forms.value.setRules(rules);
	});
	onShow(() => {
		watchSpecificationsSave();
		watchTimerSave();
		getLocalSelectGoods();
	});

	function getGoodsDetail() {
		getProductDetail(option.productId).then((res) => {
			res.images = res.images.map((v) => {
				return {
					url: v
				};
			});
			res.consList.map((v) => {
				const item = res.skuList.find((v) => v.productId == v.productId);
				if (item) {
					if (item.hasOwnProperty('haoCaiList')) {
						item.haoCaiList.push(v);
					} else {
						item.haoCaiList = [v];
					}
				}
			});

			res.skuList = res.skuList.length ? res.skuList : [];

			$goodsData = res;
			skuList.list = res.skuList;
			Object.assign(FormData, res);
			//多规格
			if (res.type == 'sku') {
				FormData.specificationsGroup = {
					specId: res.specId,
					selectSpecInfo: res.selectSpecInfo,
					result: res.skuList.map((v) => {
						const names = v.specInfo.split(',').reduce((prve, cur) => {
							let key;
							for (var oe in res.selectSpecInfo) {
								res.selectSpecInfo[oe].map((i) => {
									if (i == cur) {
										key = oe;
									}
								});
							}
							prve[key] = cur;
							return prve;
						}, {});
						return {
							skus: {
								...v
							},
							names,
							specInfo: v.specInfo,
							coverImg: v.coverImg
						};
					})
				};
			} else {
				// 单规格
			}
		});
	}

	/**
	 * 获取分类
	 */
	function getCategory() {
		getCategoryList({
			page: 1,
			size: 200
		}).then((res) => {
			pageData.category = res;
		});
	}

	/**
	 * 获取单位数据
	 */
	function getTbShopUnit() {
		getProdUnitList().then((res) => {
			pageData.units = res;
		});
	}

	/**
	 * 耗材取消监听
	 * @param {Object} newval
	 */
	function changeTabsCurrent(newval) {
		tabsCurrent.value = newval;
	}

	/**
	 * 分类选择监听
	 */
	const changeFormDatatype = (e) => {
		if (FormData.type == 'package') {
			FormData.groupType = 0;
		} else {
			FormData.groupType = null;
		}
		console.log(FormData);
	};

	/**
	 * 选择单位监听
	 * @param {Object} e
	 */
	function unitIdChange(e) {
		FormData.unitName = e.detail.value[0].text;
	}

	async function isGroundingChange(e) {
		// if (option.type == 'add') {
		// 	FormData.isSale = FormData.isSale ? 0 : 1
		// 	return
		// }
		// const res = await hasPermission('允许上下架商品')
		// if (!res) {
		// 	return
		// }
		FormData.isSale = FormData.isSale ? 0 : 1;
	}

	/**
	 * 固定套餐设置规格
	 */
	const refChooseGuige = ref(null);
	let proGroupVoGoodsIndex = undefined;
	/**
	 * 规格打开
	 * @param {Object} skuList
	 * @param {Object} groupIndex
	 * @param {Object} goodsIndex
	 */
	function refChooseGuigeOpen(skuList, groupIndex, goodsIndex) {
		proGroupVoIndex = groupIndex;
		proGroupVoGoodsIndex = goodsIndex;
		console.log(skuList);
		refChooseGuige.value.open(skuList);
	}

	/**
	 * 规格确认
	 * @param {Object} sku
	 */
	function refChooseGuigeConfirm(sku) {
		FormData.proGroupVo[proGroupVoIndex].goods[proGroupVoGoodsIndex].skuName = sku.specInfo || sku.name;
		FormData.proGroupVo[proGroupVoIndex].goods[proGroupVoGoodsIndex].skuId = sku.id;
		proGroupVoIndex = undefined;
		proGroupVoGoodsIndex = undefined;
	}

	/**
	 * 套餐商品选择
	 */
	const refChooseGoods = ref(null);
	let proGroupVoIndex = undefined;

	/**
	 * 添加商品
	 * @param {Object} index
	 * @param {Object} arr
	 */
	function proGroupVoAddGoods(index, arr) {
		proGroupVoIndex = index;
		if (!FormData.proGroupVo) {
			initDefaultProGroupVo();
		}
		if (FormData.groupType == 0) {
			const goods = FormData.proGroupVo[0].goods;
			refChooseGoods.value.open(goods);
		} else {
			refChooseGoods.value.open(arr);
		}
	}

	/**
	 * 添加套餐组
	 */
	function proGroupVoPush() {
		FormData.proGroupVo.push({
			title: '',
			count: 1,
			goods: []
		});
		console.log(FormData.proGroupVo);
	}

	/**
	 * 删除套餐组
	 * @param {Object} index
	 */
	function delproGroupVo(index) {
		FormData.proGroupVo.splice(index, 1);
	}

	/**
	 * 删除套餐商品
	 * @param {Object} index
	 * @param {Object} goodsIndex
	 */
	function proGroupVoGoodsDel(index, goodsIndex) {
		FormData.proGroupVo[index].goods.splice(goodsIndex, 1);
	}

	function refChooseGoodsClose() {
		refChooseGoods.value.close();
	}

	/**
	 * 套餐选择商品
	 * @param {Object} arr
	 */
	function refChooseGoodsConfirm(arr) {
		refChooseGoodsClose();
		arr = arr.map((v) => {
			const {
				proId,
				id,
				name,
				unitName,
				lowPrice,
				type,
				skuList
			} = v;
			if (proId) {
				return v;
			}
			return {
				proId: id,
				proName: name,
				unitName,
				price: lowPrice,
				number: 1,
				type,
				skuList,
				skuId: '',
				skuName: ''
			};
		});

		if (FormData.groupType == 0) {
			return (FormData.proGroupVo[0].goods = arr);
		}
		if (FormData.groupType == 1 && proGroupVoIndex !== undefined) {
			return (FormData.proGroupVo[proGroupVoIndex].goods = arr);
		}
		FormData.proGroupVo.push({
			title: '',
			count: 1,
			goods: arr
		});
	}

	/**
	 * number类型数据限制
	 * @param {Object} item
	 * @param {Object} key
	 */
	function priceFormat(item, key) {
		nextTick(() => {
			const min = 0;
			const max = 100000000;
			if (item[key] === '') {
				return;
			}
			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;
			}
		});
	}

	/**
	 * 套餐商品类型
	 */
	const packageType = reactive({
		list: [{
				name: '固定套餐',
				value: 0
			},
			{
				name: '可选套餐',
				value: 1
			}
		],
		sel: 0
	});

	const tabsList = ['基础设置', '耗材设置', '关联推荐商品'];
	let tabsCurrent = ref(0);
	const Forms = ref(null);
	const delModel = ref(null);
	const rules = {
		images: {
			rules: [{
				validateFunction: function(rule, value, data, callback) {
					console.log(value);
					if (value.length < 1) {
						callback('请上传商品图片');
					}
					return true;
				}
			}]
		},
		name: {
			rules: [{
					required: true,
					errorMessage: '请输入商品名称'
				},
				{
					minLength: 1,
					maxLength: 40,
					errorMessage: '商品名称长度在 {minLength} 到 {maxLength} 个字符'
				}
			]
		},
		categoryId: {
			rules: [{
				required: true,
				errorMessage: '请选择商品分类'
			}]
		},
		floorPrice: {
			rules: [{
				required: true,
				errorMessage: '请填写商品底价'
			}]
		}
	};

	/**
	 * 删除提示打开
	 */
	function delModelShow() {
		delModel.value.open();
	}

	/**
	 * 删除商品
	 */
	function delmodelConfirm() {
		delProduct(option.productId).then((res) => {
			uni.showToast({
				icon: 'none',
				title: '删除成功'
			});
			setTimeout(() => {
				uni.$emit('del:productIndex', option.productId);
				go.back();
			}, 500);
		});
	}

	function updateGoodsDetail() {
		// getGoodsDetail();
		save()
	}

	let timer = null;

	function settimeoutBack(time) {
		clearTimeout(timer);
		timer = setTimeout(() => {
			uni.$emit('update:productIndex');
			uni.navigateBack();
		}, time);
	}

	//保存
	async function save() {
		const bol = await hasPermission('允许修改商品');
		if (!bol) {
			return;
		}
		Forms.value
			.validate()
			.then((res) => {
				const {
					groupType,
					type
				} = FormData;

				const images = refFile.value.getFileList();
				if (images.length <= 0) {
					return infoBox.showToast('请上传商品图片');
				}

				let selectSpecInfo = $goodsData.selectSpecInfo;
				if (FormData.specificationsGroup.specAllList) {
					selectSpecInfo = {};
					for (let i of FormData.specificationsGroup.selectSpecInfo) {
						if (i.selectSpecResult.length) {
							selectSpecInfo[i.name] = i.selectSpecResult;
						}
					}
				}

				if (type != 'sku') {
					let lowPrice = skuList.list[0] ? skuList.list[0].salePrice : FormData.salePrice;
					let suitNum = skuList.list[0] ? skuList.list[0].suitNum : 0;
					if (lowPrice === '') {
						return infoBox.showToast('请输入售价');
					}
					if (suitNum <= 0) {
						return infoBox.showToast('起售数量不能小于0！');
					}
					if (FormData.stockNumber === '') {
						return infoBox.showToast('请输入库存数量！');
					}
				}
				if (type == 'sku') {
					if (selectSpecInfo.length == 0 || JSON.stringify(selectSpecInfo) == '{}') {
						return infoBox.showToast('请选择规格！');
					}
				}
				if (type == 'package') {
					if (groupType == 0 && FormData.proGroupVo[0].goods.length <= 0) {
						// 固定套餐
						return infoBox.showToast('套餐组合至少需要包含一种商品，请添加商品');
					}
					if (groupType == 1) {
						let ispase = FormData.proGroupVo.length > 0 ? true : false;
						let tips = ispase ? '' : '请添加至少一种套餐';
						for (let i in FormData.proGroupVo) {
							FormData.proGroupVo[i].count = FormData.proGroupVo[i].goods.length;
							const item = FormData.proGroupVo[i];
							if (item.goods.length <= 0) {
								ispase = false;
								tips = '套餐组合至少需要包含一种商品，请添加商品';
								break;
							}
							if (!item.title) {
								ispase = false;
								tips = '请输入套餐名称';
								break;
							}
						}
						if (!ispase) {
							return infoBox.showToast(tips);
						}
						// 可选套餐
					} else {
						FormData.proGroupVo[0].count = FormData.proGroupVo[0].goods.length;
						FormData.proGroupVo[0].number = 1;
					}
				}
				if (type == 'weight') {
					if (!FormData.weight) {
						return infoBox.showToast('请输入重量');
					}
				}
				const submitData = {
					...FormData,
					proGroupVo: type != 'package' ? '' : FormData.proGroupVo,
					images: images,
					coverImg: images[0] || '',
					skuList: skuList.list,
					selectSpecInfo: selectSpecInfo
				};
				//编辑
				if (option.type === 'edit') {
					return updateProduct(submitData).then((res) => {
						infoBox.showSuccessToast('更新成功');
						settimeoutBack(1500);
					});
				}
				// 如果套餐没选择规格,默认选中第一条
				if (submitData.proGroupVo) {
					submitData.proGroupVo.forEach((res, index) => {
						submitData.proGroupVo[index].goods.forEach((ele) => {
							if (!ele.skuId) {
								ele.skuId = ele.skuList[0].id;
								ele.skuName = ele.skuList[0].specInfo || ele.skuList[0].name;
							}
						});
					});
				}
				addProduct(submitData).then((res) => {
					infoBox.showSuccessToast('添加成功');
					settimeoutBack(1500);
				});
			})
			.catch((err) => {
				console.log(err);
			});
	}

	/**
	 *  监听规格保存,拿到数据
	 */

	function watchSpecificationsSave() {
		uni.$off('emitspecificationsSave');
		uni.$on('emitspecificationsSave', function(data) {
			console.log(data);
			FormData.specificationsGroup = data;
			FormData.specId = data.specId;
			FormData.specName = data.specName;
			skuList.list = data.result.map((v) => {
				return {
					...v.skus,
					...v.names,
					specInfo: v.specInfo,
					coverImg: v.coverImg || ''
				};
			});
		});
	}

	/**
	 * 编辑规格
	 */
	function toGuige() {
		console.log(FormData.specificationsGroup);
		uni.setStorageSync('guige', FormData.specificationsGroup);
		go.to('PAGES_PRODUCT_GUIGE_CHOOSE', {
			emitName: 'emitspecificationsSave',
			type: option.type
		});
	}

	/**
	 *  监听定时器保存,拿到数据
	 * @param {Boolean} open //控制开启或关闭监听
	 */
	function watchTimerSave(open = true) {
		uni.$off('timerSave');
		uni.$on('timerSave', function(timer) {
			Object.assign(FormData, timer);
		});
	}

	/**
	 * 设置定时上下级
	 */
	function toTimerPage() {
		go.to('PAGES_PRODUCT_TIMER', {
			days: FormData.days,
			startTime: FormData.startTime,
			endTime: FormData.endTime
		});
	}

	const $week = {
		Monday: '周一',
		Tuesday: '周二',
		Wednesday: '周三',
		Thursday: '周四',
		Friday: '周五',
		Saturday: '周六',
		Sunday: '周日'
	};

	/**
	 * 定时数据显示处理
	 */
	function returnTimerDayText() {
		if (!FormData.days) {
			return '';
		}
		return FormData.days
			.split(',')
			.filter((v) => v)
			.map((v) => $week[v])
			.join(',');
		// return FormData.timer.length ? `当前有${FormData.timer.length}个定时器` : '没有定时器'
	}

	/**
	 * 定时数据显示处理
	 */
	function returnTimerTimeText() {
		if (!FormData.startTime || !FormData.endTime) {
			return '';
		}
		return FormData.startTime + '-' + FormData.endTime;
	}

	function initDefaultProGroupVo() {
		FormData.proGroupVo = [{
			title: '',
			count: 1,
			number: 1,
			goods: []
		}];
		console.log(FormData.proGroupVo);
	}

	/**
	 * 权限start
	 */

	// 允许修改商品库存
	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;
		}
	}
	watch(
		() => FormData.isStock,
		(newval) => {
			if (newval) {
				canEditGoodsStock();
			}
		}
	);
	// 允许修改商品分类
	let disabledChangeCategory = ref(false);
	async function canEditGoodsCategory(tips = false) {
		if (option.type === 'edit') {
			const res = await hasPermission({
				text: '允许修改分类',
				tips
			});
			disabledChangeCategory.value = !res;
		}
	}

	const activeinHouseList = computed(() => {
		try {
			return pageData.units.filter((item) => {
				if (item.id == FormData.unitId) {
					return item.name;
				}
			})[0].name;
		} catch (error) {
			//TODO handle the exception
		}
	});

	/**
	 * 销毁
	 */
	onBeforeUnmount(() => {
		clearTimeout(timer);
	});
</script>
<style scoped>
	page {
		background: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	.tips {
		font-size: 28upx;
		color: #999;
	}

	.barCode {
		border: 1px solid #e5e5e5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 22rpx 24rpx;
		background: #fcfcfc;
	}

	.top {
		position: fixed;
		// left: 28rpx;
		// right: 28rpx;
		// /* #ifdef H5 */
		// top: calc(44px + 24rpx);
		// /* #endif */
		// /* #ifndef H5 */
		// top: calc(var(--status-bar-height) + 24rpx);
		// /* #endif */
		// z-index: 999;
	}

	::v-deep .uni-forms-item--border {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.stick-bottom {
		top: 0;
		z-index: 10;
	}

	::v-deep .stock .uni-data-checklist .checklist-group .checklist-box {
		margin-right: 30rpx;
	}

	.stock .btns {
		position: fixed;
		bottom: 100rpx;
		left: 110rpx;
		right: 110rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.u-p-l-100 {
		padding-left: 100rpx;
	}

	.bg-gray {
		background: #f9f9f9;
		padding: 0 20rpx;
	}

	.safe-page {
		background: #f9f9f9;
	}

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

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

	.lh40 {
		line-height: 40rpx;
	}

	.bootom {
		position: fixed;
		left: 110rpx;
		right: 110rpx;
		bottom: 60px;
		z-index: 9;
	}

	.minus {}

	.plus {}

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

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

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

	::v-deep .typeEnum .u-radio-group--row {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	::v-deep .typeEnum .u-checkbox-group--row {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

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

	.link-goods {
		background-color: #fff;
		padding: 32rpx 20rpx;
	}

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

	::v-deep .link-goods .typeEnum .u-radio-group--row {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	::v-deep .link-goods .typeEnum .u-checkbox-group--row {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

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

	::v-deep .stock .uni-forms-item {
		min-height: initial !important;
	}

	.gap-26 {
		gap: 26rpx;
	}

	::v-deep .bg-gray .uni-forms-item {
		background-color: transparent !important;
	}

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

	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 28rpx;
		color: #333;
	}

	::v-deep .none-label .uni-forms-item.is-direction-top {
		padding: 0 !important;
		min-height: initial !important;
	}

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

	::v-deep .none-label .uni-forms-item .uni-forms-item__label {
		padding: 0 !important;
	}

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

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

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

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

	.table {
		background: #f9f9f9;
		border-radius: 8rpx;
		overflow: hidden;

		.title {
			padding: 12rpx 24rpx 12rpx 24rpx;
			background: #aebad2;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			color: #fff;
		}

		.row:nth-of-type(2n + 1) {
			background: #f0f0f0;
		}
	}

	.types {
		.item {
			padding: 6rpx 20rpx;
			border: 1px solid #bbb;
			border-radius: 8rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			text-align: center;
			position: relative;

			.gou {
				display: none;
				position: absolute;
				right: 0;
				top: 0;
				background-color: $my-main-color;
				width: 32rpx;
				height: 32rpx;
				clip-path: polygon(100% 0, 0 0, 100% 100%);
			}
		}

		.active {
			border-color: $my-main-color;

			.gou {
				display: flex;
			}

			.title {
				color: $my-main-color;
			}
		}

		&.disabled {
			position: relative;

			&::after {
				position: absolute;
				content: '';
				display: block;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}

			.item {
				background-color: #f9f9f9;
				border-color: #eee;

				&.active {
					border-color: rgba(49, 138, 254, 0.3);
				}

				.gou {
					opacity: 0.5;
				}

				.title {
					color: #999;
				}
			}
		}
	}

	.table {
		border: 1px solid #ececec;
		margin-top: 28upx;

		.table-tips {
			padding: 28upx;
			display: flex;
			justify-content: center;

			.t {
				font-size: 28upx;
				color: #999;
			}
		}

		.tabhead {
			background-color: #f8f8f8;
			border-bottom: 1px solid #ececec;

			.t {
				font-weight: bold;
			}
		}

		.tr {
			display: flex;

			&:not(:last-child) {
				border-bottom: 1px solid #ececec;
			}

			.td {
				flex: 1;
				min-height: 80upx;
				display: flex;
				align-items: center;
				padding: 20upx;

				&:not(:last-child) {
					border-right: 1px solid #ececec;
				}

				&:nth-child(2) {
					flex: 2;
				}

				.cover {
					$size: 80upx;
					width: $size;
					height: $size;
					border-radius: 8upx;
				}

				.t {
					font-size: 28upx;
					color: #333;
				}
			}
		}
	}

	.add-goods {
		display: flex;
		justify-content: center;
		padding-top: 28upx;
	}
</style>