<template>
  <div class="main">
    <Header/>
    <div class="main_t">
      <div class="main_t_t">
        <i class="main_t_t_l">当前位置：首页 &gt;</i>
        <i>安全检查</i>
      </div>
    </div>
    <div class="main_b">
      <div class="main_b_title">校级检查</div>
      <!--查询条件-->
      <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
        <el-form-item label="" prop="searchValue" label-width="80px">
          <el-input
                  maxLength="30"
                  v-model="editForm.searchValue"
                  placeholder="计划标题"
          />
        </el-form-item>
        <el-form-item label="" prop="planStatus" label-width="80px">
          <el-select v-model="editForm.planStatus" popper-class="select-big-data" placeholder="状态">
            <el-option key="0" label="未开始" value="0"></el-option>
            <el-option key="1" label="进行中" value="1"></el-option>
            <el-option key="2" label="已结束" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table :data="tableData"  style="width: 100%" height="250" :row-class-name="tableRowClassName">
        <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"/>
        <el-table-column align="center" header-align='center' prop="planTitle" label="计划标题"/>
        <!--<el-table-column align="center" header-align='center' prop="typeName" label="检查范围">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.checkRange ==1?'全校':(scope.row.checkRange ==2?'学院':(scope.row.checkRange ==3?'实验室':''))}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" header-align='center' prop="checkGroupName" label="督导组"/>
        <el-table-column align="center" header-align='center' prop="levelName" label="检查类型">
          <template slot-scope="scope">
            <span>{{scope.row.checkCategory ==1?'综合检查':(scope.row.checkCategory ==2?'专项检查':'')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align='center' prop="hazardCheckPoint" label="任务周期">
          <template slot-scope="scope">
            <span>{{scope.row.cycleStartTime}}至{{scope.row.cycleEndTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align='center' prop="planStatus" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.planStatus==0?'未开始':(scope.row.planStatus==1?'进行中':(scope.row.planStatus==2?'已结束':''))}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 14px"
          background
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :current-page.sync="editForm.page"
          :page-size="editForm.pageSize"
          layout="total,prev, pager, next"
          :total="totalNum">
      </el-pagination>
    </div>
    <div class="main_b2">
      <div class="main_b_title">学院自查</div>
      <!--查询条件-->
      <el-form :model="editForm2" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
        <el-form-item label="" prop="searchValue" label-width="80px">
          <el-input
                  maxLength="30"
                  v-model="editForm2.searchValue"
                  placeholder="计划标题"
          />
        </el-form-item>
        <el-form-item label="" prop="planStatus" label-width="80px">
          <el-select v-model="editForm2.planStatus" popper-class="select-big-data" placeholder="状态">
            <el-option key="0" label="未开始" value="0"></el-option>
            <el-option key="1" label="进行中" value="1"></el-option>
            <el-option key="2" label="已结束" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" @click.native.prevent="onSearch2" native-type="submit">查询</el-button>
          <el-button @click="resetForm2('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table :data="tableData2"  style="width: 100%" height="250" :row-class-name="tableRowClassName">
        <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"/>
        <el-table-column align="center" header-align='center' prop="planTitle" label="计划标题"/>
        <el-table-column align="center" header-align='center' prop="checkGroupName" label="督导组"/>
        <!--<el-table-column align="center" header-align='center' prop="typeName" label="检查范围">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.checkRange ==1?'全校':(scope.row.checkRange ==2?'学院':(scope.row.checkRange ==3?'实验室':''))}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" header-align='center' prop="levelName" label="检查类型">
          <template slot-scope="scope">
            <span>{{scope.row.checkCategory ==1?'综合检查':(scope.row.checkCategory ==2?'专项检查':'')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align='center' prop="hazardCheckPoint" label="任务周期">
          <template slot-scope="scope">
            <span>{{scope.row.cycleStartTime}}至{{scope.row.cycleEndTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align='center' prop="planStatus" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.planStatus==0?'未开始':(scope.row.planStatus==1?'进行中':(scope.row.planStatus==2?'已结束':''))}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 14px"
          background
          @current-change="handleCurrentChange2"
          :page-sizes="[10, 20, 30, 40]"
          :current-page.sync="editForm2.page"
          :page-size="editForm2.pageSize"
          layout="total,prev, pager, next"
          :total="totalNum2">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { securityBigViewList } from "@/api/index"
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        checkCategory:1,
        searchValue:'',
        planStatus:'',
        page:1,
        pageSize:10
      },
      editForm2:{
        checkCategory:2,
        searchValue:'',
        planStatus:'',
        page:1,
        pageSize:10
      },
      labList:[],//实验室
      totalNum:0,
      totalNum2:0,
      tableData:[],
      tableData2:[],
      codeData:'',
      subOptions:[],
    }
  },
  methods: {
    back(){
        this.$router.push('/home')
    },
    //选中实验室
    subChange(val){
      let self = this;
      for(let i=0;i<self.subOptions.length;i++){
        if(self.subOptions[i].subId == val){
          this.$set(this.newData,'subId',self.subOptions[i].subId);
          this.$set(this.newData,'subName',self.subOptions[i].subName);
          this.$set(this.newData,'roomNum',self.subOptions[i].roomNum);
        }
      }
    },
    //搜索实验室
    subSelectList(query){
      if (query !== '' && query.length>1) {
        systemSubjectGetList({"subName":query,}).then(response => {
          this.$set(this,'subOptions',response.data);
        });
      } else {
        this.$set(this,'subOptions',[]);
      }
    },
    tableRowClassName({ rowIndex}) {
      if (rowIndex%2 === 0) {
        return 'success-row';
      } else{

        return 'warning-row';
      }
    },

    indexMethod(index) {
      return (this.editForm.page - 1) * this.editForm.pageSize + index + 1;
    },
    indexMethod2(index) {
      return (this.editForm2.page - 1) * this.editForm2.pageSize + index + 1;
    },
    //请求列表
    getAjaxList:function (){
        let obj = JSON.parse(JSON.stringify(this.editForm));
        obj.deptId = localStorage.getItem('deptId');
        securityBigViewList(obj).then((res) =>{
            if(res.code==200){
                this.$set(this,'tableData',res.data.records);
                this.$set(this,'totalNum',res.data.total);
            }
        })
    },
    //请求列表
    getAjaxList2:function (){
        let obj = JSON.parse(JSON.stringify(this.editForm2));
        obj.deptId = localStorage.getItem('deptId');
        securityBigViewList(obj).then((res) =>{
            if(res.code==200){
                this.$set(this,'tableData2',res.data.records);
                this.$set(this,'totalNum2',res.data.total);
            }
        })
    },
    /*查询*/
    onSearch() {

      this.editForm.page =1;
      this.getAjaxList();
    },
    /*重置*/
    resetForm() {
      this.editForm.searchValue = "";
      this.editForm.planStatus = "";
      this.onSearch();
    },
    /*查询*/
    onSearch2() {

      this.editForm2.page =1;
      this.getAjaxList2();
    },
    /*重置*/
    resetForm2() {
      this.editForm2.searchValue = "";
      this.editForm2.planStatus = "";
      this.onSearch2();
    },
    handleCurrentChange(val) {
      this.editForm.page = val;
      this.getAjaxList();
    },
    handleCurrentChange2(val) {
      this.editForm2.page = val;
      this.getAjaxList2();
    },
  },
  mounted() {
    this.codeData=this.$route.query.key
   // this.getAjaxData()
    this.getAjaxList();
    this.getAjaxList2()
  },


}
</script>
<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .main {
    width: 1920px;
    height: 1080px;
    /* background: url("../img/index_bg.png") no-repeat;
     background-size: 100% 100%;*/
    position: relative;
    left: 0;
    top: 0;
    z-index: 50;
    background: #062338;
    overflow: hidden;
    .main_t{
      background: #062338;
      width: 1852px;
      position: absolute;
      left: 34px;
      top: 86px;
      z-index: 200;
      .main_t_t{
        margin: 20px 0 0 18px;
        >i{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 16px;
        }
        >i:nth-of-type(1){

        }
        >i:nth-of-type(2){
          color: #1ED0F8;
        }
      }
    }
    .main_b{
      background: rgba(9, 55, 81, 0.6);
      padding: 0 32px;
      width: 1852px;
      height: 442px;
      //position: absolute;
      //left: 34px;
      //top: 138px;
      //z-index: 200;
      margin-top: 138px;
      margin-left:34px;
      overflow: hidden;
      .main_b_title{
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
        text-align: center;
        margin-top: 10px;
      }
    }
    .main_b_h{
      background: rgba(9, 55, 81, 0.6);
      padding: 0 32px;
      width: 1852px;
      height: 894px;
      margin-top: 138px;
      margin-left:34px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .main_b_title{
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
        text-align: center;
        margin-top: 10px;
      }
    }
    .main_b2{
      background: rgba(9, 55, 81, 0.6);
      padding: 0 32px;
      width: 1852px;
      height: 442px;
      margin-left:34px;
      margin-top:25px;
      overflow: hidden;
      //position: absolute;
      //left: 34px;
      //top: 588px;
      //z-index: 200;
      .main_b_title{
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
        text-align: center;
        margin-top: 10px;
      }
    }
  }
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>
