<template>
  <div style="pointer-events: all; margin-top: 0.25rem">
    <InfoHeader
      name="当前故障信息"
      eName="Current fault information"
    ></InfoHeader>
    <InfoContent height="5.5rem">
      <div
        class="all-over"
        style="max-height: 5.5rem; overflow-y: scroll; position: relative"
      >
        <div
          class="d-flex"
          style="
            padding: 0.15rem 0.15rem;
            position: sticky;
            top: 0.006rem;
            left: 0;
            z-index: 999;
            background-color:#073070;
          "
        >
          <div class="d-flex">
            <div
              style="margin-right: 0.15rem"
              class="c-white d-flex a-c fs-16 font-weight-br"
            >
              发生时间
            </div>
            <div>
              <RangeDatePicker
                width="5rem"
                :isHms="isHms"
                @dateChange="dateChange"
              ></RangeDatePicker>
            </div>

            <div class="d-flex a-c">
              <el-pagination
                background
                layout="total,prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>

        <div>
          <el-table
            :header-cell-style="{ background: '#063070', color: '#fff' }"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="index" type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="faultName" label="故障名称" width="180">
            </el-table-column>
            <el-table-column prop="happenTime" label="发生时间" width="200">
            </el-table-column>
            <el-table-column prop="recoverTime" label="恢复时间">
            </el-table-column>
            <el-table-column prop="floor" label="楼层" width="200">
            </el-table-column>
            <el-table-column prop="cause" label="故障原因"> </el-table-column>
            <el-table-column prop="causeAnalyse" label="原因分析">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import RangeDatePicker from "@/components/rangeDatePicker/index.vue";
import { getCurrentTimeFault } from "@/api/elevator";
import moment from "moment";
export default {
  components: {
    InfoHeader,
    InfoContent,
    RangeDatePicker,
  },
  data() {
    return {
      input1: "",
      tableData: [],
      startTime: moment().subtract(3, "months").format("YYYY-MM-DD HH:mm:ss"),
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      isHms: true,
      total: 0,
      pageNum: 1,
    };
  },
  created() {
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;
      this.getCurrentTimeFaultApi();
    }
  },

  methods: {
    getCurrentTimeFaultApi() {
      getCurrentTimeFault({
        elevatorNum: this.elevatorNum,
        faultTypeKey: "fault_type",
        happenTimeStart: this.startTime,
        happenTimeEnd: this.endTime,
        pageSize: 10,
        pageNum: this.pageNum,
      }).then((res) => {
        this.tableData = res.rows;

        this.total = res.total;
      });
    },
    handleCurrentChange(e) {
      console.log(e);

      this.pageNum = e;
      this.getCurrentTimeFaultApi();
    },
    dateChange(e) {
      console.log(e);
      this.startTime = e[0];
      this.endTime = e[1];
      this.getCurrentTimeFaultApi();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-pagination span:not([class*="suffix"]) {
  color: white;
}
::v-deep .el-pagination.is-background .btn-prev {
  background: rgba(1, 13, 56, 0.9);
  border: solid 1px #409eff;
  color: white;
}
::v-deep .el-pagination.is-background .btn-prev:disabled {
  background: rgba(1, 13, 56, 0.9);
  border: solid 1px #409eff;
  color: white;
}
::v-deep .el-pagination.is-background .btn-next {
  background: rgba(1, 13, 56, 0.9);
  border: solid 1px #409eff;
  color: white;
}
::v-deep .el-pagination.is-background .el-pager li {
  background: rgba(1, 13, 56, 0.9);
  border: solid 1px #409eff;
  color: white;
}
::v-deep .el-picker-panel {
  background: #033684 !important;
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: rgba(1, 13, 56, 0.9) !important;
}
::v-deep .el-button {
  background: #03ffeb;
  color: black;
}
::v-deep .el-table__cell {
  background-color: #10295f;
  color: white;
  border-bottom: none !important;
}
::v-deep .el-input__inner {
  background: #033684;
  border: solid rgb(20, 45, 134) 1px;
}
.all-over::-webkit-scrollbar {
  display: none;
}
</style>
