<template>
  <div class="risk-panel">
    <div class="panel-title">设备故障概况（仅展示有故障设备）</div>

    <div class="content" ref="wrap" @mouseenter="pause" @mouseleave="resume">
      <ul ref="list">
        <li v-for="item in displayList" :key="item._key" :class="{ split: item._split }">
          <!-- 分隔符 -->
          <template v-if="item._split">
            —— 已显示全部设备，重新开始 ——
          </template>

          <!-- 正常数据 -->
          <template v-else>
            <span class="name">{{ item.deviceName }}</span>

            <div class="bar">
              <div
                class="bar-inner"
                :style="{ width: barWidth(item) + '%', background: barColor(item) }"
              />
            </div>

            <span class="meta">
              {{ item.unfinishedCount }}/{{ item.totalCount }}
              （{{ item.finishRate }}%）
            </span>
          </template>
        </li>
      </ul>

      <!--      <ul ref="clone" class="clone"></ul>-->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      timer: null,
      scrollTop: 0,
      displayList: [],
      firstPartHeight: 0
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.prepareList()
        this.$nextTick(this.initScroll)
      }
    }
  },

  beforeDestroy() {
    this.clear()
  },

  methods: {
    barWidth(item) {
      if (!item.totalCount) return 0
      return Math.min(100, item.unfinishedCount / item.totalCount * 100)
    },
    barColor(item) {
      if (item.finishRate < 40) return '#ff4d4f'
      if (item.finishRate < 70) return '#faad14'
      return '#52c41a'
    },
    prepareList() {
      if (!this.data.length) {
        this.displayList = []
        return
      }

      const first = this.data.map(i => ({
        ...i,
        _key: `origin-${i.deviceId}`
      }))

      const copy = this.data.map(i => ({
        ...i,
        _key: `copy-${i.deviceId}`
      }))

      const split = {
        _split: true,
        _key: 'split'
      }

      this.displayList = [...first, split, ...copy]
    },

    initScroll() {
      this.clear()

      const wrap = this.$refs.wrap
      const list = this.$refs.list

      if (!wrap || !list) return

      // 内容不足一屏，不滚动
      if (list.offsetHeight <= wrap.offsetHeight) return

      // 记录第一段高度
      const splitEl = list.querySelector('.split')
      this.firstPartHeight = splitEl.offsetTop

      this.timer = setInterval(this.scroll, 60)
    },

    scroll() {
      const wrap = this.$refs.wrap

      this.scrollTop += 1

      // 滚到一半高度时无感跳回
      if (this.scrollTop >= this.firstPartHeight) {
        this.scrollTop = 0
      }

      wrap.scrollTop = this.scrollTop
    },

    pause() {
      this.clear()
    },

    resume() {
      if (!this.timer) {
        this.timer = setInterval(this.scroll, 60)
      }
    },

    clear() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
  }
}
</script>

<style scoped>
.risk-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #00eaff;
  letter-spacing: 1px;
}

.panel-title::before {
  content: '';
  width: 6px;
  height: 16px;
  background: linear-gradient(180deg, #00eaff, #4fd2ff);
  margin-right: 10px;
  border-radius: 3px;
}

.content {
  flex: 1;
  overflow: hidden;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 28px;
}

.name {
  width: 130px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 8px;
  border-radius: 5px;
}

.bar-inner {
  height: 100%;
  border-radius: 5px;
}

.meta {
  width: 100px;
  text-align: right;
  color: #ccc;
}

.clone {
  opacity: 0;
}

::v-deep .split {
  position: relative;
  margin: 10px auto;
  padding: 4px 18px;

  font-size: 12px;
  letter-spacing: 3px;
  line-height: 24px;

  color: #7ff6ff;
  text-align: center;

  width: fit-content;
  border-radius: 14px;

  background: rgba(0, 234, 255, 0.08);

  box-shadow:
    0 0 6px rgba(0, 234, 255, 0.4),
    0 0 12px rgba(0, 234, 255, 0.25),
    inset 0 0 6px rgba(0, 234, 255, 0.35);
}

::v-deep .split::before,
::v-deep .split::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #00eaff,
    transparent
  );
}

::v-deep .split::before {
  left: -70px;
}

::v-deep .split::after {
  right: -70px;
}
@keyframes splitGlow {
  0% {
    box-shadow:
      0 0 4px rgba(0, 234, 255, 0.3),
      0 0 10px rgba(0, 234, 255, 0.15),
      inset 0 0 4px rgba(0, 234, 255, 0.25);
  }
  100% {
    box-shadow:
      0 0 10px rgba(0, 234, 255, 0.6),
      0 0 20px rgba(0, 234, 255, 0.4),
      inset 0 0 8px rgba(0, 234, 255, 0.45);
  }
}

::v-deep .split {
  animation: splitGlow 2.2s ease-in-out infinite alternate;
}

</style>
