<template>
    <div class="home-input-view" :class="[searchKey?'tip-list':'', isFocus?'input-focus':'']">
        <div class="hc-home-search-input-box">
            <div class="cu-input-icon">
                <HcIcon name="search"/>
            </div>
            <input ref="inputRef" class="hc-home-search-input" :placeholder="placeholder" :value="modelValue" @blur="blur" @change="change" @focus="focus" @input="input" @keyup.enter="enter"/>
            <div class="cu-input-icon hover" v-if="clearable" @click="clearClick">
                <HcIcon name="close"/>
            </div>
            <div class="cu-input-search">搜索</div>
        </div>
        <div class="home-input-tip-list-box">
            <div class="tip-list-item">列表1</div>
            <div class="tip-list-item">列表2</div>
            <div class="tip-list-item">列表3</div>
            <div class="tip-list-item">列表1</div>
            <div class="tip-list-item">列表2</div>
            <div class="tip-list-item">列表3</div>
            <div class="tip-list-item">列表1</div>
            <div class="tip-list-item">列表2</div>
            <div class="tip-list-item">列表3</div>
            <div class="tip-list-item">列表1</div>
            <div class="tip-list-item">列表2</div>
            <div class="tip-list-item">列表3</div>
            <div class="tip-list-item">列表1</div>
            <div class="tip-list-item">列表2</div>
            <div class="tip-list-item">列表3</div>
            <div class="tip-list-item">列表1</div>
            <div class="tip-list-item">列表2</div>
            <div class="tip-list-item">列表3</div>
        </div>
    </div>

</template>

<script setup>
import {onMounted, ref} from "vue"
//import {getAazyList} from '~api/menu';
//import {getArrValue} from "vue-utils-plus"

const props = defineProps({
    //输入框占位文本
    placeholder: {
        type: String,
        default: ''
    },
    //值
    modelValue: {
        type: String,
        default: ""
    },
})

//变量
const inputRef = ref();
const isFocus = ref(false)
const clearable = ref(false)
const searchKey = ref(props.modelValue)

//渲染完成
onMounted(() => {
    getAazyListApi()
})


//获取菜单数据
const menuAazyList = ref([])
const getAazyListApi = async () => {
    /*const {error, code, data} = await getAazyList({
        sysId: '1528578177090609154',
        parentId: ''
    })
    //判断状态
    if (!error && code === 200) {
        menuAazyList.value = getArrValue(data)
    } else {
        menuAazyList.value = []
    }*/
}


//事件
const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur', 'enter', 'change', 'clear'])

//值改变时触发
const input = (e) => {
    upModelValue(e.target.value)
    emit('input', e.target.value)
    clearable.value = !!e.target.value;
}

//获得焦点时触发
const focus = (e) => {
    isFocus.value = true
    emit('focus', e)
}

//失去焦点时触发
const blur = (e) => {
    isFocus.value = false
    emit('blur', e)
}

//按下回车时触发
const enter = (e) => {
    upModelValue(e.target.value)
    emit('enter', e.target.value)
}

//在失去焦点时触发
const change = (e) => {
    upModelValue(e.target.value)
    emit('change', e)
}

//点击清空按钮时触发
const clearClick = () => {
    upModelValue('')
    emit('input', '')
    emit('clear', '')
    clearable.value = false;
}

//更新值
const upModelValue = (value = '') => {
    searchKey.value = value
    emit('update:modelValue', value)
}
</script>

<style lang="scss" scoped>
.home-input-view {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    padding: 0 4rem;
    .hc-home-search-input-box {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        background: white;
        padding-left: 10px;
        border-radius: 50px;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0,.15);
        .hc-home-search-input {
            flex: 1;
            border: 0;
            height: 40px;
            font-size: 16px;
            position: relative;
            background: inherit;
            color: black;
            &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                color: #cccccc;
            }
            &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #cccccc;
            }
            &:-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #cccccc;
            }
            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: #cccccc;
            }
            &:-ms-input-placeholder { /* Microsoft Edge */
                color: #cccccc;
            }
            &:focus {
                outline: none;
            }
        }
        .cu-input-icon {
            width: 40px;
            height: 55px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: #999999;
            &.hover {
                cursor: pointer;
                transition: color 0.3s;
                &:hover {
                    color: #666666;
                }
            }
            &.search:hover {
                color: var(--el-color-primary);
            }
        }
        .cu-input-search {
            position: relative;
            height: 55px;
            display: flex;
            padding: 0 26px;
            align-items: center;
            justify-content: center;
            border-radius: 0 40px 40px 0;
            cursor: pointer;
            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
            background-size: 200%;
            transition: background-position .5s;
            &:hover {
                background-position: 100% 0;
            }
        }
    }
    .home-input-tip-list-box {
        position: absolute;
        top: 65px;
        left: 4rem;
        right: 4rem;
        max-height: 200px;
        overflow-y: auto;
        padding: 0 24px;
        background-color: white;
        border-radius: 5px;
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        color: black;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0,.15);
        transition: .35s cubic-bezier(.24,.22,.015,1.56);
        .tip-list-item {
            position: relative;
            padding: 10px 0;
            cursor: pointer;
            transition: color 0.3s, background-color 0.3s;
            &:hover {
                color: var(--el-color-primary);
                background-color: var(--el-color-primary-light-9);
            }
        }
        .tip-list-item + .tip-list-item {
            border-top: 1px solid #f1f1f1;
        }
    }
    &.tip-list .home-input-tip-list-box {
        opacity: 1;
        z-index: 22;
        pointer-events: all;
    }
}
</style>
