<template>
    <div class="bg app-container">
      <Header />

      <div class="container">
        <!-- 左边 -->
        <div class="left_box">
          <dv-border-box-11
            title="总览"
            class="left_top_box"
            :color="['#fff','#1352b6']"
          >
            <LeftTopBox />
          </dv-border-box-11>
          <div style="height: 3%"></div>
          <dv-border-box-11
            title="岗检问题属性分布"
            class="left_bottom_box"
            :color="['#fff','#1352b6']"
          >
            <LeftBottom />
          </dv-border-box-11>
        </div>

        <!-- 中间 -->
        <div class="center_box">
          <div style="height: 57%">
            <div class="center_top_samll">
              <div class="center_border_box">
                <div class="big">
                  <div class="first_box">
                    <p style="padding: 0.3rem;font-size: 1rem;height: 2rem;">应检岗位数量</p>
                    <p
                      style="
                        width: 100%;
                        height: 1px;
                        background-color: #227ba4;
                      "
                    ></p>
                    <p style="padding: 0.3rem;font-size: 1rem;">
                      应检岗位人数
                    </p>
                  </div>
                  <div class="senond_box">
                    <p style="padding: 0.3rem;font-size: 1rem;height: 2rem;"> {{ countObj.postShouldCheckedCount }} </p>
                    <p
                      style="
                        width: 100%;
                        height: 1px;
                        background-color: #227ba4;
                      "
                    ></p>
                    <p style="padding: 0.3rem;font-size: 1rem;">
                      {{ countObj.userShouldCheckedCount }} 
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="center_bottom_samll">
              <CenterTop />
            </div>
          </div>
          <dv-border-box-11 title="岗检问题整改一览" class="center_bottom_box" :color="['#fff','#1352b6']" >
            <CenterBottom />
          </dv-border-box-11>
        </div>

        <!-- 右边 -->
        <div class="right_box">
          <dv-border-box-11 title="岗检计划完成一览" class="right_top_box" :color="['#fff','#1352b6']">
            <RightTop />
          </dv-border-box-11>
          <div style="height: 3%"></div>
          <dv-border-box-11
            title="评比排名"
            class="right_bottom_box"
            :color="['#fff','#1352b6']"
          >
            <RightBottom />
          </dv-border-box-11>
        </div>
      </div>
</div>

</template>

<script>
import Header from './header.vue'
import LeftTopBox from './leftTopBox.vue'
import LeftBottom from './leftBottom.vue'
import CenterBottom from './centerBottom.vue'
import RightTop from './rightTop.vue'
import RightBottom from './rightBottom.vue'
import CenterTop from './centerTop.vue'

import { userTotal } from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebIndex',
  components: {
    Header,
    LeftTopBox,
    LeftBottom,
    CenterBottom,
    RightTop,
    RightBottom,
    CenterTop
  },
  data() {
    return {
      personnelNum: null,
      countObj: {
        postShouldCheckedCount:'',
        userShouldCheckedCount:'',
      }
    }
  },

  mounted() {
    this.initPersonnelNum()
  },

  methods: {
    async initPersonnelNum() {
      const res = await userTotal()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.countObj = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  // background-image: url('../../assets//images//bg.jpg');
}
* {
  color: #000;
  box-sizing: border-box;
  font-size: 0.8rem;
}

.container {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 100px);
  margin: 0;
  bottom: 0;
  box-sizing: border-box;

  .left_box {
    flex: 1;

    .left_top_box {
      height: 50%;
      padding: 50px 20px 15px 20px;
    }

    .left_bottom_box {
      height: 50%;
      padding: 50px 20px 15px 20px;
    }
  }

  .center_box {
    flex: 1;

    .center_top_samll {
      height: 20%;
      display: flex;
      justify-content: flex-end;

      .center_border_box {
        width: 55%;
        margin-right: 10px;
        box-sizing: border-box;

        .big {
          display: flex;
          padding: 0.5rem;

          div {
            flex: 1;
            text-align: center;
            border: 1px solid #22779f;
          }
          p {
            color: #1352b6;
            margin-top: 0;
            margin: 0;
            font-size: 1rem;
          }

          .first_box {
            // width: 100%;
            // height: 100%;
            background-color: rgba(158, 200, 209, 0.7);
          }
        }
      }
    }

    .center_bottom_samll {
      height: 100%;
      // background-color: #fff;
    }

    .center_bottom_box {
      height: 45%;
      width: 95%;
      padding: 50px 20px 15px 20px;
      margin: 0 auto;
    }
  }

  .right_box {
    flex: 1;

    .right_top_box {
     height: 50%;
     padding: 50px 20px 15px 20px;
    }

    .right_bottom_box {
     height: 50%;
      padding: 50px 20px 15px 20px;
    }
  }
}
::v-deep .dv-border-box-10 {
  box-shadow:#1352b6 0px 0px 10px 3px inset !important;
}
::v-deep .rows {
  color: #000;
}
</style>
