<template>
    <section class="bottom-modules modules">
        <!-- <section class="header">
            <article class="posi">
                <MOSTY.Assort title="" />
            </article>
            <section class="tabs">
                <article v-for="(item, index) in listData" :key="index" :class="{ 'active': actives == item.id }"
                    @click="handleTabs(item.id)">{{ item.title }}</article>
            </section>
        </section> -->
        <div class="basice-tag-container">
            <!-- 基础管理 -->
            <Basic v-if="actives == 1" />
            <!-- 岗位达标 -->
            <!-- <Gwdb v-if="actives == 2" /> -->
            <!-- 安全培训 -->
            <!-- <Aqpx v-if="actives == 3" /> -->
            <!-- 应急演练 -->
            <!-- <Yjyl v-if="actives == 4" /> -->
        </div>

    </section>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getImgUrl } from "@/utils/tools.js"
import Basic from "./BasicManaCom/basic.vue";
import Aqpx from './BasicManaCom/aqpx.vue';
import Yjyl from "./BasicManaCom/yjyl.vue";
import Gwdb from "./BasicManaCom/gwdb.vue";
import { getApi } from "@/api/tobAcco_api.js";
import { ref, reactive, onMounted } from 'vue';

const router = useRouter();
const store = useStore();

const listData = ref([
    { title: '基础管理', id: 1 },
    { title: '岗位达标', id: 2 },
    { title: '安全教育培训', id: 3 },
    { title: '应急演练', id: 4 },
])
const actives = ref(1)
// const statisticalData = ref({

// })
onMounted(() => {
    // queryData()
})
const handleTabs = _index => {
    actives.value = _index
}

</script>

<style scoped lang="scss">
// @import '../style/index.scss';

.container {
    height: calc(100vh - 530px);
}

.header {
    display: flex;

    .posi {
        margin-left: 16px;
        width: 10px;
    }

    .tabs {
        display: flex;
        align-items: center;
        color: #666666;
        font-size: 14px;

        >article {
            margin-right: 23px;
            cursor: pointer;

            &:hover {
                color: var(--el-color-primary);
            }
        }

        .active {
            color: #000000;
            font-size: 16px;
        }
    }
}

.basice-tag-container {
    // height: calc(100vh - 530px);
    height: 130px;
}
</style>
