<template>
  <div class="abnormal-check h-full overflow-auto">
    <div class="page-action">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="['page-tab', { 'is-active': curTab === item.value }]"
        @click="switchTab(item)"
        >{{ item.label }}</div
      >
    </div>

    <component :is="tabComp"></component>
  </div>
</template>

<script setup name="AbnormalCheck">
import { computed, ref } from 'vue';
import WaitCheck from './wait-check';
import DoneCheck from './done-check';

const tabs = [
  {
    label: '待审核',
    value: 'wait',
  },
  {
    label: '已审核',
    value: 'done',
  },
];

const tabComps = {
  wait: WaitCheck,
  done: DoneCheck,
};
let curTab = ref('');
const tabComp = computed(() => {
  return tabComps[curTab.value];
});

const switchTab = (tab) => {
  curTab.value = tab.value;
};

switchTab(tabs[0]);
</script>
