<!--图标选择-->
<template>
  <div class="mainPanel">
    <div class="toolPanel">
      <div class="queryCriteria">
        <el-form inline>
          <el-form-item :label="$t('base.keywords')" style="padding-left: 10px;">
            <el-input
              style="width: 300px;"
              v-bind:placeholder="$t('hint.pleaseInputKeywords')"
              v-model="keywords"
              @keyup.enter.native="searchButtonClick"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <main class="contentPanel" style="padding-top: 15px;">
      <div class="icons-item" v-for="(item, index) in curIconList" :key="index">
        <div
          class="itemClass"
          style="text-align: center"
          :data-clipboard-text="formatIcon(item)"
          @click="toast($t('message.clipSuccess'))"
        >
          <i :class="formatIcon(item)" />
          <p>
            {{ item }}
          </p>
        </div>
      </div>
    </main>
    <div class="footerPanel"></div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
  name: 'IconPicker',
  props: ['model'],
  data() {
    return {
      fullIconList: [],
      curIconList: [],
      searchLoading: false,
      keywords: '',
      page: 0,
      size: 20,
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
        keywords: '',
        pageSizeOpts: [10, 20, 50, 100, 200],
      },
    }
  },
  mounted() {
    const clipboard = new Clipboard('.itemClass')
    this.scanIcon()
  },
  methods: {
    scanIcon() {
      let styleSheets = document.styleSheets
      for (var ss of styleSheets) {
        let cssList = ss.cssRules
        for (var item of cssList) {
          if (item.selectorText) {
            let idx = item.selectorText.indexOf('-icon-')
            if (idx >= 0 && idx < 5) {
              // 如果是以这个前缀开关的，则认为是图标文件
              let cssArray = item.selectorText.split('::')
              if (cssArray.length === 2 && this.fullIconList.indexOf(cssArray[0]) === -1) {
                this.fullIconList.push(cssArray[0].substr(1))
              }
            }
          }
        }
      }

      this.curIconList = this.fullIconList
    },
    searchButtonClick() {
      this.curIconList = []
      let key = this.keywords.split(' ')
      let kk = key.length === 2 ? key[1] : key[0]

      this.curIconList = []
      for (var item of this.fullIconList) {
        if (item.indexOf(kk) !== -1) {
          this.curIconList.push(item)
        }
      }
    },
    toast(message) {
      this.$message.info({
        message: message,
      })
    },
    formatIcon(icon) {
      if (icon.indexOf('bs-icon-') === 0) {
        return 'bsfont ' + icon
      }

      if (icon.indexOf('iconfont') != -1) {
        return 'iconfont ' + icon
      }

      return icon
    },
  },
  watch: {
    keywords: 'searchButtonClick',
  },
}
</script>

<style scoped>
@import '../../src/styles/css/main-list.css';

.icons {
  overflow: hidden;
  zoom: 1;
}

.icons-item {
  width: 140px;
  height: 100px;
  float: left;
  text-align: center;
  list-style: none;
  cursor: pointer;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
}

.icons-item i {
  margin: 10px 5px 0px 5px;
  font-size: 32pt;
  color: #409eff;
}

.icons-item p {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 5px;
  word-wrap: break-word;
  /* word-break: break-all; */
  overflow: hidden;
  font-size: 10pt;
}
</style>
