<template>
  <div class="alarm-scroll-table" :style="rootStyle">
    <div class="header-row">
      <div class="col id">设备编号</div>
      <div class="col reason">报警原因</div>
      <div class="col time timea">报警时间</div>
    </div>
    <div
      class="body"
      ref="body"
      @mouseenter="isPaused = true"
      @mouseleave="isPaused = false"
    >
      <div
        class="scroll"
        :class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
        :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
      >
        <div v-for="(row, index) in rows" :key="'row-' + index" class="row">
          <div class="col id">{{ row.id }}</div>
          <div class="col reason">{{ row.reason }}</div>
          <div class="col time">{{ row.time }}</div>
        </div>
        <template v-if="shouldScroll">
          <div
            v-for="(row, index) in rows"
            :key="'clone-' + index"
            class="row"
          >
            <div class="col id">{{ row.id }}</div>
            <div class="col reason">{{ row.reason }}</div>
            <div class="col time">{{ row.time }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AlarmScrollTable",
  props: {
    rows: {
      type: Array,
      default() {
        return [
          { id: "7890000", reason: "气体泄漏", time: "2014-12-10 14:20:40" },
          { id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
          { id: "7890000", reason: "气体泄漏", time: "2014-12-10 14:20:40" },
          { id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
          { id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
          { id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
          { id: "7890000", reason: "设备生锈", time: "2014-12-10 14:20:40" },
        ];
      },
    },
    speed: {
      type: Number,
      default: 20,
    },
    height: {
      type: Number,
      default: 0,
    },
    scrollStartCount: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      shouldScroll: false,
      isPaused: false,
    };
  },
  computed: {
    scrollDuration() {
      const rowsCount = this.rows.length || 1;
      return Math.max(6, rowsCount * this.speed * 0.1);
    },
    rootStyle() {
      return this.height ? { height: this.height + "px" } : {};
    },
  },
  mounted() {
    this.updateScrollState();
    window.addEventListener("resize", this.updateScrollState);
  },
  updated() {
    this.updateScrollState();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScrollState);
  },
  methods: {
    updateScrollState() {
      this.$nextTick(() => {
        const body = this.$refs.body;
        if (!body) {
          this.shouldScroll = false;
          return;
        }
        const reachCount = this.rows.length > this.scrollStartCount;
        this.shouldScroll = reachCount && body.scrollHeight > body.clientHeight;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.alarm-scroll-table {
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.header-row {
  display: flex;
  align-items: center;
  height: 42px;
  background: #0b72d8;
  font-weight: 600;
}

.body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.scroll {
  display: flex;
  flex-direction: column;
}

.scroll.is-scrolling {
  animation-name: tableScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll.is-paused {
  animation-play-state: paused;
}

.row {
  display: flex;
  align-items: center;
  height: 32px;
  // background: rgba(0, 0, 0, 0.5);
}

.row:nth-child(odd) {
  // background: rgba(0, 0, 0, 0.65);
}

.col {
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col.id {
  width: 25%;
}

.col.reason {
  width: 35%;
}

.col.time {
  width: 40%;
  text-align: right;
}
.timea{
  text-align: center !important;

}

@keyframes tableScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>
