<template>
  <el-dialog
    title="选择图标"
    top="10px"
    append-to-body
    class="topMenuDialog clusterDialog"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <el-scrollbar style="height:80vh;">
      <el-row>
        <el-col :span="24">
          <ul class="icon-list">
            <li v-for="(item, index) in rows.glyphs" :key="index" @click="hover(item)">
              <span>
                <i class="iconfont" :class="'icon-'+item.font_class"></i>
                <span class="icon-name">{{item.name}}</span>
              </span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import configApi from "@/api/modules/basicData/config";
export default {
  data() {
    return {
      rows: {},
      dialogVisible: false
    };
  },
  created() {
    configApi
      .GetSite(4)
      .then(result => {
        this.rows = JSON.parse(result);
      })
      .catch(err => {
        this.$message.error(err);
      });
  },
  methods: {
    hover(row) {
      console.log("font_class", row.font_class);
      this.$emit("getValue", row.font_class);
      this.dialogVisible = false;
    },
    save() {}
  }
};
</script>

<style lang="scss" scoped>
.icon-list li:hover i,
.icon-list li:hover span {
  color: #5cb6ff;
}
.icon-list li:hover {
  background: #dcdfe6;
  cursor: pointer;
}
.icon-list > ul:not(.timeline) {
  margin: 10px 0;
  padding: 0 0 0 20px;
  font-size: 14px;
  color: #5e6d82;
  line-height: 2em;
}
.icon-list li {
  float: left;
  width: 16.66%;
  text-align: center;
  height: 120px;
  line-height: 120px;
  color: #666;
  font-size: 13px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-right: -1px;
  margin-bottom: -1px;
}
.icon-list li span {
  line-height: normal;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  color: #99a9bf;
  transition: color 0.15s linear;
  font-size: 16px;
}
.icon-list li:after,
.icon-list li span {
  display: inline-block;
  vertical-align: middle;
}
.icon-list li i {
  display: block;
  font-size: 32px;
  margin-bottom: 15px;
  color: #606266;
  transition: color 0.15s linear;
}
.icon-list li span {
  line-height: normal;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  color: #99a9bf;
  transition: color 0.15s linear;
}
</style>