<template>
  <el-popover placement="bottom-start" trigger="click" width="100%">
    <div class="content">
      <div v-for="(v, i) in iconJson" :key="i">
        <div
          :class="['item', { active: v === value }]"
          @click="handleChange(v)"
        >
          <i :class="v"></i>
          <span>{{ v }}</span>
        </div>
      </div>
    </div>
    <el-input
      slot="reference"
      v-bind="$attrs"
      v-on="$listeners"
      :value="value"
      :placeholder="placeholder"
      clearable
    >
      <i v-if="value" slot="prefix" :class="value" />
      <i v-else slot="prefix" class="el-icon-search" />
    </el-input>
  </el-popover>
</template>

<script>
import iconJson from "./icon.json";
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "点击选择图标",
    },
  },
  data() {
    return {
      iconJson,
    };
  },
  methods: {
    handleChange(v) {
      this.$emit("change", v);
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  max-height: 300px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: auto;
  gap: 8px 16px;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    overflow-y: auto;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(144, 147, 153, 0.5);
  }

  &::-webkit-scrollbar-track {
    border-radius: 6px;
    background: rbga(0, 0, 0, 0);
  }
  .active {
    color: var(--primary);
  }
  .item {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
  }
}
</style>
