<template>
  <div class="panel-box env-sensing">
    <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
    <div class="corner-deco bl"></div><div class="corner-deco br"></div>
    <div class="panel-title">实验环境安全智能感知</div>
    <div class="panel-content">
      <div class="sensor-scroll-wrap" ref="scrollWrap" @mouseenter="paused=true" @mouseleave="paused=false">
        <div ref="scrollInner" class="sensor-scroll-inner">
          <div class="sensor-item"
          v-for="(item, idx) in displayList" :key="idx">
            <div class="lab-name">{{ item.lab }}<span class="lab-unit">{{ item.dept }}</span></div>
            <div class="sensor-values">
              <span class="sensor-val"
               :class="minItem.hasException?'redClass':''"
              v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">{{ minItem.deviceName }} : {{ minItem.deviceValue?minItem.deviceValue:'-' }}{{ minItem.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getEnvSensingList } from '@/api'

export default {
  name: 'EnvSensing',
  data() {
    return {
      list: [],
      paused: false,
      scrollTimer: null,
      scrollY: 0,
      timer: null
    }
  },
  computed: {
    // 复制一份数据实现无缝滚动
    displayList() {
      if(this.list[3]){
        return [...this.list, ...this.list]
      }else{
        return [...this.list]
      }
    }
  },
  async mounted() {
    await this.loadData()
    this.timer = setInterval(this.loadData, 5 * 60 * 1000)
  },
  beforeDestroy() {
    if (this.scrollTimer) cancelAnimationFrame(this.scrollTimer)
    clearInterval(this.timer)
  },
  methods: {
    async loadData() {
      try {
        const res = await getEnvSensingList()
        this.list = res.data.list;
        if (!this.scrollTimer) {
          this.$nextTick(() => setTimeout(() => this.startScroll(), 500))
        }
      } catch (e) {
        console.error('EnvSensing:', e)
      }
    },
    startScroll() {
      const wrap = this.$refs.scrollWrap
      const inner = this.$refs.scrollInner
      if (!wrap || !inner) return
      // 一半高度即为一份数据的高度
      const halfHeight = inner.scrollHeight / 2
      if (halfHeight <= wrap.offsetHeight) return // 不需要滚动

      const speed = 0.4
      this.scrollY = 0

      const step = () => {
        if (!this.paused) {
          this.scrollY += speed
          if (this.scrollY >= halfHeight) {
            this.scrollY -= halfHeight
          }
          inner.style.transform = `translateY(${-this.scrollY}px)`
        }
        this.scrollTimer = requestAnimationFrame(step)
      }
      this.scrollTimer = requestAnimationFrame(step)
    }
  }
}
</script>

<style lang="scss" scoped>
.env-sensing {
  display: flex;
  flex-direction: column;
}

.sensor-scroll-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.redClass{
  background: rgba(255,0,0,0.2)!important ;
  border: 1px solid rgba(255,0,0,0.7)!important;
  color:red!important;
}
.sensor-item {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: rgba(72,215,255,0.04);
  border: 1px solid rgba(72,215,255,0.08);
  transition: all 0.3s;

  &:hover {
    border-color: $accent;
    background: rgba(72,215,255,0.08);
  }
}

.lab-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}

.lab-unit {
  font-size: 11px;
  color: $text-secondary;
  margin-left: 6px;
}

.sensor-values {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sensor-val {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(72,215,255,0.06);
  color: $text-primary;

  &.alarm {
    background: rgba(255,77,79,0.15);
    color: $accent-red;
    font-weight: 600;
    animation: alarmPulse 1s ease-in-out infinite alternate;
  }
}

.alarm-icon {
  display: inline-block;
  margin-right: 2px;
  animation: alarmIconShake 0.5s ease-in-out infinite alternate;
}

@keyframes alarmPulse {
  0% { box-shadow: 0 0 4px rgba(255,77,79,0.3); }
  100% { box-shadow: 0 0 12px rgba(255,77,79,0.6); }
}

@keyframes alarmIconShake {
  0% { transform: translateX(-1px) rotate(-5deg); }
  100% { transform: translateX(1px) rotate(5deg); }
}
</style>
