<template>
	<my-model ref="model" borderRadius="12" :title="datas.title">
		<template #desc>
			<scroll-view scroll-y="true" style="height: 50vh;" class="u-p-30 guigeModel">
				<view class="u-m-b-40" v-for="(item,index) in datas.skus" :key="index">
					<view class="u-text-left">
						<view class="color-333">{{item.title}} <text
								style="color:#999">({{item.count}}选{{item.number}})</text> </view>
					</view>
					<view class="u-flex u-m-t-20 u-flex-wrap">
						<view class="item" @tap="chooseSkd(skd,item)" :class="{active:skd.select==true}"
							v-for="(skd,skdIndex) in item.goods" :key="skdIndex">
							{{skd.proName}}
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template #btn>
			<view class="u-p-30 border-top ">
				<view class="u-flex  u-p-b-30 u-row-between">
					<view class="price">
						<text>￥</text>
						<text>{{datas.price}}</text>
					</view>
				</view>
				<view class="u-m-t-10">
					<my-button @tap="confirm">添加</my-button>
				</view>
			</view>
		</template>
	</my-model>
	<uni-popup ref="popup" type="message">
		<uni-popup-message type="info" message="请选择套餐" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		reactive,
		ref,
		watch
	} from 'vue';
	import util from '../util.js';
	import infobox from '@/commons/utils/infoBox.js'
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import {
		onShow,
	} from '@dcloudio/uni-app';
	const props = defineProps({
		goodsData: {
			type: Object,
			default: () => {}
		},
	})

	let datas = reactive({
		item: "",
		title: "",
		price: "",
		skus: [],
		// 几选几,的和
		selectNumber: 0,
	})


	// const selSku = computed(() => {
	// 	return props.skus.reduce((prve, cur) => {
	// 		prve.push(cur.sel)
	// 		return prve
	// 	}, []).join()
	// })


	// const goods = computed(() => {
	// 	return props.skuMap[selSku.value]
	// })
	watch(() => props.goodsData, (newval) => {
		newval.proGroupVo.forEach(ele => {
			ele.selectData = []
		})
		datas.item = newval
		datas.title = newval.name
		datas.price = newval.price
		datas.skus = newval.proGroupVo
		datas.skus.forEach(ele => {
			datas.selectNumber += ele.number
		})
	})

	const emits = defineEmits(['confirm', 'updateSku'])

	function chooseSkd(skd, item) {
		if (item.selectData.includes(skd.proId)) {
			skd.select = false
			let indexs = item.selectData.indexOf(skd.proId)
			item.selectData.splice(indexs, 1)
		} else {
			if (item.selectData.length < item.number) {
				skd.select = true
				item.selectData.push(skd.proId)
			}
		}

	}



	const model = ref(null)

	function open() {
		model.value.open()
	}

	function close() {
		model.value.close()
	}
	const instance = getCurrentInstance();

	function confirm() {
		// 将数据保存进对应的值
		let arr = []
		datas.item.proGroupVo.forEach(ele => {
			arr.push(...ele.selectData)
		})
		if (arr.length == datas.selectNumber) {
			emits('confirm', arr, datas.item)
			close()
		} else {
			instance.ctx.$refs.popup.open()
		}
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.border-top {}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.guigeModel {
		.item {
			color: #666;
			font-size: 24rpx;
			padding: 4rpx 28rpx;
			border: 1px solid #E5E5E5;
			border-radius: 8rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			transition: all .2s ease-in-out;

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

			&.disabled {
				color: #ccc;
				border-color: #eee;
			}
		}
	}

	.price {
		color: #EB4F4F;
	}

	.border-top {
		border-top: 1px solid #E5E5E5;
	}
</style>