<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 filterTabs" :key="i" />
      </el-tabs>
      <div v-if="activeTab === '2'" class="headBox" style="justify-content: space-between">
        <div style="color: rgb(0, 116, 87);">
          <el-popover placement="bottom-start" :width="590" trigger="hover" :title="popover?.title">
            <template #reference>
              <el-icon :size="28">
                <Warning />
              </el-icon>
            </template>
            <pre v-text="popover?.content"></pre>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
  <div>
    <component :is="currentCom" :isOpen="false" :id="activeTab" :title="title" />
  </div>
</template>

<script setup>
import { ref, reactive, defineAsyncComponent, onMounted, computed } from "vue";
import { filterqx } from "@/utils/auth.js"
import { useRoute } from "vue-router";
const route = useRoute();
const currentCom = ref(null);
const activeTab = ref('1')
// 详细信息
const popover = reactive({
  title: "",
  content: `
                        【安全费用科目详情】

(1)安全设施费用:购置购建、更新改造、检测检验、检定校准、运行维护安全防护
和紧急避险设施、设备支出[不含按照建设项目安全设施必须与主体工程同时设计、
同时施工、同时投入生产和使用”(以下简称"三同时”)规定投入的安全设施、设备];
常见如:“脑图";灭火器、灭火毯、物联集成感知装置及产品系统(如:巡更、停车场、
门禁,视频监控系统等);

(2)应急救援费用:配备、更新、维护、保养应急救援器材、设备支出;
企业应急救援队伍建设(含建设应急救援队伍所需应急救援物资储备、人员培训等方面);
应急预案制修订、应急演练支出;常见如:消防战斗服、防毒面置、应急逃生面置、耐高温手套、
应急沙袋、创伤急救、救援升降、应急对讲机应急电话、手持扩音器、应急照明手电筒等

(3)安全防护用品费用:配备、更新、维护、保养安全防护用品;
常见如:安全帽令护目镜、安全带、防尘口置、防护服.防砸安全鞋、绝您鞋、防护手套等。

(4)安全信息化费用:购置、开发、推广应用、更新升级、
运行维护安全生产信息系统、软件、网络安全、技术支出;(注:不包含硬件)

(5)安全宣传教育培训费:安全生产宣传教育培训支出;

(6)安全奖励费用:隐患奖励:从业人员发现报告事故隐患的奖励支出;

(7)安全保险:安全生产责任保险、承运人责任险等与安全生产直接相关的法定保险支出;

(8)安全咨询服务:安全生产检查检测、评估评价(不含新建、改建、扩建项目安全评价)、
评审、咨询、标准化建设;

(9)其他:与安全生产直接相关的其他支出。

`
});
const tabs = [
  {
    label: "统计报表",
    value: "1"
  },
  {
    label: "预算填报",
    value: "2"
  },
  // {
  //   label: "预算审核/批复", // 预算审核/批复
  //   value: "3"
  // },
  {
    label: "费用使用", // 原：安全投入使用
    value: "4"
  },
  {
    label: "费用使用情况分析", // 原：安全费用使用情况分析
    value: "5"
  },
]
// 【预算审核/批复】 仅 安全部、领导班子 显示
const filterTabs = computed(() => {
  /** 是否是“领导班子”，“安全部门” 人员*/
  let isLeaderOrAqbm = filterqx('isaqbm') == '1' || filterqx('isldbz') == '1'
  return tabs.filter((item) => {
    return item.value == '3' ? isLeaderOrAqbm : true
  })
})
const title = ref('统计分析')
const onTabClick = (tab, initVal) => {
  let tabName = tab?.props?.name || initVal;
  switch (tabName) {
    case "1": // 统计分析
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/anQuantrNew/components/aqfytj.vue"));
      break;
    case "2": // 预算填报
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/anQuantrNew/ystb/ystb.vue"));
      break;
    case "3": // 预算审核/批复
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/anQuantrNew/ysshpf/index.vue"));
      break;
    case "4": // 费用使用
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/anQuantrNew/fysy/index.vue"));
      break;
    case "5": // 费用使用情况分析
      currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/aqscfygl/syqktj.vue"));
      break;
    default:
      break;
  }
  title.value = tabs.find((item) => item.value === tabName)?.label;
};

onMounted(() => {
  // title.value = tabs.find((item) => item.value === activeTab.value).label;
  // currentCom.value = defineAsyncComponent(() => import("@/views/dutyBook/anQuantrNew/components/aqfytj.vue"));
  const { query } = route;
  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;

    .headBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 470px;
      top: 5px;
    }
  }
}
</style>
