<template>
    <div class="yo-dropdown-body uk-overflow-auto uk-height-max-large">
        <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-bottom">
            <span class="uk-flex" style="align-items: baseline">
                <span class="uk-margin-right">
                    <span uk-icon="database" ratio="0.6"></span>
                    <span class="uk-text-small uk-disabled">condition </span>
                </span>
                <a
                    v-if="!values.label && !settingAlias"
                    href=""
                    class="uk-text-small"
                    @click.prevent="setAlias"
                    v-text="$t('Set Alias')"
                ></a>
                <input
                    v-else
                    ref="alias"
                    v-model="values.label"
                    class="uk-input uk-form-small uk-form-blank uk-form-width-small"
                    style="border: none"
                    :placeholder="$t('Alias')"
                />
            </span>
            <span>
                <a @click.prevent="view = 'source'">
                    <span uk-icon="more-vertical" class="uk-icon-link"></span>
                </a>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ConditionWidgetDropdown',

    components: {},

    inject: ['$node'],

    props: {
        values: {
            type: Object,
            required: true,
        },
    },

    data: () => ({
        view: '',
        settingAlias: false,
    }),

    computed: {},

    created() {},

    methods: {
        setAlias() {
            this.settingAlias = true;
            this.$nextTick(() => {
                this.$refs.alias.focus();
            });
        },
    },
};
</script>
