<template>
    <div class="select-menu-icon-input">
        <el-input v-model="source" :clearable="clearable" :disabled="disabled" :placeholder="placeholder">
            <template #prepend>
                <hc-icon :name="source" />
            </template>
            <template #append>
                <el-button @click="isIconShow = true">选择图标</el-button>
            </template>
        </el-input>
        <!-- 图标选择 -->
        <hc-menu-icon v-model="isIconShow" @finish="menuIconFinish" />
    </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
    disabled: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    placeholder: {
        type: String,
        default: '请选择图标',
    },
})

defineOptions({
    name: 'HcIconInput',
})

//双向绑定
const source = defineModel('modelValue', {
    default: '',
})

//图标选择
const isIconShow = ref(false)
const menuIconFinish = (icon) => {
    source.value = icon
    isIconShow.value = false
}
</script>

<style lang="scss">
//选择图标的输入框
.select-menu-icon-input {
    position: relative;
    width: 100%;
    .el-input .el-input-group__prepend {
        padding: 0 6px;
        font-size: 22px;
    }
}
</style>
