<template>
    <div>
        <div v-for="item in list" :key="item.vsiValue" class="icon-container" v-on:click ="handleClick(item)">
            <Icon :type="item.vsiValue" class="icon-size"></Icon>
            <P>{{item.vsiValue}}</P>
        </div>
    </div>
</template>
<script>
    export default {

        components: {},
        props: {},
        created: function () {

            this.$emit('SetPageSize', 800);
            this.$emit("SetTitle", this.$t('module.menu.editIcon'));
            this.$emit('SetPageActions', [
                {
                    text: this.$t("common.close"),
                    theme: "primary",
                    handle: () => {
                        this.$emit("Close");
                    }
                }
            ]);
            this.getData();
        },
        mounted: function () {

        },
        data() {
            return {
                list: [],
            }
        },
        computed: {},

        beforeMount: function () {

        },
        beforeDestroy: function () {

        },
        destroyed: function () {

        },
        methods: {
            handleClick(item) {
                this.$emit("Close", item);
            },
            getData() {
                $store.dispatch("GetValueSetByCode", {
                    code: 'MENU_ICON'
                })
                    .then(response => {
                        this.list = response.dataResult;
                    }).catch(error => {
                    this.$Message.warning({
                        content: error.message,
                        duration: 3
                    });
                })
            }
        },
        watch: {},
        directives: {}
    }
</script>

<style scoped>


    .icon-container {
        float: left;
        padding-top: 10px;
        width: 100px;
        text-align: center;
        cursor: pointer;
        height: 50px;
        color: #5c6b77;
        position: relative;
    }

    .icon-size {
        font-size: 20px;
    }

</style>