<template>
  <div class="icons-container">
    <p>{{ $t('ec.icon.example') }}：SVG：<strong style="margin-right: 30px"> &lt;svg-icon icon-class="{className}" /&gt;</strong>
      {{ $t('ec.icon.others') }}： <strong style="margin-right: 30px"> &lt;i class="{className}" /&gt;</strong> &nbsp;&nbsp;&nbsp; className: {{ $t('ec.icon.copyValue') }}</p>
    <el-tabs type="border-card">
      <el-tab-pane v-for="(item, index) in icons" :key="index" :label="item.title">
        <p v-if="item.svg"><strong> &lt;svg-icon icon-class="{iconName}" /&gt;</strong> &nbsp;&nbsp;&nbsp; iconName:
          {{ $t('ec.icon.iconName') }}
        </p>
        <p v-else><strong> &lt;i class="{{ item.prefix }}{iconName}" /&gt;</strong> &nbsp;&nbsp;&nbsp; iconName:
          {{ $t('ec.icon.iconName') }}
        </p>
        <div class="grid">
          <div
            v-for="(iconSymbol, idx) of showIconMap[item.name]"
            :key="idx"
            @click="handleClipboard(`${item.prefix}${iconSymbol}`, $event)"
          >
            <el-tooltip placement="top">
              <div slot="content">
                <template v-if="item.svg">
                  {{ `&lt;svg-icon icon-class="${item.prefix}${iconSymbol}" /&gt;` }}
                </template>
                <template v-else>
                  {{ `&lt;i class="${item.prefix}${iconSymbol}" /&gt;` }}
                </template>
              </div>
              <div class="icon-item">
                <svg-icon v-if="item.svg" :icon-class="iconSymbol" class-name="disabled" />
                <i v-else :class="item.prefix + iconSymbol" />
                <span>{{ iconSymbol }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import clipboard from 'ecip-web/utils/clipboard'
import svgIcons from './svg-icons'
import { icons } from '@ecip/ecip-components/dist/EcComponents.common'

export default {
  name: 'Icons',
  data() {
    return {
      icons,
      showIconMap: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.icons.forEach(item => {
        if (item.svg) {
          item.icons = svgIcons
        }
        this.showIconMap[item.name] = item.icons
      })
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    margin: 20px;
    height: 85px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

  span {
    display: block;
    font-size: 14px;
    margin-top: 10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .disabled {
    pointer-events: none;
  }
}
</style>
