<template>
  <div class="warning-panel">
    <!-- 标题 -->
    <div class="panel-title">
      <div class="title-left">
        送检工具预警
        <span class="count">{{ list.length }}</span>
      </div>

      <!-- 颜色说明 -->
      <div class="legend">
        <span class="legend-item danger">
          <i></i> 超期未检定
        </span>
        <span class="legend-item warning">
          <i></i> 临近检定日期
        </span>
      </div>
    </div>

    <!-- 表头 -->
    <div class="table-header">
      <div class="col name">工具名称</div>
      <div class="col model">型号</div>
      <div class="col code">编码</div>
      <div class="col date">上次检定</div>
    </div>

    <!-- 滚动 -->
    <div
      class="table-body"
      ref="wrap"
      @mouseenter="paused = true"
      @mouseleave="paused = false"
    >
      <ul ref="list">
        <li
          v-for="(item, index) in renderList"
          :key="index"
          :class="['row', item.level, { divider: item._divider }]"
        >
          <!-- 分隔行 -->
          <template v-if="item._divider">
            <div class="divider-line">—————— 重新开始 ——————</div>
          </template>

          <!-- 正常数据 -->
          <template v-else>
            <div class="col name" :title="item.toolId_dictText">
              {{ item.toolId_dictText }}
            </div>
            <div class="col model">
              {{ item.model || '-' }}
            </div>
            <div class="col code">
              {{ item.code }}
            </div>
            <div class="col date">
              {{ formatDate(item.lastCheckDate) }}
            </div>
          </template>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      raf: null,
      scrollTop: 0,
      paused: false,
      needScroll: false // ⭐ 新增
    }
  },

  computed: {
    renderList() {
      if (!this.list || this.list.length === 0) return []

      // ⭐ 不需要滚动 → 原始数据
      if (!this.needScroll) {
        return this.list
      }

      // ⭐ 需要滚动 → 双倍 + 分隔符
      return [
        ...this.list,
        { _divider: true },
        ...this.list
      ]
    }
  },

  watch: {
    list() {
      this.$nextTick(() => {
        this.resetScroll()

        // ⭐ 先测一次（原始数据）
        this.calcNeedScroll()

        // ⭐ 再启动滚动（此时 renderList 会变化）
        this.$nextTick(() => {
          this.startScroll()
        })
      })
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.calcNeedScroll()

      this.$nextTick(() => {
        this.startScroll()
      })
    })
  },

  beforeDestroy() {
    this.clear()
  },

  methods: {
    calcNeedScroll() {
      const wrap = this.$refs.wrap
      const list = this.$refs.list

      if (!wrap || !list) return

      this.needScroll = list.scrollHeight > wrap.clientHeight
    },
    startScroll() {
      this.clear()

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

      if (!wrap || !list) return

      // ⭐ 判断是否需要滚动
      this.needScroll = list.scrollHeight > wrap.clientHeight

      // 不需要滚动就直接返回
      if (!this.needScroll) return

      const step = () => {
        if (!this.paused) {
          this.scrollTop += 0.4

          if (this.scrollTop >= list.scrollHeight / 2) {
            this.scrollTop = 0
          }

          wrap.scrollTop = this.scrollTop
        }

        this.raf = requestAnimationFrame(step)
      }

      this.raf = requestAnimationFrame(step)
    },

    resetScroll() {
      this.scrollTop = 0
      if (this.$refs.wrap) {
        this.$refs.wrap.scrollTop = 0
      }
    },

    clear() {
      if (this.raf) {
        cancelAnimationFrame(this.raf)
        this.raf = null
      }
    },

    // ⭐ 日期格式化 yyyy-MM-dd
    formatDate(date) {
      if (!date) return '从未检定'

      const d = new Date(date)
      if (isNaN(d)) return date

      const y = d.getFullYear()
      const m = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')

      return `${y}-${m}-${day}`
    }
  }
}
</script>

<style scoped>
.warning-panel{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:12px;
  border:1px solid #ff5c5c;
  background:linear-gradient(90deg,#3b1f1f,#1a0f0f);
  min-height: 0; /* ⭐ 关键修复 */
}

/* 标题 */
.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
  font-weight:600;
  color:#00eaff;
  margin-bottom:8px;
}

.title-left{
  display:flex;
  align-items:center;
}
.title-left::before{
  content:'';
  width:6px;
  height:16px;
  margin-right:8px;
  border-radius:3px;
  background:linear-gradient(180deg,#00eaff,#4fd2ff);
}

.count{
  margin-left:6px;
  color:#ffd666;
}

/* 图例 */
.legend{
  display:flex;
  font-size:12px;
  gap:14px;
}

.legend-item{
  display:flex;
  align-items:center;
  color:#ccc;
}

.legend-item i{
  width:10px;
  height:10px;
  margin-right:6px;
  border-radius:2px;
}

.legend-item.danger i{
  background:#ff4d4f;
}

.legend-item.warning i{
  background:#ffd666;
}

/* 表头 */
.table-header{
  display:flex;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,92,92,0.4);
  color:#ffb3b3;
  font-weight:600;
}

/* 内容 */
.table-body{
  flex:1;
  overflow:hidden;
  min-height: 0; /* ⭐ 关键修复 */
}

/* 行 */
.row{
  display:flex;
  transition:all .3s;
  font-size:15px;
  line-height:26px;
}

/* 列 */
.col{
  padding-right:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 列宽 */
.name{ width:35%; }
.model{ width:25%; }
.code{ width:20%; }
.date{ width:20%; }

/* 预警 */
.row.warning{
  color:#ffd666;
  background:rgba(255,214,102,.08);
}

.row.warning:hover{
  background:rgba(255,214,102,.25);
}

/* 超期 */
.row.danger{
  color:#ff4d4f;
  background:rgba(255,77,79,.12);
  font-weight:600;
}

.row.danger:hover{
  background:rgba(255,77,79,.35);
}

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

.row.divider {
  justify-content: center;
  align-items: center;
  color: #888;
  font-size: 12px;
  background: transparent;
}

.divider-line {
  width: 100%;
  text-align: center;
  padding: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.2),
    transparent
  );
}
</style>