<template>
  <el-dialog
    title="图标"
    :visible.sync="dialogVisible"
    width="80%"
    append-to-body
    fullscreen
    :before-close="handleClose"
  >
    <el-scrollbar class="editScroll">
      <div class="content symbol">
        <ul class="icon_lists dib-box">
          <li
            :class="{active: activeNum == index}"
            class="dib"
            v-for="(item, index) in iconList.glyphs"
            :key="index"
            @click="selectIcon(index)"
          >
            <svg class="icon svg-icon" aria-hidden="true">
              <use
                :xlink:href="`#${iconList.css_prefix_text}${item.font_class}`"
              ></use>
            </svg>
            <div class="code-name">{{ item.font_class }}</div>
          </li>
        </ul>
      </div>
    </el-scrollbar>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveIcon">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
const iconList = require('@/assets/svg/iconfont.json')
export default {
  name: 'IconPanl',
  data() {
    return {
      dialogVisible: false,
      iconList,
      activeNum: -1,
    }
  },
  mounted() {},
  methods: {
    selectIcon(index) {
      this.activeNum = index == this.activeNum ? -1 : index
    },
    saveIcon() {
      const icon =
        this.activeNum > -1
          ? this.iconList.glyphs[this.activeNum].font_class
          : ''
      this.$emit('select', icon)
      this.dialogVisible = false
    },
    handleClose() {
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  list-style: none;
  li {
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
    display: inline-block;
    vertical-align: top;
    width: 100px;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 3px;
    height: 80px;
    .name {
      display: none;
    }
    .svg-icon {
      width: 30px;
      height: 30px;
      font-size: 30px;
      padding: 10px;
      transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
    }
  }

  li:hover,
  li.active {
    border-color: #6e6e6e;
    .svg-icon {
      -webkit-transform: scale(1.5, 1.5);
      -moz-transform: scale(1.5, 1.5);
      transform: scale(1.5, 1.5);
    }
  }
}

.editScroll {
  height: calc(100vh - 54px - 62px - 60px);
}
/deep/.el-scrollbar__wrap {
  height: 100%;
  overflow-x: hidden !important;
}
// /deep/.el-dialog__body {
//   padding: 10px;
// }
</style>