<template>
  <div style="padding: 0.2% 0.5%">
    <el-row>
      <el-col :span="12">
        <span style="ont-size: 14px">告警等级:</span>
        <el-select
          v-model="alarmLevel"
          placeholder="请选择告警等级"
          style="width: 15%"
        >
          <el-option
            v-for="item in alarmList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span style="font-size: 14px">装置/监测点等级:</span>
        <el-select
          v-model="lineGrade"
          placeholder="请选择装置/监测点等级"
          style="width: 15%"
        >
          <el-option
            v-for="item in lineGradeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span style="font-size: 14px">处理状态:</span>
        <el-select
          v-model="status"
          placeholder="请选择处理状态"
          style="width: 15%"
        >
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span style="font-size: 14px">告警类型:</span>
        <el-select
          v-model="alarmType"
          placeholder="请选择告警类型"
          style="width: 15%"
        >
          <el-option
            v-for="item in alarmTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <timepicker
          @querfromdata="querfromdata"
          :interval="interval"
        ></timepicker>
      </el-col>
    </el-row>
    <el-row style="margin-top: 0.2%">
      <el-table
        stripe
        stripe
        :data="tableData"
        border
        :height="height"
        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: #ff6600"
              >普通</span
            >
            <span v-if="scope.row.level === 1" style="color: #009966"
              >中等</span
            >
            <span v-if="scope.row.level === 2" style="color: #009966"
              >严重</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="devLineName"
          label="告警定位(装置/监测点)"
          :show-overflow-tooltip="true"
        ></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: #ff6600"
              >未处理</span
            >
            <span v-if="scope.row.flag === 1" style="color: #009966"
              >已处理</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updateBy"
          label="处理员"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="processTime"
          label="处理时间"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="lineGrade"
          label="监测点装置等级"
        ></el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="220">
          <template slot-scope="scope">
            <el-button type="primary" @click="deilallData(scope.row)"
              >详细信息</el-button
            >
            <el-button v-if="scope.row.flag === 1" disabled type="primary"
              >已处理</el-button
            >
            <el-button v-if="scope.row.flag === 0" type="primary"
              >未处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>

      <el-dialog
        :close-on-click-modal="false"
        title="告警详细信息"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <el-table
          stripe
          
          :data="tableDataDetail"
          border
          height="60vh"
          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="告警等级"
          ></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: #ff6600"
                >未处理</span
              >
              <span v-if="scope.row.flag === 1" style="color: #009966"
                >已处理</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="updateBy"
            label="处理员"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="processTime"
            label="处理时间"
          ></el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[50, 100, 150, 200]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
        >
        </el-pagination>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
import { dicData } from "@/assets/commjs/dictypeData";
import alarm from "@/api/device/alarm";
export default {
  components: {
    timepicker,
  },
  data() {
    return {
      interval: 3,
      height: "",
      dialogVisible: false,
      lineGradeList: [],
      lineGrade: "",
      startTime: "",
      endTime: "",
      statusList: [
        { id: "", name: "全部" },
        { id: 0, name: "未处理" },
        { id: 1, name: "已处理" },
      ],
      status: "",
      loading: false,
      searchValue: "",
      alarmTypeList: [],
      alarmType: "",
      alarmLevel: "",
      alarmList: [
        { id: "", name: "全部" },
        { id: 0, name: "普通" },
        { id: 1, name: "中等" },
        { id: 2, name: "严重" },
      ],
      tableData: [],
      tableDataDetail: [],
      //分页
      pageData: {
        currentPage: 1,
        pageSize: 50,
        total: 0,
      },
    };
  },
  created() {
    this.getAlarmGradeList();
    this.getLineGradeList();
  },
  mounted() {
    this.height = tableheight() + "px";
  },
  methods: {
    querfromdata(data) {
      this.startTime = data[0];
      this.endTime = data[1];
      this.getList();
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    deilallData(row) {
      this.dialogVisible = true;
      this.getListDetail(row);
    },
    handleClose() {
      this.dialogVisible = false;
    },

    //获取所有告警类型
    getAlarmGradeList() {
      var code = "alarm_Type";
      this.alarmTypeList = dicData(code, [], 1);
    },
    //获取所有监测点等级
    getLineGradeList() {
      var code = "Dev_Level";
      this.lineGradeList = dicData(code, [], 1);
    },
    //获取主列表
    getList() {
      let data = {
        startTime: this.startTime,
        endTime: this.endTime,
        lineGrade: this.lineGrade,
        alarmLevel: this.alarmLevel,
        flag: this.status,
        type: this.alarmType,
        pageNum: this.pageData.currentPage,
        pageSize: this.pageData.pageSize,
        searchValue: this.searchValue,
      };
      this.loading = true;
      alarm.getList(data).then((response) => {
        if (response.code === "A0000") {
          let data = response.data;
          this.tableData = data.records;
          this.loading = false;
          this.pageData.currentPage = data.current;
          this.pageData.pageSize = data.size;
          this.pageData.total = data.total;
        }
      });
    },
    //获取详情列表
    getListDetail(row) {
      let data = {
        startTime: this.startTime,
        endTime: this.endTime,
        alarmLevel: row.level,
        flag: row.flag,
        type: row.typeId,
        devLineId: row.devLineId,
        processTime: row.processTime,
      };
      this.loading = true;
      alarm.getListDetail(data).then((response) => {
        if (response.code === "A0000") {
          this.tableDataDetail = response.data;
          this.loading = false;
        }
      });
    },
  },
};
</script>
