<template>
  <div class="fault-info" v-if="!!total">
    <InfoHeader name="当前故障信息" eName="Current fault information"></InfoHeader>
    <InfoContent height="auto">
      <div class="fault-content">
        <div class="filter-bar">
          <div class="filter-item">
            <span class="label">发生时间</span>
            <VantCalendarPicker
              width="3.2rem"
              :isHms="isHms"
              @dateChange="dateChange"
            ></VantCalendarPicker>
          </div>
        </div>

        <div class="fault-list">
          <div class="fault-item" v-for="(item, index) in tableData" :key="index">
            <div class="item-header">
              <span class="index">{{index + 1}}</span>
              <span class="name">{{item.faultName}}</span>
            </div>
            <div class="item-body">
              <div class="info-row">
                <span class="label">发生时间:</span>
                <span class="value">{{item.happenTime}}</span>
              </div>
              <div class="info-row">
                <span class="label">恢复时间:</span>
                <span class="value">{{item.recoverTime}}</span>
              </div>
              <div class="info-row">
                <span class="label">楼层:</span>
                <span class="value">{{item.floor}}</span>
              </div>
              <div class="info-row">
                <span class="label">故障原因:</span>
                <span class="value">{{item.cause}}</span>
              </div>
              <div class="info-row">
                <span class="label">原因分析:</span>
                <span class="value">{{item.causeAnalyse}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="pagination">
          <van-pagination
            v-model="pageNum"
            :total-items="total"
            :items-per-page="3"
            :show-page-size="3"
            force-ellipses
            @change="handleCurrentChange"
          />
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import VantCalendarPicker from "@/components/VantCalendarPicker/index.vue";
import { getCurrentTimeFault } from "@/api/elevator";
import moment from "moment";

export default {
  name: 'CurrentFaultInfo',
  components: {
    InfoHeader,
    InfoContent,
    VantCalendarPicker,
  },
  data() {
    return {
      elevatorNum: "",
      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: 3,
        pageNum: this.pageNum,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getCurrentTimeFaultApi();
    },
    dateChange(dates) {
      this.startTime = dates[0];
      this.endTime = dates[1];
      this.getCurrentTimeFaultApi();
    },
  },
};
</script>

<style lang="scss" scoped>
.fault-info {
  margin-bottom: 0.3rem;

  .fault-content {
    .filter-bar {
      padding: 0.3rem;
      background: rgba(16, 41, 95, 0.8);
      border-radius: 0.1rem;
      margin-bottom: 0.3rem;

      .filter-item {
        display: flex;
        align-items: center;

        .label {
          color: #fff;
          font-size: 0.26rem;
          margin-right: 0.2rem;
        }
      }
    }

    .fault-list {
      .fault-item {
        background: rgba(16, 41, 95, 0.8);
        border-radius: 0.1rem;
        margin-bottom: 0.3rem;
        overflow: hidden;

        .item-header {
          background: rgba(3, 54, 132, 0.3);
          padding: 0.2rem;
          display: flex;
          align-items: center;

          .index {
            background: #02dff6;
            color: #000;
            padding: 0.1rem 0.2rem;
            border-radius: 0.1rem;
            font-size: 0.24rem;
            margin-right: 0.2rem;
          }

          .name {
            color: #fff;
            font-size: 0.26rem;
            font-weight: bold;
          }
        }

        .item-body {
          padding: 0.2rem;

          .info-row {
            display: flex;
            margin-bottom: 0.15rem;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              width: 1.6rem;
              color: rgba(255, 255, 255, 0.8);
              font-size: 0.24rem;
            }

            .value {
              flex: 1;
              color: #02dff6;
              font-size: 0.24rem;
            }
          }
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 0.3rem;
      padding-bottom: 0.2rem;
    }
  }
}

::v-deep {
  .el-pagination {
    .btn-prev,
    .btn-next {
      background-color: rgba(3, 54, 132, 0.3);
      color: #fff;
    }

    .el-pager li {
      background-color: rgba(3, 54, 132, 0.3);
      color: #fff;

      &.active {
        background-color: #02dff6;
        color: #000;
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;

  ::v-deep .van-pagination {
    .van-pagination__item {
      background: rgba(3, 54, 132, 0.3);
      color: #fff;
      
      &--active {
        background-color: #02dff6;
        color: #000;
      }
    }

    .van-pagination__prev,
    .van-pagination__next {
      background: rgba(3, 54, 132, 0.3);
      color: #fff;
    }
  }
}
</style>