<template>
    <ap-container>
        <ap-header margin="1101">
            <div>
                <el-radio v-model="showType" :label="0">分类显示</el-radio>
                <el-radio v-model="showType" :label="1">自定义</el-radio>
                <el-radio v-model="showType" :label="2">Element默认</el-radio>
                <el-radio v-model="showType" :label="3">图片</el-radio>
            </div>
            <div class="ap-split-line"/>
            <div>
                <div v-for="(value,key) in errorIcon">
                    <div v-for="item of value" :key="item.icon_id" class="icon-ctn">
                        <div class="icon-item-ctn">
                            <span class="icon-item" style="color: red">
                              <i :class="getIconClass(item) "/>
                            </span>
                        </div>
                        <div class="icon-text-ctn">
                            <span class="icon-text" style="color: red">{{ getIconClass(item) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </ap-header>
        <ap-main margin="0111" class="icons-container">
            <template v-if="showType == 0">
                <template v-for="group of iconGroup">
                    <el-collapse v-model="activeNames">
                        <el-collapse-item :title="group.name" :name="group.name">
                            <div v-for="item of group.icons" class="icon-ctn">
                                <div class="icon-item-ctn">
                            <span class="icon-item">
                              <i :class="getIconClass(item) " @click="copyIconCode(item,$event)"/>
                            </span>
                                </div>
                                <div class="icon-text-ctn">
                                    <span class="icon-text" @click="copyIconClass(item,$event)">{{ getIconClass(item) }}</span>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>

                </template>

            </template>

            <template v-if="showType == 1">
                <div v-for="item of myIcons" :key="item.icon_id" class="icon-ctn">
                    <div class="icon-item-ctn">
                        <span class="icon-item">
                          <i :class="getIconClass(item.font_class) " @click="copyIconCode(item.font_class,$event)"/>
                        </span>
                    </div>
                    <div class="icon-text-ctn">
                        <span class="icon-text"
                              @click="copyIconClass(item.font_class,$event)">{{ getIconClass(item.font_class) }}</span>
                    </div>
                </div>
            </template>
            <template v-if="showType == 2">
                <div v-for="item of eleIcons" :key="item" class="icon-ctn">
                    <div class="icon-item-ctn">
            <span class="icon-item">
              <i
                  :class="getIconClass(item) "
                  @click="copyIconCode(item,$event)"
              />
            </span>
                    </div>
                    <div class="icon-text-ctn">
                        <span class="icon-text" @click="copyIconClass(item,$event)">{{ getIconClass(item) }}</span>
                    </div>
                </div>
            </template>
            <template v-if="showType == 3">
                <div v-for="item of iconImgs" :key="item" class="icon-img-ctn">
                    <div class="icon-item-ctn" @click="copyIconImg(item,$event)">
                        <img :src="getIconImg(item)" class="icon-img-ctn-img">
                    </div>
                    <div class="icon-text-ctn">
                        <span class="icon-text" @click="copyIconImgName(item,$event)">{{ item }}</span>
                    </div>
                </div>
            </template>
        </ap-main>
    </ap-container>
</template>

<script>
import clipboard from 'ap-util/util/ClipboardUtil'
import icons from 'ap-frame/frame/assets/icon/iconfont.json'
import elementIcons from './ApiIcon/element-icons'
import iconGroup from './ApiIcon/iconGroup'

export default {
    name: 'ApiIconList',
    data() {
        const myIcons = icons.glyphs;
        let activeNames = ["未分组"];
        for (let i = 0; i < iconGroup.length; i++) {
            activeNames.push(iconGroup[i].name)
        }
        let eleIcons = [];
        for (let key in elementIcons) {
            eleIcons.push(key);
        }
        return {
            errorIcon: this.getErrorIcon(),
            myIcons,
            eleIcons,
            showType: 0,
            iconImgs: ["a101.png","a102.png","a103.png","a104.png","a105.png","a106.png","a107.png","a108.png","a109.png","a110.png","a111.png","a112.png","a113.png","a114.png","a201.png","a202.png","a203.png","a204.png","a205.png","a206.png","a207.png","a301.png","a302.png","a303.png","a304.png","a305.png","a306.png","a307.png","a308.png","a309.png","a310.png","a311.png","a401.png","a402.png","a403.png","a404.png","a405.png","a406.png","a407.png","a408.png","a501.png","a502.png","a503.png","a504.png","a505.png","a506.png","b101.png","b102.png","b103.png","b104.png","b105.png","b106.png","b201.png","b202.png","b203.png","b204.png","b205.png","b206.png","b207.png","b208.png","b209.png","b210.png","b212.png","b213.png","b214.png","b215.png","b301.png","b302.png","b303.png","b304.png","b305.png","b306.png","b307.png","b308.png","b401.png","b402.png","b403.png","b404.png","b405.png","b406.png","b407.png","c101.png","c102.png","c103.png","c104.png","c105.png","c106.png","c107.png","c108.png","c109.png","c110.png","c111.png","c112.png","c201.png","c202.png","c203.png","c204.png","c205.png","c206.png","c207.png","c208.png","c209.png","c210.png","c211.png","c212.png","c213.png","c214.png","c215.png","c216.png","c217.png","c218.png","c219.png","c220.png","c221.png","c222.png","c223.png","c224.png","c225.png","c226.png","c227.png","c228.png","c229.png","c230.png","c231.png","c301.png","c302.png","c303.png","c304.png","c305.png","c306.png","d101.png","d102.png","d103.png","d104.png","d105.png","d106.png","d107.png","d108.png","d109.png","d110.png","d111.png","d112.png","d113.png","d114.png","d115.png","d116.png","d117.png","d118.png","d119.png","d120.png","d121.png","d122.png","d123.png","d124.png","d125.png","d126.png","d201.png","d202.png","d203.png","d204.png","d205.png","d206.png","d207.png","d208.png","d209.png","d210.png","d211.png","d213.png","d301.png","d302.png","d303.png","d304.png","d305.png","d306.png","d307.png","d308.png","d309.png","d310.png","d311.png","d312.png","d313.png","d314.png","d315.png","d316.png","d317.png","d318.png","d319.png","d320.png","d321.png","d322.png","d323.png","d325.png","d326.png","d327.png","d328.png","d329.png","d330.png","e101.png","e102.png","e103.png","e104.png","e105.png","e106.png","e107.png","e108.png","e109.png","e110.png","e111.png","e112.png","e113.png","e114.png","e115.png","e116.png","e117.png","e118.png","e119.png","e120.png","e121.png","e122.png","e123.png","e124.png","e201.png","e202.png","e203.png","e204.png","e205.png","e206.png","e207.png","e208.png","e301.png","e302.png","e303.png","e304.png","e305.png","e306.png","e401.png","e402.png","e403.png","e404.png","e405.png","e406.png","e407.png","e408.png","e409.png","e410.png","e411.png","f101.png","f102.png","f103.png","f104.png","f105.png","f106.png","f107.png","f108.png","f109.png","f110.png","f111.png","f112.png","f113.png","f114.png","f115.png","f116.png","f117.png","f118.png","f119.png","f120.png","f121.png","f201.png","f202.png","f203.png","f204.png","f205.png","f206.png","f207.png","f208.png","f209.png","f210.png","f211.png","f212.png","f213.png","f301.png","f302.png","f303.png","f304.png","f305.png","f306.png","f307.png","f308.png","f309.png","f310.png","f311.png","f312.png","g101.png","g102.png","g103.png","g104.png","g105.png","g106.png","g107.png","g201.png","g202.png","g203.png","g204.png","g205.png","g206.png","g301.png","g302.png","g303.png","g304.png","g305.png","g306.png","g307.png","g308.png","g309.png","g310.png","g311.png","g312.png","g313.png","g314.png","g315.png","g316.png","g317.png","g318.png","g319.png","g320.png","g321.png","g322.png","g323.png"],
            iconGroup,
            activeNames: activeNames
        }
    },
    mounted() {
        // 未分组处理
        this.initUnGroup();
    },
    methods: {
        getErrorIcon() {
            console.log(111111);
            const myIcons = icons.glyphs;
            var allCode = {}
            var errorObj = {}
            for (let i = 0; i < myIcons.length; i++) {
                let arr = allCode[myIcons[i].unicode];
                if (arr == null) {
                    arr = [];
                }
                arr.push(myIcons[i].font_class);
                allCode[myIcons[i].unicode] = arr;
            }
            let errorList = {}
            for (let key in elementIcons) {
                let arr = allCode[elementIcons[key]];
                if (arr == null) {
                    arr = [];
                }
                arr.push(key);
                allCode[elementIcons[key]] = arr;
            }
            for (let key in allCode) {
                if (allCode[key] != null && allCode[key].length > 1) {
                    errorObj[key] = allCode[key];
                }
            }
            return errorObj;
        },
        getIconCode(value) {
            return `<i class="el-icon-${value}" />`
        },
        getIconClass(value) {
            return `el-icon-${value}`
        },
        copyIconCode(value, event) {
            clipboard(this.getIconCode(value), event)
        },
        copyIconClass(value) {
            clipboard(this.getIconClass(value), event)
        },
        getIconImg(name) {
            return "/frame/images/icon/" + name;
        },
        copyIconImg(value, event) {
            clipboard("/frame/images/icon/" + value, event)
        },
        copyIconImgName(value, event) {
            clipboard(value, event)
        },
        initUnGroup(){
            // 已分组
            let addedArr = [];
            for (let i = 0; i < this.iconGroup.length; i++) {
                let icons = this.iconGroup[i].icons;
                for (let j = 0; j < icons.length; j++) {
                    addedArr.push(icons[j]);
                }
            }

            let unAddedArr = [];
            // element自带
            for (let i = 0; i < this.eleIcons.length; i++) {
                let item = this.eleIcons[i];
                if (addedArr.indexOf(item) < 0){
                    unAddedArr.push(item);
                }
            }

            // 自定义
            for (let i = 0; i < this.myIcons.length; i++) {
                let name = this.myIcons[i].font_class;
                if (addedArr.indexOf(name) < 0){
                    unAddedArr.push(name);
                }
            }
            if (unAddedArr.length > 0) {
                let unGroup = {
                    name: "未分组",
                    icons: unAddedArr
                };
                iconGroup.unshift(unGroup);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.icons-container {
    padding: 0;
}

.icon-ctn {
    margin: 15px;
    width: 130px;
    float: left;
}

.icon-img-ctn {
    margin: 15px;
    width: 60px;
    height: 80px;
    float: left;
}

.icon-img-ctn-img {
    cursor: pointer;
}

.icon-item-ctn {
    text-align: center;
}

.icon-item {
    color: #24292e;
    font-size: 30px;
    cursor: pointer;
}

.icon-item:hover {
    color: #1890FF;
}

.icon-text-ctn {
    width: 100%;
    height: 36px;
    text-align: center;
}

.icon-text {
    text-align: center;
    font-size: 12px;
    color: #24292e;
    cursor: pointer;
}

.icon-text:hover {
    color: #1890FF;
}

.icons-container .el-divider--horizontal {
    float: left;
}
</style>
