<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>
    <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">
            <span
              :class="[
                'tag',
                row.status === '正常' ? 'tag-blue' : 'tag-orange',
              ]"
            >
              {{ row.status }}
            </span>
          </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">
              <span
                :class="[
                  'tag',
                  row.status === '正常' ? 'tag-blue' : 'tag-orange',
                ]"
              >
                {{ row.status }}
              </span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DeviceScrollTable",
  props: {
    rows: {
      type: Array,
      default() {
        return [
          { id: "1", type: "阀门井", date: "2014-12-10", status: "正常" },
          { id: "2", type: "调压箱", date: "2015-12-24", status: "临期" },
          { id: "3", type: "调压箱", date: "2014-12-10", status: "正常" },
          { id: "4", type: "阀门井", date: "2014-12-10", status: "正常" },
          { id: "5", type: "调压箱", date: "2015-12-24", status: "临期" },
          { id: "6", type: "调压箱", date: "2014-12-10", status: "正常" },
        ];
      },
    },
    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);
  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;
}

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

.col.id {
  width: 28%;
}

.col.type {
  width: 24%;
}

.col.date {
  width: 28%;
}

.col.status {
  width: 20%;
  display: flex;
  justify-content: flex-end;
}

.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>
