<template>
  <div class="realTime">
    <introduceTitle title="本月实时数据更新情况"></introduceTitle>

    <div class="total-num">
      <div>
        已更新<span style="color: #ff9e00">{{ totalData.houseCount }}</span
        >户<span style="color: #ff9e00">{{ totalData.count }}</span
        >人
      </div>
    </div>
    <transition-group
      name="animate__animated animate__bounce"
      tag="ul"
      enter-active-class="animate__zoomInRight"
      leave-active-class="animate__zoomOutRight"
      class="container"
      v-if="items.length > 0"
      id="scrollContainer"
      appear
    >
      <div v-for="item in items" :key="item.uuid" class="item">
        <span style="flex: 1.3"
          >{{ item.deptName }}{{ item.buildingName }}{{ item.houseName }}</span
        >
        <span style="color: #00fbc6">
          {{ momentjs(item.updateTime).format("YYYY-MM-DD") }}</span
        >
        <span style="flex: 1.2; color: #18b9f1"
          >网格员:{{ item.updateBy }}</span
        >
      </div>
    </transition-group>
    <div class="container isNoData" v-else>暂无数据</div>
  </div>
</template>

<script>
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
import { getrealTime } from "@/api/home/index.js";
import { mapGetters } from "vuex";

export default {
  components: {
    introduceTitle,
  },
  data() {
    const moment = require("moment");
    return {
      momentjs: moment,
      timer: null,
      queryParmas: {
        startTime: undefined,
        buildingId: undefined,
        parentid: undefined,
      },
      totalData: {
        houseCount: 0,
        count: 0,
      },
      items: [],
    };
  },
  watch: {
    "queryParamsXiaoqu.parentid"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
      this.handleChange();
    },
  },
  computed: {
    ...mapGetters(["queryParamsXiaoqu"]),
  },
  created() {
    this.queryParmas = {
      buildingId: this.queryParamsXiaoqu.buildingId,
      parentid: this.queryParamsXiaoqu.parentid,
      xiaoquId: this.queryParamsXiaoqu.xiaoquId,
    };
    this.reset();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    handleChange() {
      if (process.env.NODE_ENV === "development") return;
      this.queryParmas.startTime = undefined;
      clearInterval(this.timer);
      this.totalData = {
        houseCount: 0,
        count: 0,
      };
      if (this.items.length > 0) this.backHomeTop();
      this.items = [];
      this.reset();
    },
    backHomeTop() {
      let scrollContainer = document.getElementById("scrollContainer");
      scrollContainer.scrollTop = 0;
    },
    reset() {
      this.getList(false);

      if (process.env.NODE_ENV === "development") return;
      this.timer = setInterval(() => {
        if (this.items.length > 1000) {
          //考虑dom太多影响到性能,每十秒删除后面100条数据,最后保留一千条
          this.items.splice(-100);
        }
        this.getList(true);
      }, 10000);
    },

    getList(isopen) {
      this.queryParmas = {
        startTime: isopen
          ? this.momentjs().format("YYYY-MM-DD HH:mm:ss")
          : undefined,
        buildingId: this.queryParamsXiaoqu.buildingId,
        parentid: this.queryParamsXiaoqu.parentid,
        xiaoquId: this.queryParamsXiaoqu.xiaoquId,
      };
      getrealTime(this.queryParmas).then((res) => {
        if (isopen) {
          res.data.list.forEach((item, index) => {
            setTimeout(() => {
              this.items.unshift(item);
            }, 500 * index);
          });
        } else {
          this.items = res.data.list;
        }
        this.totalData.houseCount =
          this.totalData.houseCount + res.data.houseCount;
        this.totalData.count = this.totalData.count + res.data.count;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.realTime {
  display: flex;
  flex-direction: column;
  height: 26%;
}
.isNoData {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  font-family: "Alibaba-PuHuiTi-Regular.otf";
}
.container {
  flex: 1;

  position: relative;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  .item {
    width: 100%;
    padding: 5px;
    background: rgba(0, 30, 57, 0.3);
    border: 1px solid #016fbb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    span {
      flex: 0.8;
      text-align: center;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      font-family: "Alibaba-PuHuiTi-Regular.otf";
    }
    margin-bottom: 6px;
  }
  & > div:nth-child(1) {
    background: rgba(255, 158, 0, 0.3);
    border-color: #ff9e00;
  }
}

.total-num {
  display: flex;
  flex-direction: row-reverse;
  margin: 6px 0;
  font-weight: 400;
  font-size: 14px;
  color: #fffbf4;
  font-family: "Alibaba-PuHuiTi-Regular.otf";
}

/*全局滚动条样式*/
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>
