<template>
    <el-dialog title="图标选择" :close-on-click-modal="false"
        class="JNPF-dialog JNPF-dialog_center icon-dialog" lock-scroll append-to-body
        v-bind="$attrs" width="600px" :modal-append-to-body="false" v-on="$listeners">
        <div slot="title">
            图标选择
        </div>
        <div class="icon-list">
            <el-button v-for="item,index in iconList" :key="index" @click="choiceIcon(item.icon)">
                <slot>
                    <el-image :src="minioPath+ item.icon"></el-image>
                </slot>
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getIconList } from "@/api/governmentCloud/iconManagement/iconManagement";
import { minioPath } from '@/utils/apiUrl'

export default {
    props: [],
    data() {
        return {
            minioPath: minioPath,
            iconList: [],
        }
    },
    watch: {
    },
    async created() {
        await this.getIconList()
    },
    methods: {
        getIconList() {
            return new Promise((resolve, reject) => {
                getIconList()
                    .then(res => {
                        let list = []
                        res.data.forEach(url => {
                            let obj = {
                                icon: url
                            }
                            list.push(obj)
                        });
                        this.iconList = list;
                    })
                resolve(true)
            })
        },
        choiceIcon(icon) {
            this.$emit('choiceIcon', icon)
        },
    }
}
</script>
<style lang="scss" scoped>
.icon-list {
    padding-bottom: 8px;
    > .el-button {
        margin: 8px 0 0 8px;
        width: 60px;
        height: 60px;
        padding: 0;
        >>> span {
            width: 60px;
            height: 60px;
            display: inline-block;
            line-height: 60px;
            text-align: center;
            transition: 300ms;
            [class^='el-icon-'] {
                margin-top: 17px;
            }
            .fa {
                margin-top: 17px;
            }
        }
        i {
            font-size: 24px;
        }
        &:hover {
            >>> span {
                transform: scale(1.1);
            }
        }
    }
}
</style>