<template>
    <div>
        <label>Thêm từ khóa:</label>

        <v-select v-model="selectedTags" label="Name" :reduce="onReduce" :filterable="false" :options="tags"
                  @search="getTags" taggable multiple :select-on-key-codes="addTagKeys" :getOptionLabel="getOptionLabel">
            <template v-slot:no-options="{ search, searching }">
                <template v-if="searching">
                    Không có kết quả cho
                    <em>{{ search }}</em>.
                </template>
                <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
            </template>

        </v-select>

    </div>
</template>
<script setup>
    import { ref, reactive, onMounted, watch } from 'vue';
    import _ from 'lodash';
    import tagService from "@/services/tagService";


    //#region data

    const addTagKeys = [13, 188];

    const tags = reactive([]);
    const selectedTags = ref([]);

    //#endregion

    //#region Methods


    async function getTags(keyword, loading) {
        if (keyword.length) {
            loading(true);
            await tagSug(loading, keyword);
        }
    }

    let tagSug = _.debounce(async (loading, keyword) => {
        loading(true);
        tags.splice(0, tags.length);
        var tagResult = await tagService.tagSug(keyword);
        if (tagResult != null && tagResult.length > 0) {
            tagResult.forEach(tag => {
                tags.push(tag);

            });
        }
        loading(false);

    }, 300);

    const onSubmit = async () => {
        console.log(selectedTags);
        var result = [];
        selectedTags.value.forEach(t => {
            if (t.Id >= 0) {
                result.push(t);
            }
        });
        return result;
    };

    const getOptionLabel = (option) => {

        var typeOfOption = typeof option;
        if (typeOfOption === "string") {
            return option;
        } else if (typeOfOption === "object") {
            if (option.Id != null) {
                return option.Name;
            } else {
                if (option.Name != null) {
                    return option.Name;
                } else {
                    return option;
                }
            }
        } else {
            console.log('là function mới ác');
        }

        return option;


    };
    const onReduce = (option) => {
        var typeOfOption = typeof option;
        if (typeOfOption === "string") {
            return { Id: 0, Name: option };
        } else if (typeOfOption === "object") {
            if (option.Id != null) {
                return option;
            } else {
                if (option.Name != null) {
                    return { Id: 0, Name: option.Name };
                } else {
                    console.log('option');
                    console.log(option);
                    return option;
                }
            }

        }


    };

    const init = (initModel) => {
        selectedTags.value = initModel.Tags;
    };



    //#endregion
    onMounted(async () => {
        // var tagResult = await tagService.tagSug("");
        // if (tagResult != null && tagResult.length > 0) {
        //     tagResult.forEach(tag => {
        //         tags.push(tag);

        //     });
        // }
    });


    defineExpose({
        onSubmit,
        init
    })

</script>
<style lang="css">
    /* Vue3 Input Tags */
    .v3ti {
        border: 1px solid #eae8f1 !important;
        border-radius: 3px !important;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .v3ti--focus {
        border-color: #b3c6ff !important;
        box-shadow: none !important;
    }

    .v3ti .v3ti-tag {
        font-size: .75rem !important;
        color: #031b4e !important;
        background-color: #ecf0fa !important;
        border-radius: 3px !important;
        padding: 0 0.5rem !important;
        line-height: 2em !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important;
        cursor: default;
        font-weight: 400 !important;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-block-end: 0.5rem;
    }

    .v3ti .v3ti-tag .v3ti-remove-tag {
        display: inline-block !important;
        padding: 0 0.5rem !important;
        color: inherit !important;
        text-decoration: none !important;
        background: rgba(0, 0, 0, .06) !important;
        margin: 0 -0.5rem 0 0.5rem !important;
        margin-block: 0 !important;
        margin-inline-start: 0.5rem !important;
        margin-inline-end: -0.5rem !important;
        text-align: center !important;
        min-width: 1.5rem !important;
    }

    .v3ti .v3ti-tag .v3ti-remove-tag:hover {
        background: rgba(0, 0, 0, .16);
        color: inherit;
    }

    /* End Vue3 Input Tags */
</style>
