<template>
  <div class="app-container worktable scrollbar-box">
    <div class="main" v-if="pageType == 1">
        <div class="top">
          <!-- 数据总览 -->
          <data-screening :propsData="propsData"></data-screening>
          <!-- 数据总览图表 -->
          <div class="top-c">
            <data-screening-chart :propsData="propsData"></data-screening-chart>
          </div>
          <!-- 整改完成率 -->
          <div class="top-r">
            <rectification-finish :propsData="propsData"></rectification-finish>
          </div>
        </div>
        <div class="center">
          <div class="center-l">
            <!-- 未整改隐患 -->
            <div class="center-l-t">
              <div class="min-title-box">
                <p></p>
                <p>未整改隐患</p>
              </div>
              <div class="center-l-t-b">
                <div class="center-l-t-b-li">
                  <img  src="@/assets/ZDimages/securityCheck/icon_yzgyh_gj@1x.png"/>
                  <p>共计{{dataOne.hazardsNum}}项</p>
                </div>
                <div class="center-l-t-b-li">
                  <img  src="@/assets/ZDimages/securityCheck/icon_wzgyh_sjsys@1x.png"/>
                  <p>涉及{{dataOne.subNum}}个实验室</p>
                </div>
              </div>
            </div>
            <!-- 检查覆盖率 -->
            <div class="center-l-b">
              <div class="min-title-box">
                <p></p>
                <p>检查覆盖率</p>
              </div>
              <coverage-rate-echarts :propsData="propsData"></coverage-rate-echarts>
            </div>
          </div>
          <div class="center-c">
            <div class="center-c-t">
              <div class="min-title-box">
                <p></p>
                <p>已整改隐患</p>
              </div>
              <div class="center-c-t-b">
                <div class="center-c-t-b-li">
                  <img  src="@/assets/ZDimages/securityCheck/icon_yzgyh_dz@1x.png"/>
                  <p>当周{{dataTwo.weekNum}}项</p>
                </div>
                <div class="center-c-t-b-li">
                  <img  src="@/assets/ZDimages/securityCheck/icon_yzgyh_dy@1x.png"/>
                  <p>当月{{dataTwo.monthNum}}项</p>
                </div>
                <div class="center-c-t-b-li">
                  <img  src="@/assets/ZDimages/securityCheck/icon_yzgyh_sy@1x.png"/>
                  <p>上月{{dataTwo.lastMonthNum}}项</p>
                </div>
                <div class="center-c-t-b-li">
                  <img  src="@/assets/ZDimages/securityCheck/icon_yzgyh_dn@1x.png"/>
                  <p>当年{{dataTwo.yearNum}}项</p>
                </div>
              </div>
            </div>
            <div class="center-c-b">
              <div class="min-title-box">
                <p></p>
                <p>检查结果统计</p>
              </div>
              <inspection-statistics-echarts :propsData="propsData"></inspection-statistics-echarts>
            </div>
          </div>
          <div class="center-c2">
            <div class="min-title-box">
              <p></p>
              <p>全年指标隐患分布</p>
            </div>
            <hidden-danger-statistics-echarts :propsData="propsData"></hidden-danger-statistics-echarts>
          </div>
          <div class="center-r">
            <div class="center-r-li" @click="goPage('snapshot')">
              <img  src="@/assets/ZDimages/securityCheck/icon_gzzl_ssp@1x.png"/>
              <p>随手拍</p>
            </div>
            <div class="line"></div>
            <div class="center-r-li" @click="goPage('rectificationNotice')">
              <img  src="@/assets/ZDimages/securityCheck/icon_gzzl_zgtz@1x.png"/>
              <p>整改通知</p>
            </div>
            <div class="line"></div>
            <div class="center-r-li" @click="goPage('dataStatistics')">
              <img  src="@/assets/ZDimages/securityCheck/icon_gzzl_sjtj@1x.png"/>
              <p>数据统计</p>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-l">
            <div class="min-title-box">
              <p></p>
              <p>{{yearData}}年全校实验室安全检查统计</p>
              <p @click="goPage('dataStatistics')">查看全部</p>
            </div>
            <div class="bottom-l-b">
              <annualSecureInspect :propsData="propsData"></annualSecureInspect>
            </div>
          </div>
          <div class="bottom-r">
            <div class="min-title-box">
              <p></p>
              <p>各单位全年指标隐患分布</p>
              <p @click="goPage('danger')">查看全部</p>
            </div>
            <div class="bottom-r-b">
              <annualHiddenDistribution :propsData="propsData"></annualHiddenDistribution>
            </div>
          </div>
        </div>
      </div>
    <inspection-items-statistics :propsData="minPropsData" v-if="pageType === 4"></inspection-items-statistics>
  </div>
