<!-- @author zhengjie -->
<template>
  <div class="icon-list">
    <span
      v-for="(item, index) in iconList"
      :key="index"
      class="icon-item"
      @click="selectedIcon(item)"
    >
      <svg-icon :icon-class="item" style="width: 24px; height: 36px" />
    </span>
  </div>
</template>

<script>
import icons from "./requireIcons";

export default {
  name: "IconSelect",
  props: {
    type: {
      type: String,
      default: "pc", // 目前只支持 pc 和 mobile 的菜单图标
    },
  },
  data() {
    return {
      name: "",
    };
  },
  computed: {
    iconList() {
      if (this.type === "mobile") {
        return icons.mobileIcons;
      }
      return icons.pcIcons;
    },
  },
  watch: {
    type() {
      this.$forceUpdate();
    },
  },
  methods: {
    filterIcons() {
      if (this.name) {
        this.iconList = this.iconList.filter((item) =>
          item.includes(this.name)
        );
      } else {
        this.iconList = icons;
      }
    },
    selectedIcon(name) {
      this.$emit("selected", name);
      this.$emit("fatherMethod");
      document.body.click();
    },
    reset() {
      this.name = "";
      this.iconList = icons;
    },
  },
};
</script>

<style lang="less" scoped>
.icon-list {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  .icon-item {
    display: inline-block;
    width: 48px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
