<template>
  <ul class="nav nav-tabs m-row">
    <li
      role="presentation"
      :class="{ active: currentTab === 'waiting' }"
      @click="isWaiting"
    >
      <a>待验收</a>
      <span :class="{ jt: true, active: currentTab === 'waiting' }" />
    </li>
    <li
      role="presentation"
      :class="{ active: currentTab === 'running' }"
      @click="isRunning"
    >
      <a>验收中</a>
      <span :class="{ jt: true, active: currentTab === 'running' }" />
    </li>
    <li
      role="presentation"
      :class="{ active: currentTab === 'finish' }"
      @click="isFinish"
    >
      <a>验收完成</a>
      <span :class="{ jt: true, active: currentTab === 'finish' }" />
    </li>
    <li class="help-box">
      <span>使用帮助</span>
    </li>
  </ul>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

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

const currentTab = ref('waiting');
// 待验收
const isWaiting = () => {
  currentTab.value = 'waiting';
  emits('getNowTab', 'waiting');
};
// 验收中
const isRunning = () => {
  currentTab.value = 'running';
  emits('getNowTab', 'running');
};
// 验收完成
const isFinish = () => {
  currentTab.value = 'finish';
  emits('getNowTab', 'finish');
};
</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>