<template>
  <div class="dhrd">
    <div v-if="list.length > 0" class="dhrd-list">
      <!--    <div class="dhrd-item">
      <div class="time blue">
        刚刚
      </div>
      <div class="title ">XX社区第一网格</div>
      <div class="name ">杨波</div>
      <div class="address ">
        修改了新苑小区**的居民信息的居民信息的居民信息
      </div>
    </div>-->
      <div style="overflow: hidden">
        <div ref="animation2">
          <div class="dhrd-item" v-for="(item, index) in list" :key="index">
            <div class="time">
              {{ $moment(item.changeTime).format("HH:mm") }}
            </div>
            <div class="title">{{ item.orgName }}</div>
            <!--      <div class="name">{{item.orgName}}</div>-->
            <div class="address">{{ item.content }}</div>
          </div>
          <div v-if="list.length > 4">
            <div class="dhrd-item" v-for="(item, index) in list" :key="index">
              <div class="time">
                {{ $moment(item.changeTime).format("HH:mm") }}
              </div>
              <div class="title">{{ item.orgName }}</div>
              <!--      <div class="name">{{item.orgName}}</div>-->
              <div class="address">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="width: 100%; height: 100%; text-align: center;padding-top: 20px;">
      <img
        width="268px"
        height="128px"
        src="~@/assets/images/overview/zanwu.png"
      />
      <div class="zanwuText">近3日暂无更新</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DynamicHumanRoomData",
  props: {
    currentLevelData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      org: this.$store.state.chooseArea.chooseName,
      list: [],
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getList(val);
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getList(this.currentLevelData);
    }
  },
  methods: {
    getList(item) {
      this.$http
        .get(
          "/actual/base/streetOverview/residentHouseUpdateRecord?level=" +
            item.orgLevel +
            "&orgId=" +
            item.orgId
        )
        .then(({ data: { data } }) => {
          this.list = data;
          if (this.list.length > 4) {
            this.$nextTick(() => {
              const aniHeight =
                this.$refs.animation2.querySelector(".tr").offsetHeight *
                this.pmList.length;
              this.$refs.animation2.style.animation = "move2 10s linear infinite";
              document.styleSheets[0].insertRule(
                `@keyframes move2{0% {transform: translateY(0px);}100% {transform: translateY(-${aniHeight}px);}`,
                0
              );
            });
          } else {
            this.$refs.animation2.style.animation = null;
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/c/common.scss";
.dhrd {
  padding: 0 16px 20px;
}
.zanwuText {
  margin-top: -34px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #a3b9da;
}
.dhrd-list {
  height: 140px;
  overflow-y: auto;
  @include scrollBar .dhrd-item {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    height: 40px;
    align-items: center;
    padding: 0 16px;
    &:nth-of-type(odd) {
      background: rgba(14, 56, 115, 0.4);
    }
    .time {
      flex: 1;
    }
    .title {
      flex: 2;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .name {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .address {
      flex: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.blue {
  color: #0deeef;
}
</style>
