<!-- Created by henian.xu on 2020/4/9. -->

<template>
    <div
        class="icon-picker"
        v-clickoutside="handleClose"
    >
        <div
            class="out-show"
            ref="reference"
            @click="handleFocus"
        >
            <XIcon
                v-if="model"
                :content="model"
                size="super"
            ></XIcon>
            <template v-else>{{ placeholder }}</template>
        </div>


        <transition
            @after-leave="doDestroy"
            name="el-zoom-in-top"
        >
            <el-select-menu
                class="icon-picker-select-menu"
                ref="popper"
                :append-to-body="true"
                v-show="visible"
            >
                <div
                    class="icon-item"
                    @click="onItem('')"
                >
                    <div
                        class="tc-g6"
                        style="line-height: 1.2;text-align: center;">
                        <XIcon content="f008"/>
                        <div>{{$$t('vmf_clear', '清空')}}</div>
                    </div>
                </div>
                <div
                    v-for="(item,index) in iconList"
                    :key="index"
                    class="icon-item"
                    @click="onItem(item,index)"
                >
                    <XIcon
                        :content="item"
                        size="more"
                    ></XIcon>
                </div>
            </el-select-menu>
        </transition>
    </div>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
import selectMixin from '../TreePicker/mixin';

export default {
    name: 'IconPicker',
    mixins: [emitter, selectMixin],
    data() {
        return {
            value_: '',
        };
    },
    props: {
        value: {
            type: String,
            default: null,
        },
        placeholder: {
            type: String,
            default() {
                return this.$$t('vmf_placeholder', '请选择');
            },
        },
    },
    computed: {
        model: {
            get() {
                const { value, value_ } = this;
                if (value === null) return value_;
                return value;
            },
            set(val) {
                if (this.value === null) this.value_ = val;
                this.$emit('input', val);
            },
        },
        iconList() {
            return Array(63)
                .fill('')
                .map((item, index) => {
                    return `e${`${index.toString(16)}`.padStart(3, '0')}`;
                });
        },
    },
    methods: {
        onItem(item) {
            this.model = item;
            this.handleClose();
        },
    },
};
</script>

<style lang="scss">
.icon-picker {
}
.icon-picker-select-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;

    max-height: 480px;
    overflow: auto;

    @include beautify-scrollbar();

    > .icon-item {
        flex: 0 0 auto;
        width: 4em;
        height: 4em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: $padding;
        cursor: pointer;
        border: 1px solid $color-border;
    }
}
</style>
