<template>
	<view>
		<view class="default-box-padding bg-fff border-r-18">
			<view class="u-flex u-row-between">
				<view>商品名称</view>
				<!-- <template v-if="isSku"> -->
				<view class="u-flex u-font-24 color-666">
					<view class="u-m-r-20">绑定至规格</view>
					<view class="u-flex u-relative">
						<up-switch :size="18" v-model="isBindGuige" :disabled="!isSku">绑定至规格</up-switch>
						<view class="u-absolute position-all" style="z-index: 1;" v-if="!isSku"
							@click="infoBox.showToast('该商品是单规格商品，只有多规格商品可绑定至规格',3)"></view>
					</view>
				</view>
				<!-- </template> -->
			</view>
			<view class="border-bottom u-m-t-16 u-p-b-32">{{goods.name}}</view>
			<view class="">
				<template v-if="isBindGuige&&isSku">
					<view class="list">
						<view class="u-p-b-32 u-p-t-32 border-bottom" v-for="(sku,index) in skuList" :key="index">
							<view>规格名称</view>
							<view class="u-m-t-16">{{sku.specSnap}}</view>
							<view class="color-666 u-m-t-24 u-flex">
								<view class="xuhao">序号</view>
								<view class="u-flex u-flex-1 u-p-l-32 gap-20">
									<view class="u-flex-1">耗材名称</view>
									<view class="u-flex-1">单位</view>
									<view class="u-flex-1">用量</view>
								</view>
							</view>
							<view class="u-m-t-32 color-666">
								<view class="u-m-t-24" v-for="(item,haocaiIndex) in sku.haoCaiList" :key="haocaiIndex">
									<view class="  u-flex">
										<view class="xuhao">{{haocaiIndex+1}}</view>
										<view class="u-flex u-flex-1 u-p-l-32 gap-20">
											<view class="u-flex-1  ">
												<choose-haocai @change="conInfosChange($event,item)"
													:listMap="$haocaiMap" :list="haoCaiList"
													v-model="item.conInfoId"></choose-haocai>
											</view>
											<view class="u-flex-1  ">
												<choose-danwei :listMap="$danweiMap" :list="danweiList"
													v-model="item.conUnit"></choose-danwei>
											</view>
											<view class="u-flex  input">
												<up-input border="none" v-model="item.surplusStock"></up-input>
												<up-icon @click="delGuigeHaocao(index,haocaiIndex)" color="#EA4025"
													:size="16" name="minus-circle-fill"></up-icon>
											</view>
										</view>
									</view>
									<view class="u-flex u-m-t-16 color-666 u-font-24">
										<view class="xuhao">
										</view>
										<view class="u-flex u-flex-1 u-p-l-32 gap-20">库存：{{item.stockNumber}}
										</view>
									</view>


								</view>

							</view>
							<view class="u-flex">
								<view class=" u-p-t-32 u-flex" @click="addGuigeHaocai(index)">
									<up-icon :size="18" color="#318AFE" name="plus-circle-fill"></up-icon>
									<view class="u-m-l-16">添加耗材</view>
								</view>

							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="list">
						<view class="u-p-b-32 u-p-t-32 border-bottom" v-for="(item,index) in conInfos" :key="index">
							<view class="color-666  u-flex">
								<view class="xuhao">序号</view>
								<view class="u-flex u-flex-1 u-p-l-32 gap-20">
									<view class="u-flex-1">耗材名称</view>
									<view class="u-flex-1">单位</view>
									<view class="u-flex-1">用量</view>
								</view>
							</view>
							<view class="u-m-t-32 color-666">
								<view class=" u-m-t-24 u-flex">
									<view class="xuhao">{{index+1}}</view>
									<view class="u-flex u-flex-1 u-p-l-32 gap-20">
										<view class="u-flex-1  ">
											<choose-haocai @change="conInfosChange($event,item)" :listMap="$haocaiMap"
												:list="haoCaiList" v-model="item.conInfoId"></choose-haocai>
											<!-- <view class="u-flex  input">
												<view>{{item.conName}}</view>
												<up-icon :size="10" name="arrow-down-fill"></up-icon>
											</view> -->
										</view>
										<view class="u-flex-1  ">
											<choose-danwei :listMap="$danweiMap" :list="danweiList"
												v-model="item.conUnit"></choose-danwei>
											<!-- <view class="u-flex  input">
												<view>{{item.conUnit}}</view>
												<up-icon :size="10" name="arrow-down-fill"></up-icon>
											</view> -->
										</view>
										<view class="u-flex-1  ">
											<view class="u-flex  input">
												<up-input border="none" v-model="item.surplusStock"></up-input>
												<up-icon @click="delHaocai(index)" color="#EA4025" :size="16"
													name="minus-circle-fill"></up-icon>
											</view>
										</view>
									</view>
								</view>
								<view class="u-flex u-m-t-16 u-font-24" v-if="item.stockNumber">
									<view class="xuhao">

									</view>
									<view class="u-flex u-flex-1 u-p-l-32 gap-20">库存：{{item.stockNumber}}
										{{item.conUnit}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</template>
				<template v-if="!isBindGuige">
					<view class="u-flex">
						<view class=" u-p-t-32 u-flex" @click="addHaocai">
							<up-icon :size="18" color="#318AFE" name="plus-circle-fill"></up-icon>
							<view class="u-m-l-16">添加耗材</view>
						</view>

					</view>
				</template>

			</view>
		</view>
		<view class="default-box-padding bg-fff border-r-18 u-flex u-row-between u-m-t-32">
			<view>当某个耗材的使用库存不足时，商品自动
				售罄。</view>
			<!-- <view class="u-flex u-p-l-32">
				<up-switch :size="20"></up-switch>
			</view> -->
		</view>
		<view class="bottom">
			<my-button type="primary" shape="circle" font-weight="700"  @click="save">保存</my-button>
			<my-button bgColor="#F9F9F9" shape="circle" color="#999" @click="cancel">取消</my-button>
		</view>

	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		watch,
		computed,
		onMounted
	}
	from 'vue';
	import {
		getviewConSku,
		gettbProductSpec,
		gettbConsInfo,
		posttbProskuCons,
		puttbProskuCon,
		deletetbProskuCon,
	} from "@/http/yskApi/consumable.js";
	import {
		tbShopCurrencyGet,
		$hasPermission
	} from '@/http/yskApi/shop.js'

	import infoBox from '@/commons/utils/infoBox.js'
	import chooseHaocai from './choose-haocai.vue';
	import chooseDanwei from './choose-danwei.vue';
	import {
		$tbProskuConV2
	} from '@/http/yskApi/goods.js'
	import {
		cloneWith
	} from 'lodash';

	import {
		hasPermission
	} from '@/commons/utils/hasPermission.js';
	const emits = defineEmits(['cancel', 'updateGoods'])

	function cancel() {
		emits('cancel')
	}
	const props = defineProps({
		goods: {
			type: Object,
			default: () => {
				return {
					conInfos: [],
					skuList: [],
					typeEnum: ''
				}
			}
		}
	})

	const conInfos = ref(props.goods.conInfos)
	watch(() => props.goods.conInfos, (newval) => {
		console.log(newval);
		conInfos.value = newval
	})

	function conInfosChange(newval, item) {
		console.log(newval);
		item.stockNumber = newval.balance
		item.conUnit = newval.conUnit
	}

	const skuList = ref(props.goods.skuList)
	watch(() => props.goods.skuList, (newval) => {
		console.log(newval);
		skuList.value = newval
	})


	const $baseicHaocaiData = {
		conInfoId: '',
		conUnit: '',
		surplusStock: ''
	}

	function addHaocai() {
		conInfos.value.push({
			...$baseicHaocaiData
		})
	}
	const popup = reactive({
		haocai: {
			show: true
		}
	})

	function addGuigeHaocai(index) {
		if (skuList.value[index].haoCaiList) {
			skuList.value[index].haoCaiList.push({
				...$baseicHaocaiData
			})
		} else {
			skuList.value[index].haoCaiList = [{
				...$baseicHaocaiData
			}]
		}
		console.log(skuList.value[index]);
	}

	function delHaocai(index) {
		const item = conInfos.value[index]
		console.log(item);
		uni.showModal({
			title: '提示',
			content: '是否删除该耗材',
			success(res) {
				if (res.confirm) {
					if (item.id) {
						deletetbProskuCon([item.id]).then(res1 => {
							conInfos.value.splice(index, 1)
						})
					} else {
						conInfos.value.splice(index, 1)
					}

				}
			}
		})

	}

	function delGuigeHaocao(guigeIndex, haocaiIndex) {
		const item = skuList.value[guigeIndex].haoCaiList[haocaiIndex]
		console.log(item);
		uni.showModal({
			title: '提示',
			content: '是否删除该耗材',
			success(res) {
				if (res.confirm) {
					if (item && item.id) {
						deletetbProskuCon([item.id]).then(res1 => {
							skuList.value[guigeIndex].haoCaiList.splice(haocaiIndex, 1)
						})
					} else {
						skuList.value[guigeIndex].haoCaiList.splice(haocaiIndex, 1)
					}

				}
			}
		})
	}

	// 是否是多规格商品
	const isSku = computed(() => {
		return props.goods.typeEnum == 'sku'
	})
	let isBindGuige = ref(false)
	watch(() => props.goods.typeEnum, (newval) => {
		if(!newval){
			isBindGuige.value = false
		}
	})



	async function save() {
		const bol = await hasPermission('允许修改商品')
		if (!bol) {
			return
		}
		console.log('save');
		let isPas = false
		if (!isBindGuige.value) {
			//绑定至商品
			isPas = conInfos.value.every(v => {
				return v.conInfoId && v.conUnit && v.surplusStock > 0
			})
		} else {
			//绑定至规格
			isPas = skuList.value.filter(v => v.haoCaiList && v.haoCaiList.length).every(sku => {
				console.log(sku.haoCaiList);
				return sku.haoCaiList.every(v => {
					return v.conInfoId && v.conUnit && v.surplusStock > 0
				})
			})
		}

		if (!isPas) {
			return infoBox.showToast('请填写全部耗材选项值')
		}
		let ajaxData = {
			productId: props.goods.id,
			cons: []
		}
		if (!isBindGuige.value) {
			//绑定至商品
			ajaxData.cons = conInfos.value.map(v => {
				return {
					id: v.id || '',
					conInfoId: v.conInfoId,
					productId: props.goods.id,
					shopId: uni.getStorageSync('shopId'),
					productSkuId: 0,
					surplusStock: v.surplusStock * 1,
					status: 1
				}
			})
		} else {
			for (let i in skuList.value) {
				const haocaiList = skuList.value[i].haoCaiList || []
				for (let k in haocaiList) {
					const v = haocaiList[k]
					ajaxData.cons.push({
						id: v.id || '',
						conInfoId: v.conInfoId,
						productId: props.goods.id,
						shopId: uni.getStorageSync('shopId'),
						productSkuId: skuList.value[i].id,
						surplusStock: v.surplusStock * 1,
						status: 1
					})
				}
			}

		}
		console.log(ajaxData);
		await $tbProskuConV2(ajaxData)
		emits('updateGoods')
		infoBox.showToast('修改成功')
	}

	let haoCaiList = ref([])
	let $haocaiMap = reactive({})
	let danweiList = ref([])
	let $danweiMap = reactive({})

	function init() {
		gettbConsInfo({
			"status": 1,
		}).then(res => {
			for (let i in res.content) {
				const item = res.content[i]
				$haocaiMap[item.id] = item
			}
			haoCaiList.value = res.content
		})
		tbShopCurrencyGet({
			page: 0,
			size: 200
		}).then(res => {
			for (let i in res.content) {
				const item = res.content[i]
				$danweiMap[item.id] = item
			}
			danweiList.value = res.content
		})
	}
	onMounted(() => {
		init()
		const firstItem= props.goods.conInfos[0]
		isBindGuige.value=firstItem?(firstItem.productSkuId==0?false:true):false
	})
</script>

<style lang="scss" scoped>
	.bottom {
		padding: 84rpx 82rpx;
	}

	.xuhao {
		width: 52rpx;
		white-space: nowrap;
	}

	.input {
		width: 172rpx;
		padding: 10rpx 16rpx;
		height: 60rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 2rpx solid #E5E5E5;
		overflow: hidden;
	}

	.list .border-bottom:last-child {
		border: none;
	}
</style>