<template>
    <div class="app-input-icon">
        <el-input
            placeholder="请选择 图标"
            v-model="iconClass"
            @focus="openDialog"
            :disabled="disabled"
            clearable
        >
            <template slot="append">
                <i class="selected-icon" :class="iconClass"></i>
            </template>
        </el-input>
        <el-dialog
            title="请选择 图标"
            :visible.sync="dialogTableVisible"
            width="80%"
        >
            <el-tabs>
                <el-tab-pane
                    v-for="(item, index) in iconList"
                    :label="item.label"
                    :key="index"
                    class="app-input-icon--tab-pane"
                >
                    <div
                        class="app-input-icon--item"
                        v-for="(_item, _index) in item.list"
                        :key="_index"
                        @click="selectIcon(_item)"
                    >
                        <span class="item-icon">
                            <i :class="_item"></i>
                        </span>
                        <p class="item-class-name">{{ _item }}</p>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppInputIcon extends Vue {
    /**
     * 属性名称
     *
     * @type {*}
     * @memberof AppInputIcon
     */
    @Prop() name?: any;

    /**
     * 传入值
     * @type {any}
     * @memberof AppInputIcon
     */
    @Prop() public value?: any;

    /**
     * 是否禁用
     * @type {boolean}
     * @memberof AppInputIcon
     */
    @Prop() public disabled?: boolean;

    /**
     * 图标数据
     * @type {any[]}
     * @memberof AppInputIcon
     */
    @Prop() public iconList?: any[];

    /**
     * dialog 对话框开关
     * @type {boolean}
     * @memberof AppInputIcon
     */
    public dialogTableVisible: boolean = false;

    /**
     * 图标类名
     * @type {string}
     * @memberof AppInputIcon
     */
    public iconClass: string = "";

    @Watch("value", { immediate: true })
    valueChange(val: any) {
        if (val) {
            this.iconClass = val;
        } else {
            this.iconClass = "";
        }
    }

    /**
     * 打开对话框
     * @type {}
     * @memberof AppInputIcon
     */
    public openDialog() {
        if (this.disabled) {
            return;
        }
        this.dialogTableVisible = true;
    }

    /**
     * 选中图标类名
     * @type {value:string}
     * @memberof AppInputIcon
     */
    public selectIcon(value: string) {
        this.iconClass = value;
        this.dialogTableVisible = false;
        this.$emit("change", { name: this.name, value: value });
    }
}
</script>
<style lang='less'>
@import "./app-input-icon.less";
</style>
