<template>
    <hc-dialog v-model="isShow" is-table :footer="false" widths="1200px" title="图标选择" @close="menuIconClose">
        <div class="hc-menu-icon-box h-full">
            <div class="hc-icon-search">
                <el-input v-model="iconKey" placeholder="请输入图标英文关键词进行筛选" clearable @input="iconInput">
                    <template #prefix>
                        <hc-icon name="search" />
                    </template>
                </el-input>
            </div>
            <div class="hc-icon-content">
                <el-scrollbar>
                    <div class="hc-menu-icon">
                        <el-row :gutter="10">
                            <el-col v-for="item in iconList" :key="item" :span="4">
                                <div class="icon-item" @click="iconClick(item)">
                                    <div class="icon">
                                        <hc-icon :name="item" />
                                    </div>
                                    <div class="name">{{ item }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </hc-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getRemixicon } from '~api/other'
import { deepClone } from 'js-fast-way'

//事件
const emit = defineEmits(['finish', 'close'])

defineOptions({
    name: 'HcMenuIcon',
})

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

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

//初始化图标
const icons = ref([])
const initIcon = async () => {
    const { res } = await getRemixicon()
    const regex = /ri-(.*?)-line/g
    let matches = [], match
    while ((match = regex.exec(res))) {
        matches.push(match[1])
    }
    icons.value = matches
    iconList.value = deepClone(matches)
}

//搜索图标
const iconKey = ref('')
const iconList = ref([])
const iconInput = (val) => {
    if (val) {
        iconList.value = icons.value.filter(item => item.includes(val))
    } else {
        iconList.value = deepClone(icons.value)
    }
}

//点击图标
const iconClick = (item) => {
    emit('finish', item)
}

//关闭
const menuIconClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style lang="scss">
.hc-menu-icon-box {
    position: relative;
    .hc-icon-search {
        position: relative;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .hc-icon-content {
        position: relative;
        height: calc(100% - 75px);
        .el-scrollbar__bar.is-vertical {
            right: -8px;
        }
        .hc-menu-icon {
            overflow: hidden;
            .icon-item {
                width: 100%;
                text-align: center;
                background-color: rgba(0,0,0,.02);
                border-radius: 3px;
                padding: 10px 0;
                margin-right: 10px;
                margin-top: 10px;
                cursor: pointer;
                transition: all 0.6s ease;
                .icon {
                    font-size: 24px;
                    color: #1A1A1A;
                }
                .name {
                    font-weight: normal;
                    padding: 10px 0 5px 0;
                    color: #8c8c8c;
                    font-size: 14px;
                    line-height: 12px;
                    opacity: 0.8;
                }
                &:hover {
                    background-color: rgba(0,0,0,.06);
                }
            }
        }
    }
}
</style>
