<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="部门名称" prop="deptName">
        <el-input
          v-model="queryParams.name"
          placeholder="设备名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="monitorList" >
      <el-table-column label="设备名称" align="center" prop="name" />

      <el-table-column label="设备号" align="center" prop="indexCode" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
  import { listReservePlan, getReservePlan, delReservePlan, addReservePlan, updateReservePlan, exportReservePlan } from "@/api/system/plan";
  import { monitorList } from "@/api/hik/hik"
  export default {
    name: "hik",
    components: {
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name:''
        },
        reservePlanList:[],
        monitorList:[],
        // 总条数
        total: 0,

      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询应急处置方案列表 */
      getList() {
        this.loading = true;
        monitorList(this.queryParams).then(response => {
          this.monitorList = response.data.data.list;
          this.total = response.data.data.total;
          this.loading = false;
          //console.log(response)
      });

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.name="";
        this.handleQuery();
      }
    }
  };
</script>
<style>
  .division{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
  }
  .dbtn {
    display: inline-block;
    line-height: normal;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
    border-radius: 3px;
    border-style: solid;
    border-width: 0;
    color: rgb(48, 180, 107);
  }
  .detailput{
    border: 0;
    font-weight: bolder;
    font-size: 15px;
  }
  .detailput:focus {
    outline:none;
    border: 0;
  }
  .titletitle{
    background: #1c84c6;
    color: white;height:
    20px;line-height:
    20px;text-align: center;
    margin-bottom: 10px;
  }
  .textarea{
    height: 300px;
    width: 100%;
    resize: none;
    border: #99a9bf 0.5px solid;
  }
  .textarea:focus {
    outline:none;
    border: #99a9bf 0.5px solid;
  }
  .div-kuang{
    background: white;
    padding-top:20px ;
    padding-right: 20px;
    border-radius: 10px;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .el-select{
    width: 100%;
  }
  ::v-deep .el-dialog__header{
    border-bottom: 1px solid #ccc;
  }
  ::v-deep .el-dialog{
    background: #f7f7f7;
  }
</style>
