<template>
    <div class="zr-select-icon-content" :class="{'zr-select-icon-black':isBlack}">
        <div class="zr-select-icon" @click="openIconBox" @mouseover="onHover = true" @mouseleave="onHover = false">
            <span v-if="!icon">选择图标</span>
            <i v-else class="zr-select-font-icon iconfont" :class="icon"></i>
            <div class="icon-delete" v-show="isDelete && icon && onHover" @click.stop="deleteIcon">
                <i class="el-icon-delete"></i>
            </div>
        </div>
        <zr-dialog width="800px" :title="dialogTitle" :dialog-show.sync="dialog" :appendToBody="true" :modalAppendToBody="true" :close-on-click-modal="false" @close="handleClose"
            @confirm="handleSubmit">
            <div class="tabs-nav">
                <zr-tabs :curIndex="cur" :tabs="tabs" :option="tabsOption" :height="36" @changeTabs="changeTabs" :color="isBlack?'var(--menu-text)':''" />
            </div>
            <div class="icon-list" :class="{'icon-list-black':isBlack}">
                <ul>
                    <li v-for="(item, index) in iconLists" :key="index" :class="{ isSelect: selectName === item }"
                        @click="selectIcon(item, index)">
                        <i class="iconfont iconitem" :class="item"></i>
                        <span class="triangle" v-if="selectName === item"></span>
                        <i class="tri-icon el-icon-check" v-if="selectName === item"></i>
                    </li>
                </ul>
            </div>
        </zr-dialog>
    </div>
</template>

<script>
export default {
    name: "SelectIcon",
    props: {
        icon: {
            type: String,
            default: "",
        },
        isDelete: {
            type: Boolean,
            default: true
        },
        isBlack: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            onHover: false,
            dialogTitle: "请选择字体图标",
            dialog: false,
            cur: 0,
            selectName: null,
            tabsOption: {
                label: "title",
                value: "id",
                icon: "icon",
            },
            tabs: [
                {
                    id: 0,
                    title: "常用图标",
                    icon: "zr-icon-dianlijiance",
                },
                {
                    id: 1,
                    title: "电力水利工业",
                    icon: "zr-icon-zhihuishuiwu",
                },
                {
                    id: 2,
                    title: "系统管理",
                    icon: "zr-icon-nengyuanguanli",
                },
                {
                    id: 3,
                    title: "商城供应链",
                    icon: "zr-icon-xinnengyuanji-baojingguanli",
                },
            ],
            iconLists: [],
            fontIcons01: [
                "zr-icon-crown",
                "zr-icon-earth",
                "zr-icon-drag",
                "zr-icon-YUAN",
                "zr-icon-up-circle",
                "zr-icon-gift",
                "zr-icon-warning-circle",
                "zr-icon-stop",
                "zr-icon-sync",
                "zr-icon-fire",
                "zr-icon-transaction",
                "zr-icon-thunderbolt",
                "zr-icon-undo",
                "zr-icon-check-circle-fill",
                "zr-icon-redo",
            ],
            fontIcons02: [
                "zr-icon-dianlijiance",
                "zr-icon-xinnengyuanji-baojingguanli",
                "zr-icon-nengyuanguanli",
                "zr-icon-huanbaoshuiwudashuju",
                "zr-icon-shouye-shuiwusheshi-heliu",
                "zr-icon-zhihuishuiwu",
                "zr-icon-warning-circle",
                "zr-icon-dianlijiankong",
                "zr-icon-dianlidianliangpingheng",
                "zr-icon-zhejiangdianli",
                "zr-icon-dianlishengchan",
                "zr-icon-dianli",
                "zr-icon-dianlisheshi",
                "zr-icon-dianli1",
            ],
            fontIcons03: [
                "zr-icon-adduser",
                "zr-icon-control-fill",
                "zr-icon-deleteteam",
                "zr-icon-layout-fill",
                "zr-icon-deleteuser",
                "zr-icon-appstore-fill",
                "zr-icon-addteam",
                "zr-icon-user",
                "zr-icon-team",
                "zr-icon-areachart",
            ],
            fontIcons04: [
                "zr-icon-RectangleCopy190",
                "zr-icon-RectangleCopy192",
                "zr-icon-RectangleCopy193",
                "zr-icon-RectangleCopy194",
                "zr-icon-RectangleCopy195",
                "zr-icon-RectangleCopy196",
                "zr-icon-RectangleCopy197",
                "zr-icon-RectangleCopy198",
                "zr-icon-RectangleCopy199",
                "zr-icon-RectangleCopy200",
            ],
        };
    },
    watch: {
        cur(val) {
            let value = val ? val : 0;
            switch (value) {
                case 0:
                    this.iconLists = this.fontIcons01;
                    break;
                case 1:
                    this.iconLists = this.fontIcons02;
                    break;
                case 2:
                    this.iconLists = this.fontIcons03;
                    break;
                case 3:
                    this.iconLists = this.fontIcons04;
                    break;
            }
        },
    },
    methods: {
        openIconBox() {
            this.dialog = true;
            this.cur = 0;
            this.iconLists = this.fontIcons01;
            this.selectName = null;
        },
        handleSubmit() {
            this.dialog = false;
            if (!this.selectName) return;
            this.$emit("selectIcon", this.selectName);
        },
        handleClose() {
            this.dialog = false;
            this.cur = 0;
            this.iconLists = this.fontIcons01;
            this.selectName = null;
        },
        changeTabs(row) {
            this.cur = row.id;
        },
        selectIcon(item, index) {
            this.selectName = item;
        },
        deleteIcon() {
            this.selectName = null;
            this.$emit('deleteIcon')   
        }
    },
};
</script>

