<template>
  <div v-show="showTab" class="bg-tab">
    <div v-if="!isTabs" class="tab-title">
      <h3>{{ label }}</h3>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue";

const getActiveName = inject(
  "activeName",
  ()=>{
    return "";
  },
  false
);
const getIsTabs = inject(
  "isTabs",
  false
);

const props = defineProps({
  label: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
});

const activeName = computed(() => {
  return getActiveName();
});
const isTabs = computed(() => {
  return getIsTabs;
});
const showTab = computed(() => {
  if (isTabs.value) {
    if (activeName.value === props.name) {
      return true;
    } else {
      return false;
    }
  } else {
    return true;
  }
});
</script>
