<template>
  <div class="demo-icon">
    <h3 class="demo-icon-title">
      内置图标列表<span>（bx-icon bx-icon-xxx）</span>
    </h3>
    <ul class="demo-icon-list claerfix">
      <li
        class="demo-icon-item"
        v-for="(icon,index) in icons"
        :key="index"
        @click="copyToClipboard(icon)"
        >
        <bxs-icon :name="icon" />
        <div class="bx-icon-name">
          {{ icon }}
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      icons: [
        'contact',
        'scan',
        'edit',
        'notify',
        'calendar',
        'menu',
        'image-plain',
        'image-solid',
        'warning-solid',
        'warning-plain',
        'delete',
        'help',
        'search',
        'refresh',
        'reduce',
        'reduce-plain',
        'reduce-solid',
        'more',
        'next',
        'close',
        'close-solid',
        'close-plain',
        'circle',
        'circle-dot',
        'check',
        'check-solid',
        'check-plain',
        'arrow-left',
        'arrow-up',
        'arrow-right',
        'arrow-down',
        'add',
        'add-plain',
        'star',
        'star-solid',
        'clock',
      ],
    }
  },
  methods: {
    copyToClipboard(icon) {
      const text = `<bxs-icon name="${icon}"></bxs-icon>`
      if (window.clipboardData && window.clipboardData.setData) {
        this.$toast(`复制 ${icon} 成功`)
        window.clipboardData.setData('Text', text)
      } else if (
        document.queryCommandSupported &&
        document.queryCommandSupported('copy')
      ) {
        const textarea = document.createElement('textarea')
        textarea.textContent = text
        textarea.style.position = 'fixed'
        document.body.appendChild(textarea)
        textarea.select()
        try {
          document.execCommand('copy')
        } catch (ex) {
          this.$toast(`复制 ${icon} 失败`)
        } finally {
          document.body.removeChild(textarea)
          this.$toast(`复制 ${icon} 成功`)
        }
      }
    },
  },
}
</script>
<style lang="postcss">
.claerfix {
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}
.demo-icon {
  padding: 15px 15px;
  font-size: 14px;
  background-color: #fff;
  & .demo-icon-title {
    & span {
      font-size: 12px;
      font-weight: normal;
    }
  }
  & .demo-icon-list {
    margin-top: 20px;
    & .demo-icon-item {
      float: left;
      width: 33%;
      min-height: 80px;
      margin-top: 15px;
      text-align: center;
      & .bx-icon {
        display: inline-block;
        font-size: 18px;
      }
      & .bx-icon-name {
        margin-top: 10px;
        padding: 0 2px;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
</style>
