<template>
    <div>
        <!--https://youzan.github.io/vant/#/zh-CN/form#biao-dan-xiang-lei-xing---shi-jian-xuan-ze-qi-->
        <van-field
                readonly
                v-model="fieldValue"
                :label="label"
                :placeholder="'点击选择'+label"
                @click="showPicker = true"
        ></van-field>
        <van-popup v-model="showPicker" position="bottom"
                   :safe-area-inset-bottom="true"
                   :close-on-popstate="true">
            <van-picker
                    show-toolbar
                    :columns="columns"
                    :value-key="showKey"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
            ></van-picker>
        </van-popup>
    </div>
</template>

<script>
    export default {
        props: {
            label: String,
            value: {type: String, default: ''},  //默认值
            columns: Array,
            showKey: {type: String, default: ''}
        },
        data() {
            return {
                showPicker: false,
            }
        },
        computed: {
            fieldValue: {
                get() {
                    return this.value
                },
                set(val) {
                    this.$emit('input', val)
                }
            },
        },
        methods: {
            onConfirm(value) {
                this.fieldValue = this.showKey ? value[this.showKey] : value
                this.showPicker = false
            }
        }
    }
</script>

<style scoped>

</style>
