<template>
  <el-card
    class="es-card"
    :class="{ 'es-card-border-none': !border }"
    v-bind="$attrs"
  >
    <template slot="header">
      <div class="es-card-header" :class="modeClass">
        <slot name="header">
          <template v-if="header">
            <template v-if="isObject">
              <es-icon
                v-if="header.icon"
                class="es-header-icon"
                :contents="header.icon"
              ></es-icon>
              <span v-if="header.text" class="es-header-text">{{
                header.text
              }}</span>
              <es-icon
                v-if="header.icons"
                class="es-header-icons"
                :contents="header.icons"
              ></es-icon>
              <el-menu
                v-if="header.tabs"
                slot="suffix"
                class="es-card-menu"
                mode="horizontal"
                :default-active="active"
                @select="handleSelect"
              >
                <template v-for="(item, index) in tabs">
                  <el-menu-item
                    v-if="typeof item === 'string'"
                    :key="index"
                    :index="String(index)"
                  >
                    {{ item }}
                  </el-menu-item>
                  <el-menu-item
                    v-else
                    :key="index"
                    :index="item.id ? item.id : String(index)"
                  >
                    <el-badge
                      :value="item.tips"
                      :max="max"
                      :is-dot="isDot"
                      :hidden="!item.tips || item.tips == '0'"
                    >
                      {{ item.name || item.label }}
                    </el-badge>
                  </el-menu-item>
                </template>
              </el-menu>
            </template>
            <span v-else class="es-header-text">{{ header }}</span>
          </template>
          <template>
            <el-menu
              v-if="tabs"
              slot="suffix"
              class="es-card-menu"
              mode="horizontal"
              :default-active="active"
              @select="handleSelect"
            >
              <template v-for="(item, index) in tabs">
                <el-menu-item
                  v-if="typeof item === 'string'"
                  :key="index"
                  :index="String(index)"
                >
                  {{ item }}
                </el-menu-item>
                <el-menu-item
                  v-else
                  :key="index"
                  :index="item.id ? item.id : String(index)"
                >
                  <el-badge
                    :value="item.tips"
                    :max="max"
                    :is-dot="isDot"
                    :hidden="!item.tips || item.tips == '0'"
                  >
                    {{ item.name || item.label }}
                  </el-badge>
                </el-menu-item>
              </template>
            </el-menu>
          </template>
          <slot name="suffix"></slot>
        </slot>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>
<script>
export default {
  name: 'EsCard',
  inheritAttrs: false,
  props: {
    show: {
      type: Boolean,
      default: true
    },
    mode: {
      type: String,
      default: 'bar'
    },
    border: {
      type: Boolean,
      default: true
    },
    header: [String, Object],
    tabs: Array,
    defaultActive: String,
    max: {
      type: Number,
      default: 99
    },
    isDot: Boolean
  },
  computed: {
    isObject() {
      return typeof this.header !== 'string';
    },
    active: {
      get() {
        if (this.defaultActive === undefined) {
          if (typeof this.tabs[0] === 'string') {
            return '0';
          } else {
            return this.tabs[0].id ? this.tabs[0].id : '0';
          }
        }
        return this.defaultActive;
      }
    },
    modeClass() {
      return this.show ? `es-card-ornament-${this.mode}` : '';
    }
  },
  data() {
    return {};
  },
  methods: {
    handleSelect(res, path) {
      this.$emit('select', res, path);
    }
  }
};
</script>
