akaunting/resources/assets/js/components/AkauntingSelect.vue

<template>
    <base-input
        :label="title"
        :name="name"
        :readonly="readonly"
        :disabled="disabled"
        :class="[
            {'readonly': readonly},
            {'disabled': disabled},
            formClasses
        ]"
        :error="formError">
        <span v-if="Array.isArray(selectOptions)">
            <el-select v-model="real_model" @input="change" :disabled="disabled" filterable v-if="(disabled) && !multiple && !collapse"
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(option, key) in selectOptions"
                :key="key"
                :label="option.value"
                :value="option.key">
                    <span class="float-left">{{ option.value }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true"  :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" :disabled="disabled" filterable v-if="!disabled && !multiple"
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(option, key) in selectOptions"
                :key="key"
                :label="option.value"
                :value="option.key">
                    <span class="float-left">{{ option.value }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
                </el-option>

                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(option, key) in selectOptions"
                :key="key"
                :label="option.value"
                :value="option.key">
                    <span class="float-left">{{ option.value }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable disabled v-if="disabled && multiple && !collapse" multiple
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(option, key) in selectOptions"
                :key="key"
                :label="option.value"
                :value="option.key">
                    <span class="float-left">{{ option.value }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(option, key) in selectOptions"
                :key="key"
                :label="option.value"
                :value="option.key">
                    <span class="float-left">{{ option.value }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>

            <span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>

            <select :name="name" v-model="real_model" class="d-none">
                <option v-for="(label, value) in selectOptions" :key="value" :value="value">{{ label }}</option>
            </select>
        </span>

        <span v-else>
            <el-select v-model="real_model" @input="change" :disabled="disabled" filterable v-if="(disabled) && !multiple && !collapse"
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(label, value) in selectOptions"
                    :key="value"
                    :label="label"
                    :value="value">
                    <span class="float-left">{{ label }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true"  :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable v-if="!Array.isArray(selectOptions) && !disabled && !multiple"
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(label, value) in selectOptions"
                    :key="value"
                    :label="label"
                    :value="value">
                    <span class="float-left">{{ label }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                </el-option>

                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(label, value) in selectOptions"
                    :key="value"
                    :label="label"
                    :value="value">
                    <span class="float-left">{{ label }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable disabled v-if="disabled && multiple && !collapse" multiple
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(label, value) in selectOptions"
                    :key="value"
                    :label="label"
                    :value="value">
                    <span class="float-left">{{ label }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
                :placeholder="placeholder">
                <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noMatchingDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-else-if="addNew.status && options.length == 0" slot="empty">
                    <p class="el-select-dropdown__empty">
                        {{ noDataText }}
                    </p>
                    <ul class="el-scrollbar__view el-select-dropdown__list">
                        <li class="el-select-dropdown__item el-select__footer">
                            <div @click="onAddItem">
                                <i class="fas fa-plus"></i>
                                <span>
                                    {{ add_new_text }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

                <template slot="prefix">
                    <span class="el-input__suffix-inner el-select-icon">
                        <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                    </span>
                </template>

                <el-option v-if="!group" v-for="(label, value) in selectOptions"
                    :key="value"
                    :label="label"
                    :value="value">
                    <span class="float-left">{{ label }}</span>
                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                </el-option>

                <!-- Todo sortable -->
                <el-option-group
                    v-if="group"
                    v-for="(options, name) in selectOptions"
                    :key="name"
                    :label="name">
                    <el-option
                        v-for="(label, value) in options"
                        :key="value"
                        :label="label"
                        :value="value">
                        <span class="float-left">{{ label }}</span>
                        <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                    </el-option>
                </el-option-group>

                <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
                    <div @click="onAddItem">
                        <i class="fas fa-plus"></i>
                        <span>
                            {{ add_new_text }}
                        </span>
                    </div>
                </el-option>
            </el-select>

            <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>

            <span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>

            <select :name="name"  :id="name" v-model="real_model" class="d-none">
                <option v-for="(label, value) in selectOptions" :key="value" :value="value">{{ label }}</option>
            </select>
        </span>
    </base-input>
</template>

<script>
import Vue from 'vue';

import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';

import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
import AkauntingRecurring from './AkauntingRecurring';

import Form from './../plugins/form';

export default {
    name: "akaunting-select",

    components: {
        [Select.name]: Select,
        [Option.name]: Option,
        [OptionGroup.name]: OptionGroup,
        [ColorPicker.name]: ColorPicker,
        AkauntingModalAddNew,
        AkauntingRadioGroup,
        AkauntingSelect,
        AkauntingModal,
        AkauntingMoney,
        AkauntingDate,
        AkauntingRecurring,
    },

    props: {
        title: {
            type: String,
            default: '',
            description: "Selectbox label text"
        },
        placeholder: {
            type: String,
            default: '',
            description: "Selectbox input placeholder text"
        },
        formClasses: {
            type: Array,
            default: null,
            description: "Selectbox input class name"
        },
        formError: {
            type: String,
            default: null,
            description: "Selectbox input error message"
        },
        name: {
            type: String,
            default: null,
            description: "Selectbox attribute name"
        },
        value: {
            type: [String, Number, Array, Object],
            default: '',
            description: "Selectbox selected value"
        },
        options: null,

        option_sortable: {
            type: String,
            default: 'value',
            description: "Option Sortable type (key|value)"
        },

        model: {
            type: [String, Number, Array, Object],
            default: '',
            description: "Selectbox selected model"
        },

        icon: {
            type: String,
            description: "Prepend icon (left)"
        },

        addNew: {
            type: Object,
            default: function () {
                return {
                    text: 'Add New Item',
                    status: false,
                    path: null,
                    type: 'modal', // modal, inline
                    field: {},
                    new_text: 'New',
                    buttons: {}
                };
            },
            description: "Selectbox Add New Item Feature"
        },

        group: {
            type: Boolean,
            default: false,
            description: "Selectbox option group status"
        },
        multiple: {
            type: Boolean,
            default: false,
            description: "Multible feature status"
        },
        readonly: {
            type: Boolean,
            default: false,
            description: "Selectbox disabled status"
        },
        disabled: {
            type: Boolean,
            default: false,
            description: "Selectbox disabled status"
        },
        collapse:  {
            type: Boolean,
            default: false,
            description: "Selectbox collapse status"
        },

        noDataText: {
            type: String,
            default: 'No Data',
            description: "Selectbox empty options message"
        },
        noMatchingDataText: {
            type: String,
            default: 'No Matchign Data',
            description: "Selectbox search option not found item message"
        }
    },

    data() {
        return {
            add_new: {
                text: this.addNew.text,
                show: false,
                path: this.addNew.path,
                type: this.addNew.type, // modal, inline
                field: this.addNew.field,
                buttons: this.addNew.buttons
            },
            add_new_text: this.addNew.text,
            new_text: this.addNew.new_text,
            selectOptions: this.options,
            real_model: this.model,
            add_new_html: '',
            form: {},
            new_options: false,
            couunt: 1,
        }
    },

    created() {
        /*
        if (this.group != true && Object.keys(this.options).length) {
            let sortable = [];
            let option_sortable = this.option_sortable;

            for (var option_key in this.options) {
                sortable.push({
                    'key' : option_key,
                    'value': this.options[option_key]
                });
            }

            if (option_sortable == 'value') {
                sortable.sort(function(a, b) {
                    var sortableA = a[option_sortable].toUpperCase();
                    var sortableB = b[option_sortable].toUpperCase();

                    let comparison = 0;

                    if (sortableA > sortableB) {
                        comparison = 1;
                    } else if (sortableA < sortableB) {
                        comparison = -1;
                    }

                    return comparison;
                });
            }

            this.options = sortable;
        }
        */

        this.new_options = {};
    },

    mounted() {
        this.real_model = this.value;

        if (this.model.length) {
            if (eval(this.model) !== undefined) {
                this.real_model = eval(this.model);
            } else {
                this.real_model = this.model;
            }
        }

        if (this.multiple && !this.real_model.length) {
            this.real_model = [];
        }

        this.$emit('interface', this.real_model);

        setTimeout(function() {
            this.change();
        }.bind(this), 800);
    },

    methods: {
        change() {
            if (typeof(this.real_model) === 'object' && typeof(this.real_model.type) !== 'undefined') {
                return false;
            }

            this.$emit('interface', this.real_model);
            this.$emit('change', this.real_model);

            //this.$children[0].$children[0].$emit('keydown.native.tab');
            //this.$children[0].$children[0].handleMenuEnter();

            this.$children[0].$children[0].visible = false;

            /*
            this.$children[0].$children[0].setSoftFocus();
            if (this.$children[0].$children[0].visible) return;

            let option = {};

            option.value = this.real_model;

            this.$children[0].$children[0].$nextTick(() => {
                this.$children[0].$children[0].scrollToOption(option);
            });
            */
        },

        async onAddItem() {
            // Get Select Input value
            if (this.title) {
                var value = this.$children[0].$children[0].$children[0].$refs.input.value;
            } else {
                var value = this.$children[0].$children[0].$refs.input.value;
            }

            if (this.add_new.type == 'inline') {
                if (value === '') {
                    return false;
                }

                await this.addInline(value);
            } else {
                await this.onModal(value);
            }
        },

        addInline(value) {
        },

        onModal(value) {
            let add_new = this.add_new;

            window.axios.get(this.add_new.path)
            .then(response => {
                add_new.show = true;
                add_new.html = response.data.html;

                this.$children[0].$children[0].visible = false;

                this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
                    resolve({
                        template: '<div><akaunting-modal-add-new :show="add_new.show" @submit="onSubmit" @cancel="onCancel" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',

                        components: {
                            AkauntingModalAddNew,
                            AkauntingRadioGroup,
                            AkauntingSelect,
                            AkauntingModal,
                            AkauntingMoney,
                            AkauntingDate,
                            AkauntingRecurring,
                            [ColorPicker.name]: ColorPicker,
                        },

                        data: function () {
                            return {
                                add_new: add_new,
                            }
                        },

                        methods: {
                            onSubmit(event) {
                                this.$emit('submit', event);
                            },

                            onCancel(event) {
                                this.$emit('cancel', event);
                            }
                        }
                    })
                });
            })
            .catch(e => {
                this.errors.push(e);
            })
            .finally(function () {
                // always executed
            });
        },

        onSubmit(event) {
            this.form = event;

            this.loading = true;

            let data = this.form.data();

            FormData.prototype.appendRecursive = function(data, wrapper = null) {
                for(var name in data) {
                    if (wrapper) {
                        if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
                            this.appendRecursive(data[name], wrapper + '[' + name + ']');
                        } else {
                            this.append(wrapper + '[' + name + ']', data[name]);
                        }
                    } else {
                        if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
                            this.appendRecursive(data[name], name);
                        } else {
                            this.append(name, data[name]);
                        }
                    }
                }
            };

            let form_data = new FormData();
            form_data.appendRecursive(data);

            window.axios({
                method: this.form.method,
                url: this.form.action,
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': window.Laravel.csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'multipart/form-data'
                }
            })
            .then(response => {
                this.form.loading = false;

                if (response.data.success) {
                    if (!Object.keys(this.options).length) {
                        this.selectOptions =  {};
                    }

                    this.selectOptions[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value];
                    this.new_options[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value];

                    if (this.multiple) {
                        this.real_model.push(response.data.data[this.add_new.field.key].toString());
                    } else {
                        this.real_model = response.data.data[this.add_new.field.key].toString();
                    }

                    this.add_new.show = false;

                    this.add_new.html = '';
                    this.add_new_html = null;

                    this.$emit('new', response.data.data);

                    this.change();

                    let documentClasses = document.body.classList;

                    documentClasses.remove("modal-open");
                }
            })
            .catch(error => {
                this.form.loading = false;

                this.form.onFail(error);

                this.method_show_html = error.message;
            });
        },

        onCancel() {
            this.add_new.show = false;
            this.add_new.html = null;
            this.add_new_html = null;

            let documentClasses = document.body.classList;

            documentClasses.remove("modal-open");
        },

        addModal() {

        },
    },

    watch: {
        options: function (options) {
            // update options
            this.selectOptions = options;

            if (Object.keys(this.new_options).length) {
                if (!Object.keys(this.options).length) {
                    this.selectOptions =  {};
                }

                for (let [key, value] of Object.entries(this.new_options)) {
                    if (!this.selectOptions[key]) {
                        this.selectOptions[key] = value;
                    }
                }
            }
        },

        real_model: function (value) {
            if (this.multiple) {
                return;
            }

            if (this.real_model != value) {
                this.change();
            }

            let e = $.Event('keyup');
            e.keyCode= 9; // tab
            $('#' + this.name).trigger(e);

            let event = new window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key

            window.dispatchEvent(event);
        },

        value: function (value) {
            if (this.multiple) {
                this.real_model = value;
            } else {
                this.real_model = value.toString();
            }
        },

        model: function (value) {
            if (this.multiple) {
                this.real_model = value;
            } else {
                this.real_model = value.toString();
            }
        }
    },
}
</script>

<style scoped>
    .form-group .modal {
        z-index: 3050;
    }

    .el-select-dropdown__empty {
        padding: 10px 0 0 !important;
    }

    .el-select__footer {
        text-align: center;
        border-top: 1px solid #dee2e6;
        padding: 0px;
        cursor: pointer;
        color: #3c3f72;
        font-weight: bold;
        height: 38px;
        line-height: 38px;
        margin-top: 5px;
        margin-bottom: -6px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .el-select__footer.el-select-dropdown__item.hover {
        background-color: inherit !important;
    }

    .el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
        background-color: #3c3f72 !important;
        color: white !important;
        border-top-color: #3c3f72;
    }

    .el-select__footer div span {
        margin-left: 5px;
    }

    .badge-resize {
        float: right;
        margin-top: -32px;
        margin-right: 35px;
        position: relative;
    }
</style>