<style lang="less" scoped>
.zr-select-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px dashed #c0ccda;
    border-radius: 4px;
    background-color: #fbfdff;
    font-size: 14px;
    color: #8c939d;
    cursor: pointer;

    .zr-select-font-icon {
        font-size: 38px;
    }
    .icon-delete {
        position: absolute;
        right: 5px;
        top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
}

.tabs-nav {
    width: 100%;
    height: auto;
    border-bottom: 3px solid rgba(0, 0, 0, 0.05);

    .zr-tabs {
        position: relative;
        top: 3px;
    }
}

.icon-list {
    display: inline-block;
    height: auto;
    margin-top: 20px;

    ul {
        display: flex;
        flex-wrap: wrap;
        border-left: 1px solid;
        border-color: rgba(0, 0, 0, 0.05);
        padding: 0;
        li {
            position: relative;
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            color: #666;
            font-size: 24px;
            border-top: 1px solid;
            border-right: 1px solid;
            border-bottom: 1px solid;
            margin-right: -1px;
            margin-bottom: -1px;
            border-color: rgba(0, 0, 0, 0.05);
            cursor: pointer;

            i {
                font-size: 32px;
            }
        }

        .isSelect {
            background-color: var(--primary-color);
            color: #fff;

            .triangle {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 0;
                height: 0;
                border-bottom: 26px solid rgba(0, 0, 0, 0.2);
                border-left: 26px solid transparent;
            }

            .tri-icon {
                position: absolute;
                right: 1px;
                bottom: 0;
                font-size: 14px;
                font-weight: bold;
            }
        }
    }
}

.zr-select-icon-black {
    .zr-select-icon {
        border-color: var(--border-color);
        border-radius: 4px;
        background-color: var(--input-color);
        color: var(--font-color)
    }
    .tabs-nav {
        border-color: var(--border-color);
    }
    
}

.icon-list.icon-list-black {
    ul {
        border-color: var(--border-color);
        li {
            color: var(--font-color);
            border-color: var(--border-color);
        }

        .isSelect {
            background-color: var(--primary-color);
            color: var(--font-color);
            .triangle {
                border-bottom: 26px solid rgba(0, 0, 0, 0.2);
            }

            .tri-icon {

            }
        }
    }
}


/deep/.el-dialog__body {
    padding: 10px 20px 20px 20px !important;
}
</style>