<template>
  <el-tabs :class="['de-tabs', ...tabClassName]" :style="tabStyle" v-bind="$attrs">
    <slot></slot>
  </el-tabs>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  hideTitle: Boolean,
  /* 颜色可以单词，如red；也可以是颜色值 */
  // 字体颜色
  fontColor: String,
  // 激活字体颜色
  activeColor: String,
  // 边框颜色 如果是none就无边框 如果是none Card类型激活的下滑线也消失
  borderColor: String,
  // 激活边框颜色 目前只针对card类型
  borderActiveColor: String,
  // 样式类型  radioGroup只在Card类型有效, 同时必须给borderColor borderActiveColor
  styleType: {
    type: String,
    default: '',
    validator: (val: string) => ['', 'radioGroup'].includes(val)
  }
})

const tabStyle = computed(() => [
  { '--de-font-color': props.fontColor },
  { '--de-active-color': props.activeColor },
  { '--de-border-color': props.borderColor },
  { '--de-border-active-color': props.borderActiveColor }
])
const tabClassName = computed(() =>
  props.styleType
    ? [props.styleType, props.fontColor && 'fontColor', props.activeColor && 'activeColor']
    : [
        props.fontColor && 'fontColor',
        props.activeColor && 'activeColor',
        noBorder.value ? 'noBorder' : props.borderColor && 'borderColor',
        props.borderActiveColor && 'borderActiveColor',
        props.hideTitle && 'no-header'
      ]
)

const noBorder = computed(() => props.borderColor === 'none')
</script>

<style lang="less">
.de-tabs {
  height: 100%;
  &.no-header {
    .ed-tabs__header {
      display: none;
    }
  }
  &.ed-tabs--card {
    > .ed-tabs__header {
      height: auto !important;
    }
  }
  &.fontColor {
    .ed-tabs__item {
      color: var(--de-font-color);

      &.is-active {
        color: var(--el-color-primary);
      }

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  &.activeColor {
    .ed-tabs__item {
      &.is-active {
        color: var(--de-active-color);
      }

      &:hover {
        color: var(--de-active-color);
      }
    }

    .ed-tabs__active-bar {
      height: 0px;
      background-color: var(--de-active-color);
    }
  }

  // card样式的边框
  &.noBorder.ed-tabs--card {
    > .ed-tabs__header {
      border-bottom: none;

      .ed-tabs__nav {
        border: none;
      }

      .ed-tabs__item {
        border-left: none;
      }

      .ed-tabs__item.is-active {
        border-bottom: none;
      }
    }
  }

  &.borderActiveColor.ed-tabs--card {
    > .ed-tabs__header .ed-tabs__item.is-active {
      border-bottom-color: var(--de-border-active-color);
    }
  }

  &.borderColor.ed-tabs--card {
    > .ed-tabs__header {
      border-bottom-color: var(--de-border-color);

      .ed-tabs__nav {
        border-color: var(--de-border-color);
      }

      .ed-tabs__item {
        border-left-color: var(--de-border-color);
      }
    }

    .ed-tabs__item {
      &.is-active {
        color: var(--de-active-color);
      }

      &:hover {
        color: var(--de-active-color);
      }
    }

    .ed-tabs__active-bar {
      height: 0px;
      background-color: var(--de-active-color);
    }
  }

  // 简洁样式的边框
  &.noBorder {
    .ed-tabs__nav-wrap::after {
      background: none;
    }
  }

  &.borderColor {
    .ed-tabs__nav-wrap::after {
      background: var(--de-border-color);
    }
  }

  // radioGroup 类型
  &.radioGroup.ed-tabs--card {
    > .ed-tabs__header {
      border-bottom: none;

      .ed-tabs__nav {
        border: none;
      }

      .ed-tabs__item {
        border: 1px solid var(--de-border-color);
        border-right: 0;

        &:first-child {
          border-left: 1px solid var(--de-border-color);
          border-radius: 6px 0 0 4px;
        }

        &:last-child {
          border-right: 1px solid var(--de-border-color);
          border-radius: 0 4px 4px 0;
        }

        &.is-active {
          border: 1px solid var(--de-border-active-color);

          & + .ed-tabs__item {
            border-left: 0;
          }
        }
      }
    }
  }
}
</style>