</template>

<script>
  import {
    securityIndexStatisticsUserIdentity,
    securityIndexStatisticsUnresolvedHazard,
    securityIndexStatisticsRectifiedHazard,
  } from '@/api/safetyCheck/index'
  import dataScreening from './dataScreening.vue'
  import dataScreeningChart from './dataScreeningChart.vue'
  import rectificationFinish from './rectificationFinish.vue'
  import coverageRateEcharts from './coverageRateEcharts.vue'
  import inspectionStatisticsEcharts from './inspectionStatisticsEcharts.vue'
  import hiddenDangerStatisticsEcharts from './hiddenDangerStatisticsEcharts.vue'
  import annualSecureInspect from './annualSecureInspect.vue'
  import annualHiddenDistribution from './annualHiddenDistribution.vue'
  import inspectionItemsStatistics from "@/views/safetyCheck/components/inspectionItemsStatistics.vue";
  export default {
    name: 'index',
    components: {
      dataScreening,
      dataScreeningChart,
      rectificationFinish,
      coverageRateEcharts,
      inspectionStatisticsEcharts,
      hiddenDangerStatisticsEcharts,
      annualSecureInspect,
      annualHiddenDistribution,
      inspectionItemsStatistics,
    },
    data(){
      return{
        //用户身份 校级/院级
        userType:"",
        tableListOne:[],
        tableListTwoTitle:[],
        tableType:false,
        tableListTwo:[],
        propsData:{},
        pageType:null,
        yearData:'',
        dataOne:{
          hazardsNum:0,
          subNum:0,
        },
        dataTwo:{
          weekNum:0,
          monthNum:0,
          lastMonthNum:0,
          yearNum:0,
        },
        minPropsData:{},
      }
    },
    created(){
      this.securityIndexStatisticsUserIdentity();
    },
    mounted(){
    },
    methods:{
      //页面跳转
      goPage(type){
        if (type == 'snapshot'){
          //随手拍
          this.$router.push({ path: '/safetyCheck/snapshot'});
        } else if (type == 'rectificationNotice'){
          //整改通知
          this.$router.push({ path: '/safetyCheck/safetyHazard/rectificationNotice'});
        } else if (type == 'dataStatistics'){
          //数据统计
          this.$router.push({ path: '/safetyCheck/dataStatistics'});
        } else if (type == 'dataStatistics'){
          //检查统计
          this.$router.push({ path: '/safetyCheck/dataStatistics'});
        } else if (type == 'danger'){
          //检查项统计
          this.$set(this,'minPropsData',{
            checkCategory:1,
            title:localStorage.getItem('deptName')
          });
          this.$set(this,'pageType',4);
        }
      },
      tableButton(type){
        if(type = 6){
          this.securityIndexStatisticsUserIdentity();
        }
      },
      //查询用户身份
      securityIndexStatisticsUserIdentity(){
        securityIndexStatisticsUserIdentity().then(response => {
          this.$set(this,'propsData',{
            source:true,
            schoolAdmin:response.schoolAdmin,
            deptId:response.deptId,
            subIds:response.subIds,
          });
          this.$set(this,'pageType',1);
          this.$set(this,'yearData',new Date().getFullYear());
          if(response.schoolAdmin){
            //未整改隐患
            this.securityIndexStatisticsUnresolvedHazard();
            //已整改隐患
            this.securityIndexStatisticsRectifiedHazard();
          }
        });
      },
      //未整改隐患
      securityIndexStatisticsUnresolvedHazard(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsUnresolvedHazard(obj).then(response => {
          this.$set(this,'dataOne',response.data);
        });
      },
      //已整改隐患
      securityIndexStatisticsRectifiedHazard(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsRectifiedHazard(obj).then(response => {
          this.$set(this,'dataTwo',response.data);
        });
      },
      renderheader(h, { column, $index }) {
        return h('span', {}, [
          h('span', {}, column.label.split('/')[0]),
          h('br'),
          h('span', {}, column.label.split('/')[1])
        ]);
        [h('span')]
      },
    }
  }
