<template>
  <div class="anquantr-container">
    <div class="tab-container tab-container-scope">
      <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
        <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabs" :key="i" />
      </el-tabs>
    </div>
  </div>
  <div>
    <component :is="currentCom" :isOpen="false" :id="activeTab" :title="title" />
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const currentCom = ref(null);
const activeTab = ref('2')
const tabs = [
  {
    label: "车辆月检统计",
    value: "2"
  },
  {
    label: "车辆月检总览",
    value: "1"
  },
]

const title = ref('统计分析')
const onTabClick = (tab, initVal) => {
  let tabName = tab?.props?.name || initVal;
  switch (tabName) {
    case "1": // 车辆月检总览
      currentCom.value = defineAsyncComponent(() => import("@/views/yxkzgl/jtaq/cl/clyz/index.vue"));
      break;
    case "2": // 车辆月检统计
      currentCom.value = defineAsyncComponent(() => import("./components/carStatistics.vue"));
      break;
    default:
      break;
  }
  title.value = tabs.find((item) => item.value === tabName)?.label;
};

onMounted(() => {
  // const { query } = route;
  // console.log(query);

  // if (query?.tab) {
  //   activeTab.value = query.tab;
  // }
  onTabClick({}, activeTab.value)
});
</script>

<style lang="scss" scoped>
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss"; // 里面有 tab-container 样式

.anquantr-container {
  background-color: #fff;

  .tab-container-scope {
    border-bottom: 1px solid #ebeef5;
  }
}
</style>
