<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>自定义报警
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row type="flex" justify="space-between">
        <div class="handle-box" style="margin-bottom:10px">
          <el-button
            type="primary"
            icon="el-icon-lx-add"
            class="handle-edit mr10"
            @click="handleInsert"
          >新增记录</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            class="handle-refresh mr10"
            @click="btnRefreshClickHandle"
          >刷新</el-button>
          <span>
            <span class="handle-waring" style="margin:0 10px">{{total}}</span>条配置规则
          </span>
        </div>
        <div style="display:flex;flex-direction:row;margin-bottom:10px">
          <el-input placeholder="请输入名称" v-model="query.name" class="mr10" clearable></el-input>
          <el-button
            icon="el-icon-search"
            type="primary"
            size="mini"
            width="100"
            @click="btnTableQueryClickHandle"
          >搜索</el-button>
        </div>
      </el-row>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-name="table-header"
        :highlight-current-row="true"
      >
         <el-table-column label="名称" align="left" prop="name" min-width="50" />
          <el-table-column label="描述" align="left" prop="description" />
        <el-table-column label="表达式" align="left" prop="expression" />
        <el-table-column label="级别" align="center" prop="rank" min-width="20">
          <template slot-scope="scope">
             <span>{{scope.row.rank | rankConvert}}</span>
            </template>
        </el-table-column><el-table-column label="工艺环节" align="center" prop="parts" min-width="30">
          <template slot-scope="scope">
            <span>{{scope.row.part | partConvert}}</span>
          </template>
        </el-table-column>
          <el-table-column label="是否启用" align="center" prop="enabled" min-width="20">
          <template slot-scope="scope">{{scope.row.enabled | enabledConvert}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              round
              size="mini"
              icon="el-icon-lx-edit"
              @click="handleEditClick(scope.$index, scope.row)"
            >编辑</el-button>
            <!-- <el-button type="primary" plain round size="mini" icon="el-icon-search" @click="handleViewClick(scope.$index, scope.row)">查看</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pagenum"
          :page-size="query.pagesize"
          :total="total"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <edit_form
      :isVisible="editVisible"
      :dialogStatus="dialogStatus"
      :rowData="rowData"
      @cbFunc="cbFunc"
    />
  </div>
</template>
<script>
import axios from "axios";
import { alert_rule_fetchTableData } from "../../api/requestAPI";
import edit_form from "./edit_form";

const tHeader = [
  "id",
  "规则名称",
  "报警类别（1：风气；2：电气）",
  "报警级别（1：低；2：中低；3：中；4：中高；5：高）",
  "是否启用（0：停用；1：启用）",
  "风场",
  "风机类型",
  "所属部件",
  "表达式",
  "规则描述",
];
export default {
  name: "basetable3",
  components: {
    edit_form,
  },
  data() {
    return {
      editVisible: false,
      dialogStatus: 0, //窗口状态：0-新增；1-修改；2-查看
      query: {
        pagenum: 1,
        pagesize: 20,
        name: "",
      },
      tableData: [],
      total: 0,
      rowData: {
        name: "",
        description: "",
        expression: "",
        rank: "",
        part: "",
        enabled: 1,
      },
      exportShow: false,
      thead: {
        id: "id",
        规则名称: "name",
        "报警类别（1：风气；2：电气）": "category",
        "报警级别（1：低；2：中低；3：中；4：中高；5：高）": "rank",
        "是否启用（0：停用；1：启用）": "enabled",        
        所属部件: "parts",
        表达式: "expression",
        规则描述: "description",
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      //获取列表数据
      alert_rule_fetchTableData(this.query)
        .then((res) => {
          if (res.status == 5000 || res.status == 5001) {
            this.$message.error("未登录或登录失效");
            this.$router.push("/login");
            return;
          } else if (res.status == 5002) {
            this.$message.error(res.msg);
          } else {
            this.tableData = res.data.dataList;
            this.total = res.data.total;
         
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("与服务器断开连接");
        });
    },
    // 点击新增
    handleInsert() {
      this.dialogStatus = 0;
      this.rowData = {};
      this.editVisible = true;
    },
    // 编辑事件
    handleEditClick(index, row) {
      this.dialogStatus = 1;
      this.rowData = row;

      this.editVisible = true;
    },

    // 条件查询表格数据
    btnTableQueryClickHandle() {
      this.getData();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pagenum", val);
      this.getData();
    },
    // 列表刷新
    btnRefreshClickHandle() {
      this.query = {
        pagenum: 1,
        pagesize: 20,
        name: "",
      };
      this.getData();
    },
    // 接收窗体返回
    cbFunc(val) {
      this.editVisible = val;
      this.getData();
    },
 

  },
  filters: {
    // 级别
    rankConvert(val) {
      if (val === 1) {
        return "低";
      } else if (val === 2) {
        return "中低";
      } else if (val === 3) {
        return "中";
      } else if (val === 4) {
        return "中高";
      } else if (val === 5) {
        return "高";
      }
    },
  
    // 状态
    enabledConvert(val) {
      if (val === false) {
        return "停用";
      } else if (val === true) {
        return "启用";
      }
    },
    // 关联部件
    partConvert(val) {
      switch (val) {
        case "pretreatment":
          return "预处理";
          break;
        case "drying":
          return "干燥";
          break;
        case "evaporation":
          return "蒸发";
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
.mr10 {
  margin-right: 10px;
}
.el-button + .el-button {
  margin-left: 10px;
}
</style>