<template>
  <a-drawer :visible="visible" @close="onClose" class="yo-icon-selector" title="选择图标" width="600">
    <a-tabs tab-position="left" v-model="active">
      <a-tab-pane :key="iconGroup.key" :tab="iconGroup.title" v-for="iconGroup in icons">
        <a-card>
          <a-card-grid
            :class="{ 'yo-icon--selected': selected == icon }"
            :key="icon"
            @click="onSelectIcon(icon)"
            v-for="icon in iconGroup.icons"
          >
            <a-icon :style="{ fontSize: '36px' }" :type="icon" />
            <span>{{ icon }}</span>
          </a-card-grid>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>
<script>
import icons from './icons';

export default {
  model: {
    prop: 'selected',
    event: 'select',
  },
  props: {
    selected: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,

      icons,

      active: icons[0].key,
    };
  },

  methods: {
    onOpen() {
      this.visible = true;
      if (this.selected) {
        this.active = (icons.find((p) => p.icons.indexOf(this.selected) > -1) || icons[0]).key;
      } else {
        this.active = icons[0].key;
      }
    },

    onClose() {
      this.visible = false;
    },

    onSelectIcon(icon) {
      this.$emit('select', icon);
      this.onClose();
    },
  },
};
</script>