<template>
  <div class="pd10" v-loading="isloading" element-loading-text="数据加载中">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="告警等级:" class="level">
        <el-select
          v-model="formData.alarmLevel"
          placeholder="请选择告警等级"
          clearable
        >
          <el-option
            v-for="item in alarmList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监测点等级:" class="box">
        <el-select
          v-model="formData.lineGrade"
          placeholder="请选择监测点等级"
          clearable
        >
          <el-option
            v-for="item in lineGradeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否处理:" class="box">
        <el-select
          v-model="formData.flag"
          placeholder="请选择处理状态"
          clearable
        >
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警类型:" class="box">
        <el-select
          v-model="formData.type"
          placeholder="请选择告警类型"
          filterable=""
          clearable
        >
          <el-option
            v-for="item in alarmTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <Timeinterval ref="interval" :interval="3"></Timeinterval
      ></el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      stripe
      :data="tableData"
      border
      header-cell-class-name="table_header"
      :height="vh + 'px'"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column
        align="center"
        prop="type"
        min-width="160"
        label="告警类型"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="occurredTime"
        min-width="180"
        label="最新发生时间"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="level"
        min-width="100"
        label="告警等级"
      >
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.level === 0" style="color: #0f0">普通</span>
          <span v-if="scope.row.level === 1" style="color: #f60">中等</span>
          <span v-if="scope.row.level === 2" style="color: #f00">严重</span> -->
          <el-tag
            type="primary"
            v-if="scope.row.level === 0"
            style="color: #fff; background: #2e8b57"
            size="small"
            >普通</el-tag
          >
          <el-tag
            type="primary"
            v-if="scope.row.level === 1"
            style="color: #fff; background: #996600"
            size="small"
            >中等</el-tag
          >
          <el-tag
            type="primary"
            v-if="scope.row.level === 2"
            style="color: #fff; background: #cc0000"
            size="small"
            >严重</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="devLineName"
        min-width="500"
        label="告警定位(装置/监测点)"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{
            "变电站名称" +
            ":" +
            scope.row.subName +
            "   " +
            "设备名称" +
            ":" +
            scope.row.devLineName
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="remark"
        label="描述"
        min-width="200"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="flag"
        min-width="100"
        label="是否处理"
      >
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.flag === 0" style="color: #f00">未处理</span>
          <span v-if="scope.row.flag === 1" style="color: #0f0">已处理</span> -->
          <el-tag
            type="primary"
            v-if="scope.row.flag === 0"
            style="color: #fff; background: #cc0000"
            size="small"
            >未处理</el-tag
          >
          <el-tag
            type="primary"
            v-if="scope.row.flag === 1"
            style="color: #fff; background: #2e8b57"
            size="small"
            >已处理</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="updateBy"
        label="处理员"
        min-width="180"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="processTime"
        min-width="180"
        label="处理时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.processTime == null">/</span>
          <span v-else>{{ scope.row.processTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lineGrade"
        min-width="150"
        label="监测点装置等级"
      ></el-table-column>
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
        min-width="240"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="deilallData(scope.row)"
            size="mini"
            icon="el-icon-share"
            >详细信息</el-button
          >
          <el-button
            icon="el-icon-warning"
            :disabled="scope.row.flag == 0 ? false : true"
            @click.stop="untreated(scope.row)"
            type="primary"
            size="mini"
            >{{ scope.row.flag == 0 ? "未处理" : "已处理" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="mt10"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formData.pageNum"
      :page-sizes="[20, 30, 40, 50, 100]"
      :page-size="formData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :close-on-click-modal="false"
      title="告警详细信息"
      class="eldialot"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-table
        stripe
        :data="tableDataDetail"
        border
        header-cell-class-name="table_header"
        height="60vh"
        v-loading="loading"
        style="width: 100%"
        :header-cell-style="{
          height: '25px',
          top: '0px',
          padding: '0px',
        }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column
          align="center"
          prop="type"
          label="告警类型"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="occurredTime"
          label="最新发生时间"
        ></el-table-column>
        <el-table-column align="center" prop="level" label="告警等级">
          <template slot-scope="scope">
            <span v-if="scope.row.level === 0" style="color: #0f0">普通</span>
            <span v-if="scope.row.level === 1" style="color: #f60">中等</span>
            <span v-if="scope.row.level === 2" style="color: #f00">严重</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark"
          label="描述"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column align="center" prop="flag" label="是否处理">
          <template slot-scope="scope">
            <span v-if="scope.row.flag === 0" style="color: #f00">未处理</span>
            <span v-if="scope.row.flag === 1" style="color: #0f0">已处理</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updateBy"
          label="处理员"
        ></el-table-column>
        <el-table-column align="center" prop="processTime" label="处理时间">
          <template slot-scope="scope">
            <span v-if="scope.row.processTime == null">/</span>
            <span v-else>{{ scope.row.processTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        background
        class="mt10"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    </el-dialog>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import {
  alarmList,
  alarmDetail,
  updateAlarmInfo,
} from "@/api/BusinessAdministrator/AlarmInformation";
import Timeinterval from "@/views/components/TimePicker/index4";

// import alarm from "@/api/device/alarm";
export default {
  name: "alarminformation",
  components: { Timeinterval },
  data() {
    return {
      isloading: false,
      loading: false,
      dialogVisible: false,
      vh: undefined,
      item: ["", ""],
      formData: {
        alarmLevel: "",
        devLineId: "",
        endTime: "",
        flag: "",
        lineGrade: "",
        pageNum: 1,
        pageSize: 20,
        processTime: "",
        startTime: "",
        type: "",
      },
      total: undefined,
      lineGradeList: [],
      lineGrade: "",
      statusList: [
        { id: 0, name: "未处理" },
        { id: 1, name: "已处理" },
      ],
      alarmTypeList: [],
      alarmType: "",
      alarmList: [
        { id: 0, name: "普通" },
        { id: 1, name: "中等" },
        { id: 2, name: "严重" },
      ],
      tableData: [],
      tableDataDetail: [],
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
  
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
    this.onSubmit();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 97;
          
        },
    //查询
    onSubmit() {
      if (
        this.formData.alarmLevel !== "" ||
        this.formData.lineGrade !== "" ||
        this.formData.flag !== "" ||
        this.formData.type !== ""
      ) {
        this.formData.pageNum = 1;
      }
      this.isloading = true;
      this.item = this.$refs.interval.timeValue;
      this.formData.startTime = this.item[0];
      this.formData.endTime = this.item[1];
      alarmList(this.formData).then((res) => {
        this.isloading = false;
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    //分页查询用
    onSubmit1() {
      this.isloading = true;
      this.item = this.$refs.interval.timeValue;
      this.formData.startTime = this.item[0];
      this.formData.endTime = this.item[1];
      alarmList(this.formData).then((res) => {
        this.isloading = false;
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.onSubmit1();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.onSubmit1();
    },
    //详细信息
    deilallData(row) {
      this.dialogVisible = true;
      let data = {
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        alarmLevel: row.level,
        flag: row.flag,
        type: row.typeId,
        devLineId: row.devLineId,
        processTime: row.processTime,
      };
      this.loading = true;
      alarmDetail(data).then((res) => {
        if (res.code === "A0000") {
          this.tableDataDetail = res.data;
          this.loading = false;
        }
      });
    },
    // handleClose() {
    //   this.dialogVisible = false;
    // },
    //获取类型
    getclassificationData() {
      //监测点等级
      this.lineGradeList = dicData("Dev_Level", []);
      this.formData.lineGrade = this.lineGradeList[0].id;
      //告警类型
      this.alarmTypeList = dicData("alarm_Type", []);
    },
    //未处理
    untreated(row) {
      if (row.type == "系统对时启动异常") {
        this.$router.push({
          path: "/device-boot/deviceter",
          name: "terminalmage",
          params: {
            id: row.devLineId,
            type: row.type,
          },
        });
      } else if (row.type == "暂降事件推送异常") {
        this.$router.push("/BusinessAdministrator/LogManagement/DropPush");
      } else if (row.type == "流量告警") {
        this.$router.push("/BusinessAdministrator/management/PlanTraffic");
      } else if (row.type == "时钟出错") {
        this.$router.push({
          path: "/device-boot/deviceter",
          name: "terminalmage",
          params: {
            id: row.devLineId,
            type: row.type,
          },
        });
      } else if (row.type == "统计闻隔时间设置出错") {
        this.$router.push({
          path: "/device-boot/deviceter",
          name: "terminalmage",
          params: {
            id: row.devLineId,
            type: row.type,
          },
        });
      } else if (row.type == "统计间隔不匹配") {
        this.$router.push({
          path: "/device-boot/deviceter",
          name: "terminalmage",
          params: {
            id: row.devLineId,
            type: row.type,
          },
        });
      } else if (row.type == "接线方式不匹配") {
        this.$router.push({
          path: "/device-boot/deviceter",
          name: "terminalmage",
          params: {
            id: row.devLineId,
            type: row.type,
          },
        });
      } else if (row.type == "接线方式设置出错") {
        this.$router.push({
          path: "/device-boot/deviceter",
          name: "terminalmage",
          params: {
            id: row.devLineId,
            type: row.type,
          },
        });
      }
      let data = {
        type: row.typeId,
        devLineId: row.devLineId,
      };
      updateAlarmInfo(data).then((res) => {
        if (res.code === "A0000") {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.onSubmit();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  height: 36px;
}
.el-table__fixed,
.el-table__fixed-right {
  height: calc(100% - 20px) !important;
}
.el-table__fixed-body-wrapper {
  height: 100 !important;
}
.el-table__fixed-body-wrapper .el-table__body {
  padding-bottom: 20px; // 滚动条高度
}
::v-deep .box {
  .el-select {
    width: 160px;
  }
}
::v-deep .level {
  .el-select {
    width: 145px;
  }
}
// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>
