<template>
  <div class="device-scroll-table" :style="rootStyle">
    <div class="header-row">
      <div class="col id">编号</div>
      <div class="col type">老化总数</div>
      <div class="col date">状态</div>
      <div class="col status">运行时长</div>
      <div class="col jindu">任务进度</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 in rows" :key="row.id + row.date" class="row">
          <div class="col id">{{ row.id }}</div>
          <div class="col type">{{ row.type }}</div>
          <div class="col date">{{ row.date }}</div>
          <div class="col status">
            {{ row.status }}
          </div>
          <div class="col jindu txt">{{ row.jindu }}</div>
        </div>
        <template v-if="shouldScroll">
          <div
            v-for="(row, index) in rows"
            :key="'clone-' + index + row.id"
            class="row"
          >
            <div class="col id">{{ row.id }}</div>
            <div class="col type">{{ row.type }}</div>
            <div class="col date">{{ row.date }}</div>
            <div class="col status">
              {{ row.status }}
            </div>
            <div class="col jindu txt">{{ row.jindu }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DeviceScrollTable",
  props: {
    rows: {
      type: Array,
      default() {
        return [
          {
            id: "2505151",
            type: "200",
            date: "云顶",
            status: "150",
            jindu: "96%",
          },
          {
            id: "2505152",
            type: "200",
            date: "云顶",
            status: "150",
            jindu: "96%",
          },
          {
            id: "2505153",
            type: "200",
            date: "云顶",
            status: "150",
            jindu: "96%",
          },
          {
            id: "2505154",
            type: "200",
            date: "云顶",
            status: "150",
            jindu: "96%",
          },
          {
            id: "2505155",
            type: "200",
            date: "云顶",
            status: "150",
            jindu: "96%",
          },
        ];
      },
    },
    speed: {
      type: Number,
      default: 20,
    },
    height: {
      type: Number,
      default: 180,
    },
  },
  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" } : { height: "100%" };
    },
  },
  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;
        }
        this.shouldScroll = body.scrollHeight > body.clientHeight;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.device-scroll-table {
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  // background: #000;
  overflow: hidden;
}

.header-row {
  display: flex;
  align-items: center;
  height: 42px;
  // background: rgba(0, 124, 225, 0.4);
  background: linear-gradient(
    180deg,
    rgba(69, 204, 255, 0.63) 6%,
    rgba(0, 0, 0, 0) 100%
  );
  font-weight: 600;
}

.body {
  padding: 6px 0;
  height: calc(100% - 42px);
  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;
  border-bottom: 1px solid rgba(14, 84, 178, 0.56);
}

.col {
  padding: 0 10px;
  white-space: nowrap;
}

.col.id {
  width: 28%;
  padding-left: 20px;
}

.col.type {
  width: 20%;
}

.col.date {
  width: 20%;
}

.col.status {
  width: 20%;
  // display: flex;
  // justify-content: flex-end;
  text-align: center;
}
.col.jindu {
  width: 20%;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  &.txt {
    padding-right: 40px;
  }
}

.tag {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
}

.tag-blue {
  background: #1ea7ff;
}

.tag-orange {
  background: #ff6a00;
}

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