<template>
  <div class="app-container">
    <el-form :model="query" ref="query" :inline="true"  >
      <el-form-item label="防区名:" >
        <el-input
          v-model="query.guardCode"
            placeholder="请输入防区名"
            clearable
        />
      </el-form-item>
      <el-form-item label="处理状态:" >
        <el-select v-model="status_value" placeholder="请选择处理状态"  @change="select_status" clearable>
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="right">
        <el-button  plain size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="getData()"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      id="out-table"
      :data="tableData"
      stripe
      @selection-change="handleSelectionChange"
      border
      style="margin-top:20px"
    >
      <el-table-column prop="cidcode" label="设防码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cidlevel" label="设防级别" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cidmemo" label="设防内容" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cidtype" label="设防类型" show-overflow-tooltip></el-table-column>
      <el-table-column prop="commType" label="连接类型" show-overflow-tooltip>
        <template  slot-scope="scope">
            {{scope.row.commType == "1" ? "网络" : scope.row.commType == "2" ? "串口" :""}}
        </template>
      </el-table-column>
      <el-table-column prop="connect" label="主机连接号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="eventFlag" label="报警类型" show-overflow-tooltip>
        <template  slot-scope="scope">
            {{scope.row.eventFlag == "1" ? "主机事件" : scope.row.eventFlag == "2" ? "dk903键盘事件" :""}}
        </template>
      </el-table-column>
      <el-table-column prop="eventtriger" label="事件触发" show-overflow-tooltip>
        <template  slot-scope="scope">
            {{scope.row.eventtriger == "1" ? "恢复事件" : scope.row.eventtriger == "2" ? "触发事件" :""}}
        </template>
      </el-table-column>
      <el-table-column prop="guardCode" label="防区名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="handler" label="处理人" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ip" label="IP地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="message" label="消息类型" show-overflow-tooltip></el-table-column>
      <el-table-column prop="partCode" label="分区名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="告警处理状态" show-overflow-tooltip>
        <template  slot-scope="scope">
            {{scope.row.status == "0" ? "未处理" : scope.row.status == "1" ? "已处理" :""}}
        </template>
      </el-table-column>
      <el-table-column prop="creatTime" label="告警上传时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="updateTime" label="告警处理时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == '0'"
            class="lans"
            @click="handleUpdate(scope.$index, scope.row)"
            >处置</el-button
          >
          <el-button
            class="hongs"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="处置" :visible.sync="dialogFormVisible">
      <el-form :model="form" style="width:87%">
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input
            v-model="form.remark"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false"
          plain
          >关 闭</el-button
        >
        <el-button type="primary" @click="updatePerimeterAlarm()"
          >处 理</el-button
        >
      </div>
    </el-dialog>
    <el-pagination v-if="paginationStatus"
      background
      @current-change="handleCurrentChange"
      :page-sizes="[10, 15, 20, 30]"
      @size-change="handleSizeChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
import api from "@/api/alarm/alarm-log";
export default {
  name: "javascriptthree",
  data() {
    return {
      multipleSelection: [],

      dialogFormVisible: false,
      form: {
        id: "",
        remark: "",
      },
      formLabelWidth: "120px",

      //单选
      radio: "1",
      radio2: "1",

      //存储列表数据
      tableData: [],
      //存储列表总数
      totalCount: 0,
      //列表每页条目数
      pageSize: 15,
      //开始页
      pageNo: 1,
      //存储动态列
      cols: [],
      //存储处理状态
      status: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "未处理",
        },
        {
          value: 1,
          label: "已处理",
        },
      ],
      //存储处理状态值
      status_value: undefined,
      //存储防区名
      guardCode_value: "",
      query:{
        //列表每页条目数
        pageSize: 15,
        //开始页
        pageNo: 1,
        status:undefined,
        guardCode:undefined
      },
      //表格自适应高度
      tableHeight:undefined,
      paginationStatus:false,
    };
  },
  mounted() {

    this.getData()
  },
  methods: {
    /** 重置按钮操作 */
    resetQuery() {
      this.status_value = undefined
      this.query = {
        //列表每页条目数
        pageSize: 15,
        //开始页
        pageNo: 1,
        status:undefined,
        guardCode:undefined
      },
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getData();
    },
    //处置
    handleUpdate(index, row) {
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.remark = row.remark;
    },
    updatePerimeterAlarm() {
      api.updatePerimeterAlarm(this.form).then((Response) => {
        if (Response.status == "SUCCESS") {
          this.$message({
            type: "success",
            message: "处理成功!",
          });
          this.dialogFormVisible = false;
          this.getData()
        }
      });
    },
    //查询列表
    getData() {
      api.queryPerimeterAlarm(this.query).then((Response) => {
        this.tableData = Response.data.pageList;
        this.totalCount = Response.data.totalCount;
        this.paginationStatus = true
      });
    },
    formatJson(filterVal, data) {
      return data.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    //定义导出Excel表格事件
    exportExcel() {
      api
        .perimeterAlarmExel(this.guardCode_value, this.status_value)
        .then((request) => {
          import("@/vendor/Export2Excel").then((excel) => {
            const tHeader = [];
            const filterVal = [];
            for (let i = 0; i < this.cols.length; i++) {
              tHeader.push(this.cols[i].label);
              filterVal.push(this.cols[i].prop);
            }
            const data = this.formatJson(filterVal, request.data);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: "table-list",
            });
          });
        });
    },
    handleDelete(index, row) {
      this.$confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.perimeterAlarmDel({id:row.id}).then((request) => {
            this.$message.success("删除成功")
            this.getData()

          });
        })
        .catch(() => {
          this.$message.info("已取消删除")
        });
    },
    batchDelete() {
      let multData = this.multipleSelection;
      let tableData = this.tableData;
      let multDataLen = multData.length;
      let tableDataLen = tableData.length;

      for (let i = 0; i < multDataLen; i++) {
        for (let y = 0; y < tableDataLen; y++) {
          if (JSON.stringify(tableData[y]) == JSON.stringify(multData[i])) {
            //判断是否相等，相等就删除
            this.tableData.splice(y, 1);
          }
        }
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //改变起始页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.query.pageNo = this.pageNo
      this.getData()
    },
    //改变每条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.query.pageSize = this.pageSize
      this.getData()
    },
    //select_status状态下拉框change触发事件
    select_status(value){
      this.query.status = value
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        已处理: "success",
        未处理: "info",
      };
      return statusMap[status];
    },
  },
};
</script>
<style>
.el-radio {
  width: 70px;
}
.handled {
  color: #8dcf6e;
}
.unhandle {
  color: #fe5d0e;
}
</style>
