<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, watch, onMounted,reactive } from 'vue';
	import { categoryPage } from '@/api/cateGory.js'
	const emite=defineEmits(['change','update:isShow','confirm'])
	const props = defineProps({
		isShow:{
			type:Boolean,
			default:false
		}
	})
	
	let show = ref(props.isShow)
	
	const category=reactive({
		list:[],
	})
	onMounted(()=>{
		categoryPage({
			page:1,size:200
		}).then(res=>{
			res.records.unshift({
				name:'全部',
				id:'',
			})
			category.list = [res.records]
		})
	})
	watch(()=>show.value,(newval)=>{
		emite('change',newval)
		emite('update:isShow',newval)
	})
	watch(()=>props.isShow,(newval)=>{
		show.value=newval
	})
	
	function confirm(e){
		show.value = false
		emite('confirm',e.value[0])
	}
	function close() {
		show.value = false
	}
</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>