<!--化学品首页-->
<template>
  <div class="app-container chemicalsStatistics">
    <div class="top-max-big-box">
      <div class="img-box">
        <img src="@/assets/ZDimages/chemicalManage/icon_sy_hxpg.png">
        <div>
          <p>化学品柜</p>
          <p class="colorA">{{inventoryData.cabinetNum}}</p>
        </div>
      </div>
      <p class="null-p"></p>
      <div class="img-box">
        <img src="@/assets/ZDimages/chemicalManage/icon_sy_hxpkysl.png">
        <div>
          <p>待入库</p>
          <p class="colorB">{{inventoryData.stockWaitNum}}</p>
        </div>
      </div>
      <p class="null-p"></p>
      <div class="img-box">
        <img src="@/assets/ZDimages/chemicalManage/icon_sy_hxpyjsl.png">
        <div>
          <p>待归还</p>
          <p class="colorC">{{inventoryData.giveBackNum}}</p>
        </div>
      </div>
    </div>
    <div class="scrollbar-box" style="padding:0 20px 20px;">
      <div class="center-max-big-box">
        <categoryStatistics></categoryStatistics>
        <useStatistics></useStatistics>
        <inventoryStatistics></inventoryStatistics>
      </div>
      <div class="bottom-max-big-box">
        <dosageStatistics></dosageStatistics>
        <alarmStatistics></alarmStatistics>
        <controlStatistics></controlStatistics>
      </div>
    </div>
  </div>
</template>
<script>
  import categoryStatistics from "./categoryStatistics.vue"
  import useStatistics from "./useStatistics.vue"
  import inventoryStatistics from "./inventoryStatistics.vue"
  import dosageStatistics from "./dosageStatistics.vue"
  import alarmStatistics from "./alarmStatistics.vue"
  import controlStatistics from "./controlStatistics.vue"
  import { chemicalIndexTypeGroup } from '@/api/chemicalManage'
  import { getDicts } from '@/api/commonality/noPermission'
  export default {
    name: 'chemicalsStatistics',
    components: {
      categoryStatistics,
      useStatistics,
      inventoryStatistics,
      dosageStatistics,
      alarmStatistics,
      controlStatistics,
    },
    data () {
      return {
        inventoryData:{

        },
      }
    },
    created(){

    },
    mounted(){
      this.chemicalIndexTypeGroup();
    },
    methods:{
      chemicalIndexTypeGroup(){
        chemicalIndexTypeGroup().then(response => {
          this.$set(this,'inventoryData',response.data);
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .chemicalsStatistics{
    .top-max-big-box{
      margin:20px 20px 10px;
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
      border-radius: 10px;
      display: flex;
      .img-box{
        flex:1;
        display: flex;
        img{
          margin:26px 30px 0 170px;
          width: 68px;
          height:68px;
        }
        div{
          p:nth-child(1){
            font-size:18px;
            line-height:60px;
          }
          p:nth-child(2){
            line-height:36px;
            font-size:36px;
            font-weight:700;
          }
          .colorA{
            color:#742EFF;
          }
          .colorB{
            color:#0360FF;
          }
          .colorC{
            color:#0DDBDB;
          }
        }
      }
      .null-p{
        background: #D8D8D8;
        width:2px;
        height:30px;
        margin:45px 0;
      }
    }
    .center-max-big-box{
      display: flex;
      margin:10px 0 20px 0;
    }
    .bottom-max-big-box{
      display: flex;
    }
  }
</style>
