<template>
    <section v-if="showType == 'normal'" class='home-page'>
        <el-row :gutter="8">
            <el-col :span="24">
                <BasicManage />
            </el-col>
        </el-row>
        <el-row :gutter="8" style="margin-top: 10px;">
            <el-col :span="6">
                <tasksWork />
            </el-col>
            <el-col :span="12">
                <State />
            </el-col>
            <el-col :span="6">
                <Message />
            </el-col>
        </el-row>
        <el-row :gutter="8" style="margin-top: 10px;">
            <el-col :span="6">
                <!-- <BasicManage /> -->
                <Work />
                <otherInfo style="margin-top: 5px;" />
            </el-col>
            <el-col :span="6">
                <colorRisk />
            </el-col>
            <el-col :span="6">
                <hazardRadio />
            </el-col>
            <el-col :span="6" style="height: 100%;">
                <hazardLevel />
            </el-col>
        </el-row>
    </section>
    <section v-if="showType == 'other'" class='home-page'>
        <el-row :gutter="8" style="height: 400px;">
            <el-col :span="12">
                <Task />
            </el-col>
            <el-col :span="12">
                <Expose />
            </el-col>
        </el-row>
        <el-row :gutter="8" style="margin-top: 10px;flex:1">
            <el-col :span="6">
                <Work style="height: calc(100vh - 544px);" />
            </el-col>
            <el-col :span="11">
                <OrgArea />
            </el-col>
            <el-col :span="7">
                <Calendar />
            </el-col>
        </el-row>
    </section>
</template>

<script setup>
// otherInfo
import Work from './components/Work.vue'
import colorRisk from "./components/colorRisk.vue";
import hazardRadio from "./components/hazardRadio.vue";
import hazardLevel from "./components/hazardLevels.vue";
import otherInfo from './components/otherInfo.vue'
import tasksWork from './components/tasksWork.vue'
import BasicManage from './components/BasicManage.vue';
import Chart from './components/Chart.vue';
import Message from './components/Message.vue';
// import Warning from './components/Warning.vue';
import State from './components/State.vue';
import AnQuan from './components/anQuanCom/AnQuan.vue';
import Task from './components/Task.vue';
import Expose from './components/expose.vue';
import OrgArea from './components/OrgArea.vue';
import Calendar from './components/Calendar.vue';
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref, onMounted } from 'vue';
import { getItem } from "@/utils/storage";
import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const store = useStore();
/** 显示类型 */
const showType = ref('normal');
onMounted(() => {
    // 专职安全部门 安全员登记的模块要求全部登记
    if (getItem("deptId").orgBizType === '04') {
        getApi({}, "/mosty-jcgl/aqy/checkAddAqy")
            .then(res => {
                if (res === false) {
                    ElMessage.warning("请前往 安全管理机构和人员 菜单设置专职安全员");
                }
            })
    }
})
</script>
<style scoped lang="scss">
// @import './style/index.scss';
.home-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px - 47px - 20px);
    color: #333;
}
</style>