<template>
    <div class="lofty-email-suggestion">
        <Input v-model:value="email"  type="email" name="email" aria-label="email" placeholder="" :clearable="true" @focus="onFocus" @blur="onBlur" @input="onInput" autocomplete="off" ></Input>
        <ul class="lofty-email-suggestion-list" >
            <li class="lofty-email-suggestion-item" @click="onSelectEmail(item)" v-for="item in emailList" :key="item.id">
                {{ item.legalStr }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import Input from '@/components/input/index.vue';

const emailSuggestion = [
    "gmail.com",
    "yahoo.com",
    "hotmail.com",
    "aol.com",
    "icloud.com",
    "outlook.com"
]
const emits = defineEmits(['update:value','blur','focus','select','input']);

const props = defineProps({
    value: {
        type: String,
        default: ''
    }
});

const email = ref(props.value);

watch(props.value, (newVal)=>{
    email.value = newVal;
});

const state = reactive({
    showSuggestion: false
});
const onFocus = () => {
    state.showSuggestion = true;
}
const onBlur = () => {
  setTimeout(() => {
    state.showSuggestion = false;
    emits('blur');
  }, 100);
}

const onInput = (value)=>{
    emits('input', value);
    emits('update:value', value);
    email.value = value;
}
const emailList = computed(() => {
    if(!state.showSuggestion) return [];
    let em = email.value.trim();
    if (em === '') {
        return [];
    }
    let emailList = [];
    let cuttingLength = 20;
    const match = em.trim().split('@');
    let emailStr = match[0];
    if (match[0].length > cuttingLength) {
        emailStr = '...' + match[0].substr(-cuttingLength);
    }
    emailSuggestion.forEach(item => {
        const legalStr = match[0] + '@' + item;
        if (!match[1]) {
            match.length <= 2 &&
                emailList.push({
                    legalStr,
                    emailStr: emailStr + '@' + item
                });
        } else {
            const strictMatch = item.startsWith(match[1]);
            strictMatch &&
                emailList.push({
                    legalStr,
                    emailStr: emailStr + '@' + item
                });
        }
    });
    return emailList;
});

const onSelectEmail = (item) => {
    email.value = item.legalStr;
    emits('select', item.legalStr);
    emits('update:value', item.legalStr);
    emits('input', item.legalStr);
}
</script>

<style lang="scss">
.lofty-email-suggestion {
    position: relative;
   ul.lofty-email-suggestion-list {
    z-index: 10;
    position: absolute;
    width: 100%;
    max-height: 170px;
    overflow: auto;
    box-shadow: 0 2px 5px 0 rgba(0, 10, 30, 0.1);
    border: 1px solid #ebecf1;
    background: #fff;
    li{
        width: 100%;
        color: #505050;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 14px;
        text-align: left;
        list-style: none;
        padding: 0 10px;
    }
   }
}
</style>