<template>
    <view style="width: 100%">
        <u--input :value="valueEnum[value]" disabledColor="#ffffff" :placeholder="placeholder"></u--input>
        <u-picker :show="visibel" :keyName="labelName" :columns="columns" @confirm="skillConfirm" @cancel="skillClose"
            @close="skillClose"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                valueEnum: {}
            }
        },
        props: {
            valueName: {
                type: String,
                default: 'value'
            },
            labelName: {
                type: String,
                default: 'label'
            },
            placeholder: {
                type: String,
                require: ''
            },
            visibel: {
                type: Boolean,
                default: false,
            },
            columns: {
                type: Array,
                require: true
            },
            value: {
                type: String,
                require: ''
            },
            cancel: {
                type: Function
            }
        },
        created() {

        },
        watch: {
            columns(val) {
                if (Array.isArray(val)) {
                    val.map((item) => {
                        item.map((child) => {
                            this.valueEnum[child[this.valueName]] = child[this.labelName]
                        })
                    })
                }
            }
        },
        methods: {
            skillConfirm({
                index,
                value,
                values
            }) {
                this.$emit("input", String(value[0][this.valueName]));
                this.$emit("cancel");
            },
            skillClose() {
                this.$emit("cancel");
            }
        },

    }
</script>

<style>
</style>