<template>
  <div class="warntab">
    <div class="warntab-head">
      <span>最近报警</span>
      <div>
        <el-button
          @click="tableData2Show=false,tableData1Show=true"
          :class="{elbtnSel:tableData1Show}"
        >故障</el-button>
        <el-button
          @click="tableData1Show=false,tableData2Show=true"
          :class="{elbtnSel:tableData2Show}"
        >报警</el-button>
      </div>
    </div>
    <div class="warntab-table">
      <el-table tooltip-effect="light" :data="getRuntimeFault" border style="width: 100%" max-height="1000" v-show="tableData1Show">
        <el-table-column label="时间" width="170"  show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{scope.row.alertTime | timeFilter}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="faultInfo.windturbineName" label="设备" width="130"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="alertText" label="故障信息" width="200"  show-overflow-tooltip></el-table-column>
        <el-table-column label="当前报警"  show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              style="cursor: pointer;"
              @click="godevicealarmdetails(scope.row.faultInfo)"
            >{{scope.row.agCount}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="getRuntimeAlarm" border style="width: 100%"  max-height="1000" v-show="tableData2Show">
        <el-table-column label="时间" width="170">
          <template slot-scope="scope">
            <div>{{scope.row.lastUpdateTime | timeFilter}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="objectName" label="设备" width="150"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="alertText" label="故障信息"  show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <el-dialog
      class="devicealarmdetails"
      width="1200px"
      top="18vh"
      :title="clickid"
      :visible.sync="devicealarmdetails"
      :modal-append-to-body="false" 
    >
      <devicealarmdetails :objectid="objectid"></devicealarmdetails>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>
<script>
import devicealarmdetails from "./DeviceAlarmDetails";
import { calcsubmitGetRealTimeAlarmList } from "../assets/js/calcClient";
import { projectconfig } from "../../static/projectconfig";
import { dateFormat } from "../../assets/js/common";
export default {
  data() {
    return {
      clickid: "",
      objectid: "",
      devicealarmdetails: false,
      tableData1Show: true,
      tableData2Show: false,
      searchCondition: {
        objectId: "",
        stationId: "",
        startTime: "",
        endTime: "",
        rank: "",
        cateGory1: "",
        cateGory2: "",
        keyText: "",
        pageIndex: 1,
        pageSize: 100,
        StationName: "全部",
        RankText: "全部",
        CateGoryText: "全部"
      }
    };
  },
  components: {
    devicealarmdetails
  },
  methods: {
    godevicealarmdetails(faultInfo) {
      this.$store.state.machinmeAlarmDetails = [];
        this.clickid = "设备报警详情 -- [" + faultInfo.windturbineName + "]";
        this.objectid = faultInfo.objectId;
        this.searchCondition.objectId = this.objectid;
        this.searchCondition.cateGory1 = faultInfo.category1;
        this.searchCondition.cateGory1 =
        this.searchCondition.cateGory1 == "FJ" ? "windturbine": this.searchCondition.cateGory1;
        calcsubmitGetRealTimeAlarmList(this.searchCondition);
      
      this.devicealarmdetails = true;
    }
  },
  computed: {
    getRuntimeFault() {
      return this.$store.state.runtimeFault;
    },
    getRuntimeAlarm() {
      return this.$store.state.runtimeAlarm;
    }
  },
  filters: {
    timeFilter(value) {
      if (value) return dateFormat("yyyy-MM-dd HH:mm:ss", new Date(value));
      else return "";
    }
  }
};
</script>
<style lang="less" scope>
.warntab {
  width: 580px;
  // height: 765px;
  background-color: #eee;
  .warntab-head {
    width: 500px;
    height: 30px;
    padding: 3px 50px 3px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-button {
      padding: 7px 30px;
    }
    .elbtnSel {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
  .warntab-table {
    height: 77vh;
    overflow-y: hidden;
    overflow-x: hidden;
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow-x: hidden;
    }
    .el-table td,
    .el-table th {
      padding: 0px 0;
    }
  }
}
.devicealarmdetails {
  .el-dialog {
    right: none !important;
    bottom: none !important;
    position: relative !important;
    margin: 18vh auto 50px !important;
    border-radius: 2px !important;
    .el-dialog__header {
      padding: 15px 16px!important;
      background-color: #5e5e5e!important;
    }
    .el-dialog__body {
      padding: 0px 10px!important;
      background-color: #eee!important;
    }
    .el-dialog__footer {
      padding: 0!important;
      background-color: #eee!important;
    }
  }
}
</style>
