<!--分级管控/实验室列表-->
<template>
  <div class="subjectList" v-if="subjectOpen">
    <el-dialog title="选择实验室" :visible.sync="subjectOpen" width="1500px" append-to-body>
      <div class="gradeManage-subjectList" style="height:626px;display: flex;flex-direction: column">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="实验室" prop="name" label-width="80px">
            <el-input
              style="width:160px;"
              maxlength="10"
              v-model="queryParams.name"
              placeholder="请输入实验室名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="学院" prop="deptId">
            <el-select style="width:160px;" v-model="queryParams.deptId" placeholder="请选择学院" clearable label-width="80px">
              <el-option
                v-for="dict in deptList"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全分类" prop="typeId">
            <el-select style="width:160px;" v-model="queryParams.typeId" placeholder="请选择安全分类" clearable label-width="80px">
              <el-option
                v-for="dict in typeList"
                :key="dict.id"
                :label="dict.typeName"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全分级" prop="level">
            <el-select style="width:160px;" v-model="queryParams.level" placeholder="请选择安全分级" clearable label-width="80px">
              <el-option
                v-for="dict in levelList"
                :key="dict.id"
                :label="dict.classifiedName"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="实验室负责人" prop="adminName" label-width="100px">
            <el-input
              style="width:160px;"
              maxlength="10"
              v-model="queryParams.adminName"
              placeholder="请输入姓名"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" @click="handleQuery">查询</p>
            <p class="reset-button-one" @click="resetQuery">重置</p>
          </el-form-item>
        </el-form>
        <div class="sheet-expand-box" style="height:40px;display:flex;background:rgba(1,131,250,0.1);border-radius: 5px;margin-bottom:18px;font-size:14px;">
          <i class="el-icon-warning" style="color:#0045AF;margin:10px 16px 0 14px;height:20px;width:20px;font-size:20px;display: block;"></i>
          <p class="color_99" style="margin:0;width:132px;font-size:14px;height:40px;line-height:40px;">已选择 {{selectedNum}} 项</p>
          <p class="color_one cursor_hover" style="margin:0;width:60px;font-size:14px;height:40px;line-height:40px;margin-right:20px;" @click="selectPage">全选本页</p>
          <p class="color_warn cursor_hover" style="margin:0;width:60px;font-size:14px;height:40px;line-height:40px;margin-right:20px;" @click="clearSelection">清除选项</p>
        </div>
        <el-table v-loading="loading" border :data="subjectList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
          <el-table-column type="selection" width="55" :reserve-selection="true" align="center" />
          <el-table-column label="实验室" align="left" prop="name" />
          <el-table-column label="学院" align="left" prop="deptName" />
          <el-table-column label="安全分类" align="left" prop="typeName" />
          <el-table-column label="安全分级" align="left" prop="levelName" />
          <el-table-column label="实验室负责人" align="left" prop="adminName" />
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <div style="margin-top:30px;padding-top:20px;display: flex;border-top:1px solid #dedede">
          <p style="flex:1;"></p>
          <p style="margin-right:20px;" class="reset-button-one" @click="show(2)">取消</p>
          <p class="inquire-button-one" @click="okButton">确定</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { listInfo } from "@/api/laboratory/gradeManage";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  export default {
    name: "subjectList",
    props:{

    },
    data() {
      return {
        subjectOpen:false,
        loading:false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        subjectList:[],
        //已选中数量
        selectedNum:0,
        //已选中
        ids:[],
        idData:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //分类数据
        typeList:[],
        //分级数据
        levelList:[],
      }
    },
    created(){

    },
    mounted(){
      this.getListClasstypeAll();
      this.getListClassifiedAll();
      this.listDepartments();
      this.getList();
    },
    methods:{
      //确定按钮
      okButton(){
        if(!this.ids[0]){
          this.msgError("请勾选实验室")
          return
        }
        this.$parent.takeSubjectData(this.ids,this.idData);
      },
      //获取学院
      listDepartments(){
        listDepartments().then(response => {
          this.deptList = response.data;
        });
      },
      show(data){
        let self = this;
        this.subjectOpen = !this.subjectOpen;
        if(data){
          this.queryParams.pageNum = 1;
          setTimeout(function(){
            for(let i=0;i<data.length;i++){
              self.$refs.multipleTable.toggleRowSelection(data[i],true)
            }
            self.getList();
          },100);
        }
      },
      //获取数据列表
      getList(){
        this.loading = true;
        listInfo(this.queryParams).then(response => {
          this.subjectList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {};
        this.handleQuery();
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
      //选择本页
      selectPage(){
        console.log(this.$refs.multipleTable)
        this.$refs.multipleTable.toggleAllSelection()
        // console.log(this.$refs.multipleTable.selection)
      },
      //清除选择
      clearSelection(){
        this.$refs.multipleTable.clearSelection()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.id)
        this.idData = selection.map(item => item)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      //查询安全分级
      getListClassifiedAll(){
        listClassifiedAll().then(response=>{
          if(response.code==200){
            console.log(response)
            this.levelList=response.data
          }
        })
      },
      //查询安全分类
      getListClasstypeAll(){
        listClasstypeAll().then(response=>{
          if(response.code==200){
            this.typeList=response.data;
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .subjectList{
    height:700px;
    display: flex!important;
    flex-direction: column;
  }
</style>
