<template>
	<view class="mask u-fixed position-all u-flex u-col-bottom u-font-28" v-if="show" @tap="close">
		<view class="bg-fff w-full  " @tap.stop="nullFunction">
			<view class="u-p-30">
				<view class="font-bold u-text-center">选择规格</view>
			</view>

			<scroll-view :scroll-x="false" scroll-y="true" :style="computedStyle()">
				<view class="u-p-l-30 u-p-r-30 ">
					<view class="u-flex u-flex-wrap w-full gap-10  u-col-top">
						<view class="skd" v-for="(item,index) in skuList" :key="index"
						:class="{active:sel.id==item.id}"
							@click="guigeClick(item,index)">
							<text>{{item.specInfo||item.name}}</text>
							<view class="tag-primary tag" v-if="item.isGrounding">上架中</view>
							<view class="tag-gray tag" v-if="item.isPauseSale">已售罄</view>
							<view class="tag-gray tag" v-if="!item.isGrounding">已下架</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
			<view class="u-p-30">
				<view class="u-m-t-20 u-flex">
					<view class="u-flex-1 u-p-r-16">
						<my-button type="cancel" plain @tap="close">取消</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button @tap="confrim">确定</my-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue';
	
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	let skuList=ref([])
	function nullFunction() {

	}

	const show = ref(props.modelValue)
	
	
	async function open(arr,sel) {
		show.value = true
		skuList.value=arr
	}

	function close() {
		show.value = false
		sel.value={}
	}
	
	let sel=ref({
		
	})
	function guigeClick(item,index){
		if(sel.value.id==item.id){
			return sel.value={}
		}
		sel.value=item
	}

	function computedStyle() {
		return `height:${typeof props.height==='string'?props.height:props.height+'rpx'};`
	}

	const emits = defineEmits(['update:modelValue', 'confirm'])
	
	function confrim() {
		if(!sel.value.id){
			return uni.$utils.showToast('请选择选择一个规格')
		}
		emits('confirm', sel.value)
		close()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.bg-fff{
		border-radius: 24rpx 24rpx 0 0 ;
	}
	.mask {
		background: rgba(51, 51, 51, 0.5);
		z-index: 900;
	}
	.skd {
		padding: 10rpx 38rpx 8rpx 40rpx;
		background: #F0F2F5;
		border-radius: 4rpx;
		position: relative;
		color: #666;
		overflow: hidden;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		border: 1px solid transparent;
		&.active{
			border-color: $my-main-color;
		}
		.tag {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 12rpx;
			height: 18rpx;
			line-height: 18rpx;
			right: 0;
			border-radius: 0rpx 2rpx 2rpx 8rpx;
		}
	
		.tag-primary {
			background-color: $my-main-color;
			color: #fff;
		}
	
		.tag-gray {
			background-color: rgb(144, 147, 153);
			color: #fff;
		}
	}
	.coverImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}
	.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;
		}
	}
</style>