<template>
    <div class="icon-container">
        <el-form inline label-width="100px">
            <el-form-item>
                <el-radio-group
                    v-model="copy"
                    button
                    :opts="[
                        { label: '复制代码', value: 0 },
                        { label: '复制名称', value: 1 },
                    ]"
                />
            </el-form-item>
            <el-form-item>
                <el-radio-group
                    v-model="type"
                    button
                    :opts="[
                        { label: 'element-plus', value: 0 },
                        { label: 'remix-icon', value: 1 },
                    ]"
                />
            </el-form-item>
            <el-form-item label="图标名称">
                <el-input v-model="query" />
            </el-form-item>
            <el-form-item label="图标尺寸">
                <el-input-number v-model="size" :max="64" :min="16" />
            </el-form-item>
        </el-form>
        <el-scrollbar>
            <ul>
                <li v-for="(item, index) in filterIcons" :key="index" @click="handleIcon(item)">
                    <div class="icon">
                        <el-icon :name="item" :size="size" />
                    </div>
                    <div class="name">{{ item }}</div>
                </li>
            </ul>
        </el-scrollbar>
    </div>
</template>

<script>
    import remixIcons from '@/icons/index.json';
    import * as icons from '@element-plus/icons';
    export default defineComponent({
        name: 'IconDemo',
        setup() {
            const { proxy } = getCurrentInstance();
            const elementIcons = Object.entries(icons).map((item) => item[0]);
            const state = reactive({
                type: 0,
                copy: 1,
                size: 32,
                remixIcons,
                elementIcons,
                query: null,
            });
            const filterIcons = computed(() =>
                (state.type ? state.remixIcons : state.elementIcons).filter(
                    (item) => !state.query || item.indexOf(state.query) !== -1
                )
            );
            const handleIcon = (item) => {
                if (state.copy) {
                    proxy.$copy(item);
                } else {
                    proxy.$copy(`<el-icon name="${item}" :size="${state.size}" />`);
                }
            };
            return {
                ...toRefs(state),
                filterIcons,
                handleIcon,
            };
        },
    });
</script>

<style lang="less">
    .icon-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        ul {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(auto-fill, 160px);
            justify-content: space-evenly;
            gap: 0;
            list-style: none;
            li {
                cursor: pointer;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                &:hover {
                    background: rgba(0, 0, 0, 0.1);
                }
                .icon {
                    padding: 20px;
                }
                .name {
                    font-size: 16px;
                    padding: 10px;
                    word-break: keep-all;
                }
            }
        }
    }
</style>
