<template>
	<view class="selectPicker" @touchmove.stop.prevent="moveHandle">
		<u-picker ref="uPicker" keyName="label" immediateChange confirmText="确定" :show="visible" :title="PanelTitle"
			:columns="[pickerEnums]" :singleIndex="singleIndex" :visibleItemCount="visibleNum" @cancel="onCancel" @confirm="onConfirm" />
	</view>
</template>

<script>
	export default {
		name: "bs-selectPicker",
		options: { styleIsolation: 'shared' },
		data() {
			return {
				singleIndex: 0 //默认选中项
			};
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			pickerEnums: { //选择项枚举
				type: Array,
				default: []
			},
			PanelTitle: { //面板标题
				type: String,
				default: ""
			},
			visibleNum: {
				type: Number,
				default: 3
			}
		},
		methods: {
			moveHandle(){
				
			},
			//确定
			onConfirm(e) {
				const value = e.value[0].value
				this.$emit('onConfirm', value)
			},
			//设置默认值
			setDefaultValue(index) {
				this.singleIndex = index
			},
			//取消
			onCancel() {
				this.$emit('onVisible')
			}
		}
	}
</script>

<style lang="scss">
	.selectPicker{	
		/deep/.u-toolbar{
			height: 80rpx !important;
		}
		/deep/.u-slide-up-enter-active {
			height: 240rpx;
		}
		/deep/.u-picker__view__column__item{
			line-height: 68rpx !important;
		}
	}
</style>
