<template>
  <div class="container-main" ref="main">
    <div class="search-hearder" ref="topSearch">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        >

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

    <div class="layui-table-tool" ref="tableTool">
      <el-button type="primary" size="mini" @click="handleAdd()"
        >新增</el-button
      >
      <el-button
        type="warning"
        size="mini"
        :loading="exportLoading"
        @click="handleExport"
        >导出</el-button
      >
    </div>

    <el-table
      v-loading="loading"
      :data="sourceList"
      :height="tableHeigth"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="300"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleInfo(scope.row)">
            查看
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    ></pagination>

    <!-- 添加或修改安全检测对话框 -->
    <el-dialog
      :visible.sync="open"
      width="500px"
      append-to-body
      custom-class="dialog-box"
    >
      <div slot="title" class="dialog-title">{{ title }}</div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="dialog-from"
      >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="infoOpen"
      width="1200px"
      append-to-body
      custom-class="dialog-box"
    >
      <div slot="title" class="dialog-title">{{ infoTitle }}</div>
      <el-descriptions
        title="数据来源"
        :column="2"
        border
        labelClassName="desLable"
      >
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Detection",
  //注释字典

  data() {
    return {
      tableHeigth: 0,
    };
  },
  mounted() {
    // //给表格一个固定值
    this.$nextTick(() => {
      this.tableHeigth =
        this.$refs.main.offsetHeight -
        (this.$refs.topSearch.offsetHeight +
          this.$refs.tableTool.offsetHeight) -
        46;
      this.getList();
    });
  },
};
</script>

<style lang="scss" scoped></style>
