<!--校院巡查组-->
<template>
  <div class="app-container inspectionGroup">
    <div class="title-box">
      <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxLength="30"
            v-model="queryParams.searchValue"
            placeholder="巡查组组名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="巡查层级" prop="data1">
          <el-select v-model="queryParams.data1" clearable placeholder="请选择层级" style="width: 150px">
            <el-option
              v-for="item in optionsOne"
              :key="item.key"
              :label="item.label"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="data2" label-width="60px">
          <el-select v-model="queryParams.data2" clearable placeholder="请选择状态" style="width: 150px">
            <el-option
              v-for="item in optionsTwo"
              :key="item.key"
              :label="item.label"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-col :span="1.5" v-hasPermi="['laboratory:hardware7:add']">
            <p class="inquire-button-one"
               style="width:130px;"
               @click="pageToggle(1)"
            ><i class="el-icon-plus"></i>添加巡察组</p>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-box">
      <el-table  border :data="tableList" ref="multipleTable">
        <el-table-column label="序号"  width="60" align="center"  type="index"/>
        <el-table-column label="巡查组名称" align="center" prop="hardwareNum"/>
        <el-table-column label="巡查层级" align="center" prop="deptName" width="200"/>
        <el-table-column label="成员人数" align="center" prop="deptName" width="150"/>
        <el-table-column label="是否启用" align="center" prop="deptName" width="185">

          <template slot-scope="scope">
            <div style="width:70px;margin-left:50px;">
              <el-switch
                @click.native="switchClick(scope.row)"
                class="switch"
                v-model="scope.row.exhaustType"
                :active-value="1"
                :inactive-value="0"
                active-color="#0183FA"
                inactive-color="#E0E0E0"
                active-text="启用"
                inactive-text="停用"
                disabled
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作人" align="center" prop="deptName" width="150"/>
        <el-table-column label="操作时间" align="center" prop="deptName" width="250"/>
        <el-table-column label="操作" align="center" prop="deptName" width="200">
          <div class="table-button-box">
            <p class="table-button-null"></p>
            <p class="table-button-p">编辑</p>
            <p class="table-button-p">删除</p>
            <p class="table-button-null"></p>
          </div>
        </el-table-column>
      </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>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data(){
      return{
        queryParams:{},
        tableList:[{}],
        total:0,
        optionsOne:[{key:1,label:"校级"},{key:2,label:"院级"}],
        optionsTwo:[{key:1,label:"启用"},{key:0,label:"停用"}],
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      // 开关
      switchClick(){

      },
      //获取数据列表
      getList(){
        // this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
        // this.queryParamsData.type = 'RFID_RECOGNIZER';
        // listHardware(this.queryParamsData).then(response => {
        //   this.total = response.total;
        //   this.tableList = response.rows;
        // });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams,'pageNum',1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          data1:"",
          data2:"",
        });
        this.handleQuery();
      },
    }
  }
</script>

<style scoped lang="scss">
  .inspectionGroup {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    .title-box{
      padding-top:20px;
      border-bottom:1px solid #dedede;
    }
    .content-box{
      flex: 1;
      display: flex;
      flex-direction: column;
      padding:20px;
    }
  }
</style>
