<template>
    <div class="ht-base-input-dropdown-email-demo">
        <ht-base-select style="width:100px">
            <ht-base-option v-for="item in emailList" :value="item.value" :key="item.value">{{ item.label }}
            </ht-base-option>
        </ht-base-select>
        <ht-base-auto-complete
                v-model="value"
                @on-search="handleSearch"
                placeholder="email"
                style="width:200px;margin-left: -4px">
            <ht-base-option v-for="item in data" :value="item" :key="item">{{ item }}</ht-base-option>
        </ht-base-auto-complete>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputDropdownEmailDemo',
        data: function () {
            return {
                value: '',
                data: [],
                emailList: [
                    {
                        value: '1',
                        label: '项目2-1'
                    },
                    {
                        value: '2',
                        label: '项目2-2'
                    }
                ]
            }
        },
        methods: {
            handleSearch(value) {
                this.data = !value || value.indexOf('@') >= 0 ? [] : [
                    value + '@gmail.com',
                    value + '@163.com',
                    value + '@qq.com'
                ];
            }
        }
    }
</script>
<style lang="less">
    .ht-base-input-dropdown-email-demo {
        .ht-base-select {
            /deep/ .ivu-select-selection:hover {
                z-index: 1;
            }

            /deep/ .ivu-select-selection:focus {
                z-index: 1;
            }
        }
    }
</style>

