<template>
	<up-picker :show="show" keyName="name" @confirm="confirm" :columns="category.list" @close="close" @cancel="close" :closeOnClickOverlay="true"></up-picker>
</template>

<script setup>
	import {
		ref, warn, watch, watchEffect,
		onMounted,reactive
	} from 'vue';
	import {$tbShopCategory} from '@/http/yskApi/goods.js'
	const emite=defineEmits(['change','update:isShow','confirm'])
	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
		},
		isShow:{
			type:Boolean,
			default:false
		}
	})
	
	let show = ref(props.isShow)
	
	watch(()=>show.value,(newval)=>{
		emite('change',newval)
		emite('update:isShow',newval)
	})
	watch(()=>props.isShow,(newval)=>{
		console.log(newval);
		show.value=newval
	})
	
	function confirm(e){
		console.log(e.value[0]);
		show.value = false
		emite('confirm',e.value[0])
	}
	function close() {
		console.log('close');
		show.value = false
	}
	
	
	const category=reactive({
		list:[],
	})
	onMounted(()=>{
		$tbShopCategory({
			page:0,size:200
		}).then(res=>{
			res.content.unshift({
				name:'全部',
				id:'',
				childrenList:[]
			})
			category.list=[res.content.reduce((prve, cur) => {
				prve.push(...[{
					...cur,
					name: '' + cur.name,
					childrenList:undefined
				}, ...cur.childrenList.map(v => {
					return {
						...v,
						name: '' + v.name
					}
				})])
				return prve
			}, [])]
			console.log(category.list);
		})
	})
</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>