<template>
	<view>
		<view class="category " :style="getCompouteStyle()">
			<scroll-view scroll-y="true" :style="{height:props.height+'rpx'}">
				<view class="list">
					<view v-if="showAllText" class="font-bold item border-bottom u-font-28" @tap="cateClick({id:'',name:'全部分类'})">全部分类</view>
					<view  v-for="(item,index) in category.list" :key="index">
						<view class="item font-bold border-bottom"  @tap="cateClick(item)">
							{{item.name}}
						</view>
							<view class="item border-bottom"  @tap="cateClick(child)" 
							v-for="(child,childIndex) in item.childrenList"
							 :key="childIndex"  >
								<text>&nbsp;&nbsp;</text>
								{{child.name}}
							</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref, warn, watch, watchEffect,
		onMounted,reactive
	} from 'vue';
	import {$tbShopCategory} from '@/http/yskApi/goods.js'
	const emite=defineEmits(['cateClick','change'])
	const props = defineProps({
		showAllText:{
			type:Boolean,
			default:true
		},
		width: {
			type: [Number, String],
			default: 264
		},
		height: {
			type: [Number, String],
			default: 420
		},
		right: {
			type: [Number, String],
			default: 30
		},
		bottom: {
			type: [Number, String],
			default: 0
		}
	})
	let show = ref(false)
	
	watch(()=>show.value,(newval)=>{
		emite('change',newval)
	})
	
	function open() {
		show.value = true
	}

	function close() {
		show.value = false
	}

	function toggle() {
		show.value = !show.value
	}
	
	function cateClick(item){
		emite('cateClick',item)
		close()
	}
	
	function getCompouteStyle() {
		return {
			width: props.width + 'rpx',
			height: props.height + 'rpx',
			right: props.right + 'rpx',
			bottom: props.bottom + 'rpx',
			transform:`scaleY(${show.value?1:0})`
		}
	}
	const category=reactive({
		list:[],
		categoryId:'',
		categoryName:'',
		
	})
	onMounted(()=>{
		$tbShopCategory({
			page:0,size:200
		}).then(res=>{
			category.list=res.content
		})
	})
	defineExpose({
		open,
		close,toggle
	})
</script>

<style lang="scss" scoped>
	.category {
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		position: fixed;
		font-size: 24rpx;
		color: #333;
		.list{
			box-sizing: border-box;
			.item{
				padding: 24rpx 24rpx 24rpx 48rpx;
			}
		}
	}
</style>