<template>
  <div class="anquantr-container">
    <div class="tab-container tab-container-scope">
      <!-- <div>安全投入</div> -->
      <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="isOpen" :id="activeTab" :title="title" />
  </div>
</template>

<script setup>
import { ref,defineAsyncComponent, onMounted  } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const isOpen = ref(false);
const currentCom = ref(null);
const activeTab = ref('1')
const tabs = [
  {
    label: "统计分析", // 原：安全费用统计分析
    value: "1"
  },
  {
    label: "预算填报", // 原：预算填报
    value: "2"
  },
  {
    label: "费用使用", // 原：安全投入使用
    value: "3"
  },
  {
    label: "费用使用情况分析", // 原：安全费用使用情况分析
    value: "4"
  },
]
const title = ref('统计分析')
const onTabClick = (tab) => {
  const pathObj = {
    1: 'aqfytj',
    2: 'ystb',
    3: 'aqfysy',
    4: 'syqktj',
  }
  router.push({
    query: {
      tab: tab.props.name,
      path: pathObj[tab.props.name]
    }
  });

  isOpen.value = false;
  switch (tab.props.name) {
    case "1": // 统计分析
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/aqscfygl/aqfytj.vue"));
      break;
    case "2": // 预算填报
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/aqscfygl/ystb.vue"));
      break;
    case "3": // 费用使用
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/aqscfygl/aqfysy.vue"));
      break;
    case "4": // 费用使用情况分析
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/aqscfygl/syqktj.vue"));
      break;
    default:
      break;
  }
  title.value = tabs.find((item) => item.value === tab.props.name).label;
};

onMounted(() => {
  currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/aqscfygl/aqfytj.vue"));
  title.value = tabs.find((item) => item.value === activeTab.value).label;
  router.push({
    query: {
      tab: '1',
      path: 'aqfytj'
    }
  });
});
</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>
