<template>
  <div class="big_screen">
    <!-- 内容 -->
    <div class="main">
      <!-- 左侧导航栏 -->
      <!-- <div class="menu">
        <MenuVue :collapse="collapse"></MenuVue>
      </div> -->

      <!-- 左侧栏 -->
      <div class="main-left main-aside">
        <div v-for="(item, index) in leftModel" :key="index" class="asideCnt-L">
          <div class="gw_title"> <span class="gw_cj">{{ item }}</span></div>
          <div class="modelCnt">
            <PostCompliance v-if="item == '个人岗位达标成绩'" />
            <PostCom v-if="item == '人员岗位达标情况'" />
            <SecurityCheck v-if="item == '安全检查记录'" />
            <DangerList v-if="item == '隐患清单'" />
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="main-center" style="width:500px">
        <!-- 任务数据 -->
        <CountNum v-if="isShowTaskData" />
        <div class="center-table">
          <!-- 个人任务列表 -->
          <PersonalList />
        </div>
        <!-- <div class="center-count">
          <SafetyTraining />
        </div> -->
      </div>
      <!-- 右侧栏 -->
      <div class="main-right main-aside">
        <div v-for="(item, index) in rightModel" :key="index" class="asideCnt-R">
          <div class="gw_title"> <span class="gw_cj">{{ item }}</span></div>
          <div class="modelCnt">
            <PersonalRespon v-if="item == '个人职责'" />
            <DepartmentStatistics v-if="item == '部门统计'" />
            <Risklist v-if="item == '风险清单'" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="footer"></div>
</template>
<script setup>
import { onMounted, ref, watch, computed } from "vue";
import PostCompliance from './Component/Left/PostCompliance.vue'
import PostCom from './Component/Left/PostCom.vue'
import SecurityCheck from './Component/Left/SecurityCheck.vue'
import DangerList from './Component/Left/DangerList.vue'
import CountNum from './Component/Center/CountNum.vue'
import PersonalList from './Component/Center/PersonalList.vue'
import SafetyTraining from './Component/Center/SafetyTraining.vue'
import PersonalRespon from './Component/Right/PersonalRespon.vue'
import Risklist from './Component/Right/Risklist.vue'
import DepartmentStatistics from './Component/Right/DepartmentStatistics.vue'
import MenuVue from "./Component/Menu.vue";
const leftModel = ref(['个人岗位达标成绩', '安全检查记录', '隐患清单'])
const rightModel = ref(['部门统计', '风险清单'])
const isShowTaskData = ref(true) // 中间统计
onMounted(() => {
  setModelHeight('left')
  setModelHeight('right')
  setModelHeight('center')
})


// 设备侧边栏模块高度
function setModelHeight (type) {
  if (type == 'left') {
    let len = leftModel.value.length //1-3个模块
    let box = document.getElementsByClassName('asideCnt-L')
    for (let i = 0; i < box.length; i++) {
      if (i == 0) {
        box[i].style.height = '234px'
      } else {
        if (len > 1) box[i].style.height = `calc((100vh - 334px)/2)`
      }
    }
  } else if (type == 'right') {
    let len = rightModel.value.length //2个模块
    let box = document.getElementsByClassName('asideCnt-R')
    for (let i = 0; i < box.length; i++) {
      if (i == 0) {
        box[i].style.height = '38.5%'
      } else {
        box[i].style.height = '60%'
      }
    }
  } else if (type == 'center') {
    let box = document.getElementsByClassName('center-table')
    if (isShowTaskData.value) {
      box[0].style.height = 'calc(100vh - 177px)'
    } else {
      box[0].style.height = 'calc(100vh - 330px)'
    }
  }
}
</script>

<style lang="scss" scoped>
.big_screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #f7f7f7;
  // 头部
  .header {
    height: 80px;
  }

  // 内容
  .main {
    height: calc(100vh - 100px);
    display: flex;
    width: 100%;

    .main-aside {
      width: 280px;
      flex-shrink: 1;
      margin-top: 10px;
    }

    .asideCnt-L {
      background: #fff;
    }

    .main-center {
      margin: 10px;
      flex: 1;

      .center-table {
        height: calc(100vh - 177px);
        margin-top: 10px;
        background: #fff;
      }

      .center-count {
        height: 324px;
      }
    }
  }

  // 尾部
  .footer {
    height: 20px;
    background: url("~@/assets/images/footer.png") no-repeat center center;
  }
}

// 公共样式
.gw_title {
  width: 100%;
  height: 40px;
  background: #ffffff;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;

  .gw_cj {
    margin-left: 40px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #0f3916;
    line-height: 37px;
  }
}

.modelCnt {
  height: calc(100% - 40px);
}
</style>