<template>
    <el-dialog title="选择图标" class="icon-dialog" :visible.sync="show" append-to-body destroy-on-close :before-close="onClose">
        <div class="icons">
            <div class="icons-item" :class="{ 'icons-selected': selectedIcon == item }" v-for="(item, index) in icons" :key="index" @click="onClick(item)">
                <i :class="item"></i>
            </div>
        </div>
        <div class="tool">
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import icons from '@/config/icons';
export default {
    props: ['show'],
    data () {
        return {
            icons,
            selectedIcon: null,
        }
    },
    methods: {
        onClose() {
            this.$emit('update:show', false);
        },
        onClick(data) {
            this.selectedIcon = data;
        },
        onSubmit() {
            if (this.selectedIcon) {
                this.$emit('confirm', this.selectedIcon);
            }
            else {
                this.$message({
                    message: '请选择一个图标后操作',
                    type: 'warning'
                });
            }
        }
    }
}
</script>

<style lang="scss">
.icon-dialog {
    .el-dialog {
        width: 670px !important;
    }
}
</style>

<style lang="scss" scoped>
.icons {
    display: flex;
    flex-wrap: wrap;
    height: 390px;
    max-height: 390px;
    overflow-y: scroll;
    // border-top: 1px solid #F0F0F0;
    // border-left: 1px solid #F0F0F0;
    &-item {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border: 1px solid #F0F0F0;
        background-color: #FFFFFF;
        cursor: pointer;
        // margin: -1px 0 0 -1px;
    }
    &-selected {
        background-color: #E0E0F0;
    }
}
.tool {
    display: flex;
    justify-content: flex-end;
    margin: 8px;
}
</style>