<template>
  <div v-if="items.length" class="x-admin-icon-button-bar">
    <ElDivider direction="vertical"></ElDivider>
    <SkinDropdown v-if="skin" :items="skin" :default-theme="defaultTheme"></SkinDropdown>
    <SizeDropdown v-if="sizes" :items="sizes" :default-size="defaultSize"></SizeDropdown>
    <Badge v-for="item in items"
           :key="item.name"
           v-bind="badgeConfig"
           :hidden="!item.badge"
           :value="item.badge">
      <slot :name="item.name">
        <XIcon class="x-admin-icon-button"
               v-bind="iconProps(item.icon)"
               :size="12"
               @click="handleClick(item)"></XIcon>
      </slot>
    </Badge>

    <ElDivider direction="vertical"></ElDivider>
  </div>
</template>

<script>
import { Divider as ElDivider, Badge } from 'element-ui';
import { XIcon } from '@newpearl/ui';
import SkinDropdown from './SkinDropdown';
import SizeDropdown from './SizeDropdown';

export default {
  inject: ['$admin'],
  components: {
    ElDivider,
    Badge,
    XIcon,
    SkinDropdown,
    SizeDropdown
  },
  props: {
    skin: {
      type: [Boolean, Array]
    },
    defaultTheme: String,
    sizes: {
      type: [Boolean, Array]
    },
    defaultSize: String,
    // [{icon,name,badge}]
    items: {
      type: Array,
      default() {
        return [];
      }
    },
    badgeConfig: {
      type: Object,
      default() {
        return {
          max: 99
        };
      }
    }
  },
  methods: {
    iconProps(icon) {
      return typeof icon === 'string' ? { name: icon } : { icon };
    },
    handleClick(item) {
      this.$emit('click', item);
      this.$admin.$emit('tool-click', item);
    }
  }
};
</script>
