<template>
  <div class="right1-container">
    <InfoHeader
      name="维保工作统计"
      eName="Maintenance work statistics"
    ></InfoHeader>
    <InfoContent height="auto">
      <div class="stats-grid">
        <div class="stats-item">
          <div class="stats-label">维保工作总数</div>
          <div class="stats-value">{{ workTotal }}</div>
        </div>
        <div class="stats-item">
          <div class="stats-label">超期维保工作数</div>
          <div class="stats-value">{{ overdueTaskTotal }}</div>
        </div>
        <div class="stats-item">
          <div class="stats-label">维保工作完成数</div>
          <div class="stats-value">{{ completeWorkTotal }}</div>
        </div>
        <div class="stats-item">
          <div class="stats-label">超期维保电梯数</div>
          <div class="stats-value">{{ overdueElevatorTotal }}</div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import { getElevatorMaintenanceTotal } from "@/api/elevator";

export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      // maintenanceName: "",
      overdueTaskTotal: 0,
      completeWorkTotal: 0,
      overdueElevatorTotal: 0,
      workTotal: 0,
    };
  },
  inject: ['maintenanceNameProvider'],
  computed: {
    maintenanceName: {
      get() {
        return this.maintenanceNameProvider.get()
      }
    }
  },
  created() {
    this.getElevatorMaintenanceTotalApi();
    this.$EventBus.$on("maintenanceName", () => {
      this.getElevatorMaintenanceTotalApi();
    });
  },
  methods: {
    async getElevatorMaintenanceTotalApi() {
      console.log('maintenanceName', this.maintenanceName);
      const res = await getElevatorMaintenanceTotal({
        maintenanceName: this.maintenanceName,
      });
      this.overdueTaskTotal = res.data.overdueTaskTotal;
      this.completeWorkTotal = res.data.completeWorkTotal;
      this.overdueElevatorTotal = res.data.overdueElevatorTotal;
      this.workTotal = res.data.workTotal;
    },
  },
};
</script>
<style lang="scss" scoped>
.right1-container {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    padding: 0.1rem;

    .stats-item {
      position: relative;
      background: url("../../../assets/images/maintain_work_date.png") no-repeat;
      background-size: 100% 100%;
      padding: 0.4rem 0.3rem;
      border-radius: 0.16rem;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        opacity: 0.9;
      }

      .stats-label {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.28rem;
        font-weight: 500;
        margin-bottom: 0.3rem;
        text-align: center;
        letter-spacing: 0.02rem;
      }

      .stats-value {
        color: #02dff6;
        font-size: 0.5rem;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 0 0.2rem rgba(2, 223, 246, 0.3);
      }
    }
  }
}
</style>