<template>
  <div class="ele-body">
    <el-alert :title="tipTitle" type="info" show-icon class="ele-alert-border" :closable="false"/>
    <el-card shadow="never" body-style="position:relative;padding:0;" style="margin-top:15px;">
      <div class="demo-icon-search">
        <el-input v-model="keywords" placeholder="输入关键词搜索..." size="small"/>
      </div>
      <el-tabs v-model="active" class="demo-icon-tabs">
        <el-tab-pane v-for="(item,index) in result" :key="index" :label="item.title" :name="item.title">
          <el-row class="demo-icon">
            <el-col :md="4" :sm="6" :xs="8" v-for="(d,i) in item.icons" :key="i" class="demo-icon-item"
                    v-clipboard:copy="d" v-clipboard:success="onCopy" v-clipboard:error="onError">
              <div class="demo-icon-content"><i :class="d"></i></div>
              <div class="demo-icon-text ele-text-secondary">{{ d }}</div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="图标选择器" name="icon-picker">
          <div class="ele-cell demo-icon-picker-item" style="margin-top:20px;">
            <div>默认样式一：</div>
            <div class="ele-cell-content">
              <ele-icon-picker v-model="menuIcon" placeholder="请选择菜单图标"/>
            </div>
          </div>
          <div class="ele-cell demo-icon-picker-item">
            <div>默认样式二：</div>
            <div class="ele-cell-content">
              <ele-icon-picker v-model="menuIcon" theme="style2" :readonly="false"/>
            </div>
          </div>
          <div class="ele-cell demo-icon-picker-item">
            <div>默认样式三：</div>
            <div class="ele-cell-content">
              <ele-icon-picker v-model="menuIcon" theme="style3"/>
            </div>
          </div>
          <div class="ele-cell demo-icon-picker-item">除了默认的三种样式，你还可以通过插槽自定义样式</div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import icons from '@/components/EleIconPicker/icon-data'

export default {
  name: "DemoIcon",
  data() {
    return {
      data: icons,                      // 图标数据
      keywords: '',                     // 搜索关键字
      menuIcon: 'el-icon-_heart-solid'  // 图标选择器选择图标
    }
  },
  computed: {
    /* 搜索后的结果 */
    result() {
      if (!this.keywords) return this.data;
      let result = [];
      this.data.forEach(item => {
        result.push({title: item.title, icons: item.icons.filter(d => d.indexOf(this.keywords) !== -1)});
      });
      return result;
    },
    /* 标签页选中位置 */
    active: {
      get() {
        if (!this.result || this.result.length === 0) return null;
        for (let i = 0; i < this.result.length; i++)
          if (this.result[i].icons.length !== 0) return this.result[i].title;
        return null;
      },
      set() {
      }
    },
    /* 计算总个数 */
    total() {
      let num = {el: 0, ele: 0};
      this.data.forEach(item => {
        item.icons.forEach(d => {
          if (d.indexOf('el-icon-_') === 0) {
            num.ele++;
          } else {
            num.el++;
          }
        });
      });
      num.all = num.el + num.ele;
      return num;
    },
    /* 提示文本 */
    tipTitle() {
      return `新增 ${this.total.ele} 个图标 + Element UI ${this.total.el} 个图标, 共计 ${this.total.all} 个图标`;
    }
  },
  methods: {
    /* 复制图标 */
    onCopy() {
      this.$message({type: 'success', message: '复制成功'});
    },
    onError() {
      this.$message.error('复制失败');
    }
  }
}
</script>

<style scoped>
/* 搜索框 */
.demo-icon-search {
  width: 180px;
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 1;
}

/* 选项卡 */
.demo-icon-tabs >>> .el-tabs__nav-scroll {
  padding: 0 20px;
}

.demo-icon-tabs >>> .el-tabs__item {
  height: 45px;
  line-height: 45px;
}

/* 图标 */
.demo-icon {
  margin: 15px;
  border-top: 1px solid hsla(0, 0%, 60%, .15);
  border-left: 1px solid hsla(0, 0%, 60%, .15);
}

.demo-icon-item {
  text-align: center;
  padding: 25px 0 25px 0;
  border-right: 1px solid hsla(0, 0%, 60%, .15);
  border-bottom: 1px solid hsla(0, 0%, 60%, .15);
  transition: color .2s, background-color .2s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.demo-icon-content {
  font-size: 38px;
}

.demo-icon-text {
  font-size: 13px;
  margin-top: 8px;
  padding: 0 5px;
  transition: color .2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.demo-icon-item:after {
  content: "点击复制";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  color: #FFF;
  padding: 4px 0;
  font-size: 12px;
  background-color: #409EFF;
  transition: bottom .2s;
}

.demo-icon-item:hover:after {
  bottom: 0;
}

/* 图标选择器演示 */
.demo-icon-picker-item {
  max-width: 400px;
  padding: 0 20px 20px;
}

/* 自适应 */
@media screen and (max-width: 660px) {
  .demo-icon-search {
    width: auto;
    margin: 10px 10px 0;
    position: static;
  }
}
</style>