<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">
            <!--查询条件-->
            <el-form :model="queryParams" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
              <el-form-item label="实验室" prop="subjectId" label-width="98px">
                <el-input
                    maxLength="30"
                    v-model="queryParams.searchValue"
                    placeholder="实验室/房间号"
                />
              </el-form-item>
                <el-form-item label="安全分类" prop="typeId" label-width="98px">
                  <el-select v-model="queryParams.typeId" placeholder="请选择安全分类" style="width:160px;">
                    <el-option
                        v-for="dict in typeList"
                        :key="dict.typeId"
                        :label="dict.typeName"
                        :value="dict.typeId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="安全分级" prop="level" label-width="98px">
                  <el-select v-model="queryParams.levelId" placeholder="请选择安全分级" style="width:160px;">
                    <el-option
                        v-for="item in levelList"
                        :key="item.levelId"
                        :label="item.titleName"
                        :value="item.levelId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label-width="0">
                    <el-button type="primary" @click.native.prevent="handleQuery" native-type="submit">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <!--列表-->
            <el-table :data="dataList"  style="width: 100%"  height="750" :row-class-name="tableRowClassName">
                <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
                <el-table-column align="center" header-align='center' prop="subName" label="实验室" width="300px"></el-table-column>
                <el-table-column align="center" header-align='center' prop="typeName" label="安全分类" width="300px"></el-table-column>
                <el-table-column align="center" header-align='center' prop="levelName" label="安全分级" width="300px"></el-table-column>
                <el-table-column align="center" header-align='center' prop="userNames" label="实验室人数">
                    <template  slot-scope="scope">
                        <el-tooltip v-for="(item,index) in scope.row.userInfoList" class="item" effect="dark" :content="'签到时间：'+item.createTime" placement="top">
                            <span style="margin-right:10px;">{{item.userName}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      :total="total"
                      :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"
          />
        </div>
    </div>
</template>

<script>
import {
  laboratoryBigViewSubUserCount,
    laboratoryLevelConfigGetLevelTitleList,
  laboratoryClassTypeGetList,
} from "@/api/index";
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      queryParams:{
        page:1,
        pageSize:10,
        typeId:'',
        levelId:'',
        searchValue:'',
      },
      typeList:[],
      levelList:[],
      dataList:[],
      total:0,


    }
  },
  mounted() {
    this.getList()
    this.getListAll()
  },
  methods: {
    back(){
        this.$router.push('/home')
    },
    tableRowClassName({ rowIndex}) {
      if (rowIndex%2 === 0) {
        return 'success-row';
      } else{
        return 'warning-row';
      }
    },
    //查询按钮
    handleQuery(){
      this.$set(this.queryParams,'page',1);
      this.getList();
    },
    //重置按钮
    resetQuery(){
      this.$set(this,'queryParams',{
        page:1,
        pageSize:10,
        typeId:'',
        levelId:'',
        searchValue:'',
      });
      this.getList();
    },
    getListAll() {
      //获取实验室分级列表
        laboratoryLevelConfigGetLevelTitleList({}).then(response => {
        if (response.code == 200) {
          this.$set(this, 'levelList', response.data)
        }
      })
      //获取实验室分类列表
      laboratoryClassTypeGetList({}).then(response => {
        if (response.code == 200) {
          this.$set(this, 'typeList', response.data)
        }
      })
    },
    getList(){
      this.$set(this,'loading',true);
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      laboratoryBigViewSubUserCount(obj).then(response => {
        this.$set(this,'loading',false);
        this.$set(this,'dataList',response.data.records);
        this.$set(this,'total',response.data.total);
      });
    },
  },

}
</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;

        .header {
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 100;
            display: flex;
            justify-content: flex-start;

            .header_l {
                width: 182px;
                height: 44px;
                margin: 10px 0 0 40px;
            }
            .header_c {
                width: 1180px;
                height: 152px;
                margin-left: 136px;
                background: url("~@/assets/image/index_icon2.png") no-repeat;
                background-size: 100% 100%;
                font-size: 30px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 30px;
                text-align: center;
                padding-top: 26px;
            }
            .header_r {
                margin-left: 264px;
                width: 82px;
                height: 32px;
                margin-top: 18px;
            }
        }
        .main_t{
            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: 920px;
            position: absolute;
            left: 34px;
            top: 138px;
            z-index: 200;
        }
    }
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>
