<template>
  <ul class="nav nav-tabs m-row">
    <li
      v-for="(item, index) in tabProps"
      :key="index"
      role="presentation"
      :class="{ active: currentTabIndex === index }"
      @click="changeTab(index, item)"
    >
      <a>{{ item.groupName }}</a>
      <span :class="{ jt: true, active: currentTabIndex === index }" />
    </li>
    <li class="help-box">
      <span>使用帮助</span>
    </li>
    <li class="help-box">
      <slot />
    </li>
  </ul>
</template>

<script setup>
import { ref, defineEmits, defineProps, watch } from 'vue';
import { useRoute } from 'vue-router';
const router = useRoute();
const props = defineProps({
  tabProps: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(['getNowTab']);

const currentTabIndex = ref(0);
watch(
  () => router.fullPath,
  (newPath, oldPath) => {
    if (newPath !== oldPath) {
      currentTabIndex.value = 0;
    }
  },
);

const changeTab = (index, record) => {
  currentTabIndex.value = index;
  emits('getNowTab', record.groupName);
};
</script>

<style scoped>
.nav-tabs > li {
  width: 74px;
  cursor: pointer;
}
.m-row {
  margin-bottom: 0;
}
.nav > li > a {
  padding: 6px 4px;
  text-align: center;
}
.nav-tabs > li > a {
  color: black;
}
.nav-tabs > li.active > a {
  color: #fff;
  border: 1px solid #ddd;
  background-color: #2681cf;
  border-radius: 4px;
  border-bottom: none;
}
.help-box {
  float: right;
  display: flex;
  align-items: center;
  width: 90px;
  color: #277fd0;
  margin-top: 5px;
}
.jt {
  position: absolute;
  top: 33px;
  left: 27px;
  border: 8px solid transparent;
}
.jt.active {
  border-top-color: #277fd0;
}
</style>