<template>
	<view>
		<view class="public_selector" @click="show = true">
			<input type="text" :value="value[keyName]" class="public_selector-input" disabled :placeholder="placeholder" placeholder-class="placeholderClass" />
			<u-icon name="arrow-down-fill" size="12" ></u-icon>
		</view>
		<u-picker :keyName="keyName" :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
	</view>
</template>

<script>
	export default {	
		name:"public_selector",
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			keyName: {
				type: String,
				default: ''
			},
			value: {
				type: Object,
				default: () => {
					return {}
				}
			},
			columns: {
				type: [Array],
				default: () => []
			}
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			confirm(e) {
				console.log(e)
				this.show = false
				this.$emit('change', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.public_selector{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
		height: 76rpx;
		box-shadow: 7rpx 0rpx 24rpx 0rpx rgba(153,153,153,0.22);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.public_selector-input{
			font-size: 28rpx;
		}
		.placeholderClass{
			color: #505050;
		}
	}
	
</style>