</script>

<style scoped lang="scss">
  .worktable{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding:10px 0 10px 10px !important;
    font-weight: 400;
    overflow-y: auto;
    .min-title-box{
      display: flex;
      height:45px;
      p:nth-child(1){
        background-color: #0183FA;
        height:18px;
        width:4px;
        margin:24px 10px 0 20px;
      }
      p:nth-child(2){
        font-size:16px;
        color:#333;
        line-height:24px;
        margin-top:21px;
        flex:1;
      }
      p:nth-child(3){
        font-size:14px;
        color:#0183fa;
        line-height:24px;
        margin-top:21px;
        margin-right:20px;
        cursor: pointer;
      }
    }
    .top{
      display: flex;
      justify-content: flex-start;
      .top-c{
        width: 581px;
        height: 138px;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 10px 10px 10px 10px;
        margin-left: 20px;
      }
      .top-r{
        width: 548px;
        height: 138px;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 10px 10px 10px 10px;
        margin-left: 20px;
      }
    }
    .center{
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      .center-l{
        .center-l-t{
          width: 366px;
          height: 145px;
          background: #FFFFFF;
          box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
          border-radius: 10px 10px 10px 10px;
          .center-l-t-b{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            .center-l-t-b-li{
              width: 156px;
              text-align: center;
              >img{
                width: 46px;
                height: 46px;
              }
              >p{
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 24px;
              }
            }
            .center-l-t-b-li:nth-of-type(2){
              width: 190px;
              text-align: center;
            }
          }

        }
        .center-l-b{
          width: 366px;
          height: 215px;
          background: #FFFFFF;
          box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
          border-radius: 10px 10px 10px 10px;
          margin-top: 20px;
        }
      }
      .center-c{
        margin-left: 20px;
        .center-c-t{
          width: 581px;
          height: 145px;
          background: #FFFFFF;
          box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
          border-radius: 10px 10px 10px 10px;
          .center-c-t-b{
            padding: 10px 58px 0 50px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .center-c-t-b-li{
              text-align: center;
              >img{
                width: 46px;
                height: 46px;
              }
              >p{
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 24px;
                margin-top: 6px;
              }
            }
          }
        }
        .center-c-b{
          width: 581px;
          height: 216px;
          background: #FFFFFF;
          box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
          border-radius: 10px 10px 10px 10px;
          margin-top: 20px;
        }
      }
      .center-c2{
        width: 448px;
        height: 381px;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 10px 10px 10px 10px;
        margin-left: 20px;
      }
      .center-r{
        width: 89px;
        height: 381px;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 10px 10px 10px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        .center-r-li{
          text-align: center;
          cursor: pointer;
          >img{
            width: 40px;
            height: 40px;
          }
          >p{
            font-weight: 400;
            font-size: 12px;
            color: #3D3D3D;
            line-height: 8px;
            text-align: center;
            margin-top: 14px;
          }
        }
        .line{
          width: 30px;
          height: 0px;
          border: 2px solid #E0E0E0;
          margin: 36px 0 30px 0;
        }
      }
    }
    .bottom{
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      .bottom-l{
        width: 967px;
        height: 320px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 20px 20px 20px 20px;
        .bottom-l-b{
          display: flex;
          flex:1;
          flex-direction: column;
          overflow: hidden;
          margin: 14px 20px 0;
          padding-bottom:20px;
        }
      }
      .bottom-r{
        width: 570px;
        height: 320px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
        border-radius: 10px 10px 10px 10px;
        margin-left: 20px;
        .bottom-r-b{
          display: flex;
          flex:1;
          flex-direction: column;
          overflow: hidden;
          margin: 14px 18px 0;
          padding-bottom:20px;
        }
      }
    }
  }
</style>
