<template>
	<up-popup :round="10" :show="popShow" :closeable="true" @close="close">
		<view class="u-text-center font-bold u-font-32 u-p-t-30">选择状态</view>
		<view style="height: 20rpx;"></view>
		<view class="u-p-30 all-list u-flex u-flex-wrap gap-20">
			<view class="all-list-item" :class="{active:statusItemIndex==statusData.allListSel}" @click="changeAllListSel(statusItemIndex)" v-for="(statusItem,statusItemIndex) in statusData.allList" :key="statusItemIndex">
				{{statusItem.label}}
			</view>
		</view>
		<view class="u-flex u-p-t-30 u-p-b-30 u-p-l-20 u-p-r-20 gap-20">
			<up-button @click="close">取消</up-button>
			<up-button type="primary" @click="confirm">确定</up-button>
		</view>
	</up-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
	const props=defineProps({
		show:{
			type:Boolean,
			default:false
		}
	})
	
	let popShow=ref(props.show)
	const emits=defineEmits(['update:show','close','confirm'])
	function close(){
		popShow.value=false
	}
	function confirm(){
		popShow.value=false
	}
	watch(()=>props.show,(newval)=>{
		popShow.value=newval
	})
	watch(()=>popShow.value,(newval)=>{
		emits('update:show',newval)
	})
</script>

<style lang="scss" scoped>
	.all-list-item{
		text-align: center;
		width: 156rpx;
		white-space: nowrap;
		color: #666;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		transition: all .2s ease-in-out;
		border: 1px solid #eee;
		&.active {
			color: $my-main-color;
			border-color: $my-main-color;
		}
	}
</style>