<template>
    <el-autocomplete
        v-show="typeof row.show === 'function'? row.show?.(modelData): true"
        v-model="model"
        class="info-autocomplete"
        :popper-class="'info-autocomplete_popper'"
        :name="row.model"
        :fetch-suggestions="querySearch"
        :placeholder="$t(row.placeholder?.() || 'pleaseInput')"
        :clearable="!!row.clearable"
        :disabled="row.disabled?.(modelData)"
        :teleported="row.teleported === undefined ? true : row.teleported"
        @blur="blur($event)"
    >
        <template
            v-if="row.append"
            #append
        >
            <el-input
                v-model="inputModel"
                :disabled="row.append.disabled?.(modelData)"
                :placeholder="$t(row.append.placeholder?.() || 'pleaseInput')"
                :clearable="row.append.clearable !== false"
                @blur="blur2($event)"
            >
            </el-input>
        </template>
        <template #default="{ item }">
            <span class="value">{{ item.value }}</span>
            <span class="tip">{{ item.tip }}</span>
        </template>
    </el-autocomplete>
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useModel from '../../../script/help/useModel'
import { AutocompleteInterface } from './index'

export default defineComponent({
    name: 'InfoAutocomplete',
    components: {
        Search
    },
    props: {
        row: {
            type: Object as PropType<AutocompleteInterface>,
            default: () => {}
        },
        modelData: {
            type: Object,
            default: () => {}
        },
        totalIndex: Number,
        addIndex: { // addform Index
            type: [Number, String],
            default: () => ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex, row)
        const inputModel = useModel(modelData, row.append?.model || '', row.deepData)
        const restaurants = computed(() => {
            return row.options?.() || []
        })
        const querySearch = (queryString: string, cb: any) => {
            const results = queryString
                ? restaurants.value.filter((item) => item.value.includes(queryString))
                : restaurants.value
            // call callback function to return suggestions
            cb(results)
        }

        const blur = ($event): void => {
            row.blurMethod?.(model, modelData, $event)
        }
        const blur2 = ($event): void => {
            row.append?.blurMethod?.(model, modelData, $event)
        }
        return {
            model,
            inputModel,
            blur,
            querySearch,
            blur2
        }
    }
})
</script>
<style lang="scss">
.info-autocomplete {
    width: 100%;
    .el-input-group__append {
        background-color: transparent;
        box-shadow: none;
        width: 50%;
        padding-right: 0;
    }
}
.info-autocomplete_popper .tip {
    float: right;
    color: #999;
}
</style>
