<template>
  <div style="pointer-events: all">
    <InfoHeader
      name="实时报警信息"
      eName="Real time alarm information"
    ></InfoHeader>
    <InfoContent height="3.5rem">
      <div
        ref="infoList"
        class="info-list scroll-animation"
        style="overflow-y: scroll; max-height: 3.5rem"
      >
        <div
          class="info-item d-flex"
          v-for="(item, index) in infoList"
          :key="index"
          @click="handleItemClick(item)"
        >
          <div class="classic d-flex jc-center a-c">重要</div>

          <div class="ele-name d-flex jc-center a-c">
            {{ item.elevatorName }}
          </div>
          <div class="d-flex">
            <div class="time d-flex jc-center a-c">
              <div>
                <div class="text-a-c">停电故障</div>
                <div class="text-a-c">{{ item.happenTime }}</div>
              </div>
            </div>
            <div class="status flex-1 d-flex jc-center a-c">待处理</div>
          </div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import { getAlarmBrand } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      infoList: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.getAlarmListApi();
    });
  },
  mounted() {
    const list = this.$refs.infoList;
    this.scrollInterval = setInterval(() => {
      list.scrollTop += 1; // 每次滚动20px
    }, 45);
  },
  beforeDestroy() {
    clearInterval(this.scrollInterval);
  },
  methods: {
    getAlarmListApi() {
      let total = 0;
      let pageNum = 1;
      const pageSize = 100;

      const fetchData = () => {
        getAlarmBrand({ pageNum, pageSize }).then((res) => {
          total = res.total; // 更新总条数
          this.infoList = [...this.infoList, ...res.rows]; // 合并数据
          pageNum++;

          if (this.infoList.length < total) {
            setTimeout(fetchData, 3000); // 继续请求
          }
        });
      };

      fetchData(); // 初次加载
    },
    handleItemClick(data) {
      console.log(data);
      if (!data.lng || !data.lat) {
        this.$message.warning("该消息暂无经纬度数据");
        return;
      }
      const address = {
        lng: data.lng,
        lat: data.lat,
        elevatorNum: data.elevatorNum,
      };
      this.$EventBus.$emit("alramClick", address);
    },
  },
};
</script>
<style lang="scss" scoped>
/* 针对特定元素的滚动条 */
.info-list::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.info-list {
  .info-item {
    cursor: pointer;
    height: 0.65rem;
    background-color: #10295f;
    // margin-bottom: 0.1rem;
    &:nth-child(odd) {
      background-color: #10295f;
    }
    &:nth-child(even) {
      background-color: #295b9d;
    }
    .classic {
      width: 1rem;
      font-size: 0.22rem;
      font-weight: bolder;

      color: #f6d54c;
    }
    .ele-name {
      width: 3.5rem;

      font-size: 0.16rem;

      color: white;
      padding: 0 0.15rem;

      text-align: center;
    }
    .time {
      width: 2rem;
      font-size: 0.16rem;
      color: white;
    }
    .status {
      font-size: 0.16rem;
      color: red;
    }
  }
}
</style>
