<!-- 
    filename: index.vue
    author: liubin
    date: 2024-04-02 09:49:36
    description: 
-->

<template>
  <!-- 按钮切换 -->
  <div v-if="buttonMode" class="button-nav">
    <button
      v-for="m in menus"
      :key="m"
      @click="currentMenu = m"
      :data-text="m"
      :class="[m === currentMenu ? 'active' : '']"
    ></button>
  </div>
  <!-- 标签切换 -->
  <div v-else class="custom-tabs" style="height: 100%; width: 100%">
    <el-tabs class="tag-nav" v-model="currentMenu" style="height: 100%">
      <el-tab-pane
        v-for="(m, idx) in menus"
        :key="m"
        :label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
        :name="m"
      >
        <slot :name="`tab${idx + 1}`"></slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "ButtonNav",
  props: {
    menus: {
      type: Array,
      required: true,
      default: () => [],
      validator: (val) => {
        return val.length > 0;
      },
    },
    buttonMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentMenu: "",
    };
  },
  created() {
    this.currentMenu = this.menus[0];
  },
  watch: {
    currentMenu(val) {
      this.$emit("change", val);
    },
  },
};
</script>

<style scoped lang="scss">
.button-nav {
  width: 100%;
  padding: 12px 0;
  display: flex;
  gap: 12px;

  * {
    user-select: none;
  }

  button {
    cursor: pointer;
    appearance: none;
    outline: none;
    border: none;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    color: #888;
    letter-spacing: 2px;
    flex: 1;
    box-sizing: padding-box;
    position: relative;

    &::after {
      content: attr(data-text);
      position: absolute;
      top: 10px;
      left: 50%;
      font-size: 18px;
      font-weight: 500;
      transform: translate(-50%);
    }

    &.active {
      color: #111;
      border-bottom: 4px solid #0b58ff;
    }
  }
}
</style>

<style scoped>
.custom-tabs >>> .el-tabs__header {
  margin-bottom: 8px;
  display: inline-block;
  /* transform: translateY(-12px); */
}
.custom-tabs >>> .el-tabs__item {
  padding-left: 0px !important;
  padding-right: 0px !important;
  line-height: 36px !important;
  height: 36px;
}

.custom-tabs >>> .el-tabs__content {
  height: calc(100% - 42px);
}
.custom-tabs >>> .el-tab-pane {
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  border: 10px solid #f002;
}
</style>
