<template>
  <div class="app-container">
    <el-form  ref="queryForm" size="small" :inline="true">
      <el-form-item label="图标名称" prop="menuName">
        <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="getIcons">
          <i slot="suffix" class="el-icon-search el-input__icon" />
        </el-input>
      </el-form-item>
    </el-form>
    <el-table
      :data="iconList.map(item => ({value: item}))"
      row-key="menuId"
    >
      <el-table-column type="index"  :show-overflow-tooltip="true" width="220" align="center" ></el-table-column>
      <el-table-column prop="value" label="菜单名称" :show-overflow-tooltip="true" align="center"  width="240"></el-table-column>
      <el-table-column prop="value" label="图标" align="center" width="240">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.value" />
        </template>
      </el-table-column>

    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getIcons"
    />
  </div>
</template>

<script>
import icons from "@/components/IconSelect/requireIcons"

// import icons from './'
export default {
  name: 'IconSelect',
  props: {
    activeIcon: {
      type: String
    }
  },
  data() {
    return {
      name: '',
      iconList: icons,
      page:1,
      pageSize:10,
      total: icons.length
    }
  },
  created() {
    this.getIcons();
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name));
      }
      this.page = 1;
      this.total = this.iconList.length;
      const start = (this.page - 1) * this.pageSize;
      this.iconList = this.iconList.slice(start, start + this.pageSize)
      return this.iconList;
    },
    getIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name));
      }
      this.total = this.iconList.length;
      const start = (this.page - 1) * this.pageSize;
      this.iconList = this.iconList.slice(start, start + this.pageSize)
      return this.iconList;
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}

</script>

