<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">

			<template v-if="tabsCurrent===0">
				<view class="basic">
					<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="color.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="color.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="color.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="color.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="color.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 == 'weigh'">
							<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>

			<template v-if="tabsCurrent===1">
				<edit-haocai @updateGoods="updateGoodsDetail" :goods="FormData"
					@cancel="changeTabsCurrent(0)"></edit-haocai>
			</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 {
		ColorMain
	} from '@/commons/color.js'
	import dayjs from "dayjs";
	import {
		formatPrice
	} from "@/commons/utils/format.js";

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

	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 { $types, $defaultSku } from '@/commons/goodsData.js'

	import {
		getCategoryList,
		getProdUnitList,
		getProductDetail,
		addProduct,
		updateProduct,
		delProduct
	} from '@/api/product.js'
	import {
		uploadFile
	} from '@/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)
	
	
	//表单边框
	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: '',	//规格模版名称
		
		unitName: "",
		specificationsGroup: '',
	
		
	})
	//页面全部数据
	const pageData = reactive({
		// 商品类型
		types: [{
				name: '单规格商品',
				value: 'single'
			},
			{
				name: '多规格商品',
				value: 'sku'
			},
			{
				name: '套餐商品',
				value: 'package'
			},
			{
				name: '称重商品',
				value: 'weigh'
			},
			// {
			// 	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 || '')
			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()
	})
	onReady(() => {
		Forms.value && Forms.value.setRules(rules)
	})
	onShow(() => {
		watchSpecificationsSave()
		watchTimerSave()
	})
	
	function getGoodsDetail() {
		getProductDetail(option.productId).then(res => {
			res.images = res.images.map(v => {
				return {
					url: v
				}
			})
			for (let i in res.conInfos) {
				const con = res.conInfos[i]
				const item = res.skuList.find(v => v.id == con.productSkuId)
				if (item) {
					if (item.hasOwnProperty('haoCaiList')) {
						item.haoCaiList.push(con)
					} else {
						item.haoCaiList = [con]
					}
				}
			}
			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
		}
	}

	/**
	 * 选择单位监听
	 * @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: []
		})
	}
	
	/**
	 * 删除套餐组
	 * @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()
	}


	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 == 'single') {
				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 (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 = null
				}
			}
			if (type == 'weigh') {
				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 || ''
				}
			})
	
			console.log(skuList.list);
		})
	}

	/**
	 * 编辑规格
	 */
	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', {
		})
	}
	
	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>
	.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;
	}

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

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

				.gou {
					opacity: .5;
				}

				.title {
					color: #999;
				}
			}

		}
	}
</style>