<template>
	<view>
		<view class="category " :style="getCompouteStyle()">
			<scroll-view scroll-y="true" :style="{height:props.height+'rpx'}">
				<view class="list">
					<view class="item" @tap="cateClick(item)" v-for="(item,index) in 20" :key="index">
						分类
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref, warn, watch, watchEffect,
		onMounted
	} from 'vue';
	import {$tbShopCategory} from '@/http/yskApi/goods.js'
	const emite=defineEmits(['cateClick'])
	const props = defineProps({
		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)

	function open() {
		show.value = true
	}

	function close() {
		show.value = false
	}

	function toggle() {
		show.value = !show.value
	}
	
	function cateClick(item){
		emite('cateClick',item)
	}
	
	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})`
		}
	}
	onMounted(()=>{
		$tbShopCategory({
			page:0,size:200
		})
	})
	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>