<!--化学品首页-->
<template>
  <div class="app-container chemicalsStatistics">
    <div class="top-max-max-big-box">
      <div class="button-big-box" @click="goPage(1)" v-if="versionField() == 'xiBeiNongLinDaXue'">
        <img src="@/assets/ZDimages/chemicalManage/icon_hxp_gzwhp@1x.png">
        <div>
          <p>管制危化品</p>
          <p>(易制毒，易制爆)</p>
          <p>申购申领 <span class="el-icon-d-arrow-right"></span></p>
        </div>
      </div>
      <div class="button-big-box" @click="goPage(2)" v-if="versionField() == 'xiBeiNongLinDaXue'">
        <img src="@/assets/ZDimages/chemicalManage/icon_hxp_cjhxp@1x.png">
        <div>
          <p>常规危化品</p>
          <p>(普通化学品)</p>
          <p>采购管理 <span class="el-icon-d-arrow-right"></span></p>
        </div>
      </div>
      <div class="button-big-box" @click="goPage(3)" v-if="versionField() == 'xiBeiNongLinDaXue'">
        <img src="@/assets/ZDimages/chemicalManage/icon_hxp_sysnwhp@1x.png">
        <div>
          <p>实验室内危化品</p>
          <p>(化学品使用)</p>
          <p>库存管理 <span class="el-icon-d-arrow-right"></span></p>
        </div>
      </div>
      <div class="button-big-box" @click="goPage(4)" v-if="versionField() == 'xiBeiNongLinDaXue'">
        <img src="@/assets/ZDimages/chemicalManage/icon_hxp_syswf@1x.png">
        <div>
          <p>实验室危废</p>
          <p>(含动物尸体)</p>
          <p>回收报备 <span class="el-icon-d-arrow-right"></span></p>
        </div>
      </div>
      <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>
    <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:{
      goPage(type){
        if (type == 1){
          window.open('https://chem.nwafu.edu.cn/back/index?menuId=1390244754897264641','_blank','noreferrer');
        } else if(type == 2){
          window.open('https://authserver.nwafu.edu.cn/authserver/login?service=https%3A%2F%2Fcg.nwafu.edu.cn%2Fsfw_jz%2Findex.jsp%3FtoPage%3De%253fpage%253dmall.description%26sfwtype%3Dmall','_blank','noreferrer');
        }else if(type == 3){
          this.$router.push({ path: '/chemicalManage/inventoryManagement/inventoryStatistics'});
        }else if(type == 4){
          window.open('https://chem.nwafu.edu.cn/back/index?menuId=1391582919592357889','_blank','noreferrer');
        }
      },
      chemicalIndexTypeGroup(){
        chemicalIndexTypeGroup().then(response => {
          this.$set(this,'inventoryData',response.data);
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .chemicalsStatistics{
    .top-max-max-big-box{
      display: flex;
      .button-big-box{
        width:220px;
        height:120px;
        display: flex;
        margin:20px 0 10px 20px;
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
        border-radius: 10px;
        cursor: pointer;
        img{
          margin:14px 0 0 18px;
          height:50px;
          width:50px;
        }
        div{
          p:nth-child(1){
            color:#333;
            font-size:18px;
            line-height:18px;
            margin:16px 0 0 11px;
          }
          p:nth-child(2){
            color:#666;
            font-size:14px;
            line-height:14px;
            margin:14px 0 0 11px;
          }
          p:nth-child(3){
            color:#0183FA;
            font-size:14px;
            line-height:14px;
            margin:27px 0 0 56px;
          }
        }
      }
    }
    .top-max-big-box{
      flex:1;
      height:120px;
      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:30px 20px 0 24px;
          height:60px;
          width:60px;
        }
        div{
          p:nth-child(1){
            font-size:18px;
            line-height:60px;
          }
          p:nth-child(2){
            line-height:30px;
            font-size:30px;
            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>
