<template>
  <div
    class="issue-table"
    :style="{
      minWidth: minWidth + 'px',
      maxHeight: maxHeight + 'px',
      height: height ? height + 'px' : '100%',
    }"
  >
    <div class="header-row">
      <div class="col id">工单编号</div>
      <div class="col type">类型</div>
      <div class="col issue">整改问题</div>
      <div class="col status">状态</div>
    </div>
    <div class="body" ref="body">
      <div
        class="scroll"
        :class="{ 'is-scrolling': shouldScroll }"
        :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
      >
        <div v-for="row in rows" :key="row.id + row.issue" class="row">
          <div class="col id vid">{{ row.id }}</div>
          <div class="col type">{{ row.type }}</div>
          <div class="col issue" :title="row.issue">{{ row.issue }}</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.issue"
            class="row"
          >
            <div class="col  vid id">{{ row.id }}</div>
            <div class="col type">{{ row.type }}</div>
            <div class="col issue" :title="row.issue">{{ row.issue }}</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: "IssueTable",
  props: {
    rows: {
      type: Array,
      default() {
        return [
          { id: "1", type: "阀门井", issue: "阀门井泄漏", status: "整改中" },
          { id: "2", type: "调压箱", issue: "调压箱老化", status: "未整改" },
          { id: "3", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "4", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "5", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "6", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "7", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "8", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "9", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "10", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "11", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "12", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "13", type: "管线", issue: "管线老化", status: "整改中" },
          { id: "14", type: "管线", issue: "管线老化", status: "整改中" },
        ];
      },
    },
    minWidth: {
      type: Number,
      default: 431,
    },
    maxHeight: {
      type: Number,
      default: 525,
    },
    height: {
      type: Number,
      default: 0,
    },
    speed: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      shouldScroll: false,
    };
  },
  computed: {
    scrollDuration() {
      const rowsCount = this.rows.length || 1;
      return Math.max(6, rowsCount * this.speed * 0.1);
    },
  },
  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;
        console.log(body.scrollHeight, body.clientHeight);
      });
    },
  },
};
</script>

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

.header-row {
  display: flex;
  align-items: center;
  height: 52px;
  background: rgba(0, 124, 225, 0.4);
  font-weight: 600;
}

.body {
  padding: 8px 0;
  // padding-left: 4px;
  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;
}

.issue-table:hover .scroll.is-scrolling {
  animation-play-state: paused;
}

.row {
  display: flex;
  align-items: center;
  height: 34px;
}

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

.id {
  width: 28%;
  text-align: left;
}
.vid{
  padding-left:15px;

}
.type {
  width: 18%;
}

.issue {
  width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status {
  width: 20%;
  display: flex;
  justify-content: flex-end;
  // padding-right: 14px;
}

.tag {
  display: inline-block;
  min-width: 54px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.tag-orange {
  background: #e85d2a;
}

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