<template>
  <div class="tab-card-wrapper">
    <!-- 用户使用了header插槽的，展示插槽 -->
    <div v-if="$slots.header" :class="['tab-card-title', className]">
      <slot name="header"/>
    </div>
    <div v-else :class="['tab-card-title', className]">
      <span>
        <Icon
          :type="icon"
          :color="iconColor"
          :size="iconSize"
        />
      </span>
      <router-link v-if="url" :to="url">
        <span :style="styles">{{ title }}</span>
      </router-link>
      <span v-else :style="styles">{{ title }}</span>
    </div>
    <div :class="['tab-card-content', contentClassName]">
      <slot />
    </div>
  </div>
</template>

<script>
import Icon from '../icon'
export default {
  name: 'TabCard',
  components: {
    Icon
  },
  props: {
    icon: {
      type: String,
      default: ''
    },
    iconColor: {
      type: String,
      default: '#858ba1'
    },
    iconSize: {
      type: [Number, String],
      default: '16'
    },
    title: {
      type: String,
      default: ''
    },
    titleColor: {
      type: String,
      default: '#858ba1'
    },
    titleSize: {
      type: [Number, String],
      default: '14'
    },
    url: {
      type: String,
      default: null
    },
    className: {
      type: String,
      default: ''
    },
    contentClassName: {
      type: String,
      default: ''
    },
  },
  computed: {
    styles() {
      return {
        color: this.titleColor,
        fontSize: this.titleSize.indexOf("px")>=0 ? this.titleSize : this.titleSize  + 'px',
        paddingLeft: '5px',
        fontWeight: 'bold'
      }
    }
  }
}
</script>

<style scoped>
.tab-card-title {
  height: 37px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 0 12px;
}
.tab-card-wrapper {
  border-radius: 4px;
  background-color: #fff;
  box-shadow:0 2px 12px 0 rgb(0 0 0 / 10%);
}
.tab-card-wrapper a {
  color: unset;
  text-decoration: none;
}
.tab-card-wrapper a:hover {
  text-decoration: none !important;
}
.tab-card-content {
  padding: 12px;
}
</style>
