<template>
  <div class="wrapper">
    <h2 class="card-title">今日报警信息</h2>
    <div class="alarm-tabs">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.name }}({{ tab.count }})
      </div>
    </div>
    
    <!-- SOS报警列表 -->
    <div v-show="activeTab === 0" class="list-container">
      <div class="scroll-wrapper" ref="sosScrollWrapper">
        <dl class="alarm-list">
          <dt class="list-header">
            <span>人员姓名</span>
            <span>定位卡号</span>
            <span>报警时间</span>
          </dt>
          <template v-for="(item, index) in sosData" :key="index">
            <dd class="list-item" :class="getItemClass(item)">
              <span>{{ item.name }}</span>
              <span>{{ item.cardNumber }}</span>
              <span class="time-cell">
                <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
                <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
              </span>
            </dd>
          </template>
        </dl>
      </div>
    </div>
    
    <!-- 车辆报警列表 -->
    <div v-show="activeTab === 1" class="list-container">
      <div class="scroll-wrapper" ref="vehicleScrollWrapper">
        <dl class="alarm-list">
          <dt class="list-header">
            <span>车辆/司机名称</span>
            <span>车牌号</span>
            <span>报警类型</span>
            <span>报警时间</span>
          </dt>
          <template v-for="(item, index) in vehicleData" :key="index">
            <dd class="list-item" :class="getItemClass(item)">
              <span>{{ item.vehicleOrDriver }}</span>
              <span>{{ item.plateNumber }}</span>
              <span>{{ item.alarmType }}</span>
              <span class="time-cell">
                <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
                <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
              </span>
            </dd>
          </template>
        </dl>
      </div>
    </div>
    
    <!-- 越界开采列表 -->
    <div v-show="activeTab === 2" class="list-container">
      <div class="scroll-wrapper" ref="boundaryScrollWrapper">
        <dl class="alarm-list">
          <dt class="list-header">
            <span>人员/车辆名称</span>
            <span>定位卡号/车牌号</span>
            <span>越界时间</span>
          </dt>
          <template v-for="(item, index) in boundaryData" :key="index">
            <dd class="list-item" :class="getItemClass(item)">
              <span>{{ item.personOrVehicle }}</span>
              <span>{{ item.cardOrPlate }}</span>
              <span class="time-cell">
                <div class="date-part">{{ item.boundaryTime.split(' ')[0] }}</div>
                <div class="time-part">{{ item.boundaryTime.split(' ')[1] }}</div>
              </span>
            </dd>
          </template>
        </dl>
      </div>
    </div>
    
    <!-- 在线监测列表 -->
    <div v-show="activeTab === 3" class="list-container">
      <div class="scroll-wrapper" ref="monitorScrollWrapper">
        <dl class="alarm-list">
          <dt class="list-header">
            <span>设备名称</span>
            <span>监测值</span>
            <span>报警级别</span>
            <span>报警时间</span>
          </dt>
          <template v-for="(item, index) in monitorData" :key="index">
            <dd class="list-item" :class="getItemClass(item)">
              <span>{{ item.deviceName }}</span>
              <span>{{ item.monitorValue }}</span>
              <span>{{ item.alarmLevel }}</span>
              <span class="time-cell">
                <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
                <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
              </span>
            </dd>
          </template>
        </dl>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 定义tabs
const tabs = ref([
  { name: 'SOS报警', count: 0 },
  { name: '车辆报警', count: 3 },
  { name: '越界开采', count: 4 },
  { name: '在线监测', count: 4 }
])

// 激活的tab索引
const activeTab = ref(1)

// 滚动相关的引用
const sosScrollWrapper = ref(null)
const vehicleScrollWrapper = ref(null)
const boundaryScrollWrapper = ref(null)
const monitorScrollWrapper = ref(null)

// 滚动定时器
let scrollTimer = null

// SOS报警数据
const sosData = ref([])

// 车辆报警数据
const vehicleData = ref([
  { vehicleOrDriver: '货车01', plateNumber: '鲁C12345', alarmType: '超速', alarmTime: '2025-01-10 14:21:31', status: 'chengse' },
  { vehicleOrDriver: '货车02', plateNumber: '鲁C12346', alarmType: '偏离路线', alarmTime: '2025-01-10 13:15:22', status: 'lanse' },
  { vehicleOrDriver: '张三', plateNumber: '鲁C12347', alarmType: '疲劳驾驶', alarmTime: '2025-01-10 12:05:47', status: 'huangse' }
])

// 越界开采数据
const boundaryData = ref([
  { personOrVehicle: '李四', cardOrPlate: 'K00123', boundaryTime: '2025-01-10 14:21:31', status: 'chengse' },
  { personOrVehicle: '挖掘机01', cardOrPlate: '鲁C56789', boundaryTime: '2025-01-10 13:45:12', status: 'lanse' },
  { personOrVehicle: '王五', cardOrPlate: 'K00456', boundaryTime: '2025-01-10 12:30:55', status: 'huangse' },
  { personOrVehicle: '卡车02', cardOrPlate: '鲁C98765', boundaryTime: '2025-01-10 11:20:33', status: 'chengse' }
])

// 在线监测数据
const monitorData = ref([
  { deviceName: '边坡表面位移01', monitorValue: '0.0047mm', alarmLevel: '橙色预警', alarmTime: '2025-01-10 14:21:31', status: 'chengse' },
  { deviceName: '降雨量', monitorValue: '50.2mm', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 13:15:22', status: 'lanse' },
  { deviceName: '温度传感器01', monitorValue: '38.5℃', alarmLevel: '黄色预警', alarmTime: '2025-01-10 12:05:47', status: 'huangse' },
  { deviceName: '湿度传感器02', monitorValue: '85%RH', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 11:30:15', status: 'lanse' }
])

// 根据status获取对应的class
const getItemClass = (item) => {
  if (item.status === 'chengse') {
    return 'status-chengse'
  } else if (item.status === 'lanse') {
    return 'status-lanse'
  } else if (item.status === 'huangse') {
    return 'status-huangse'
  }
  return ''
}

// 初始化滚动
const initScroll = () => {
  // 清除之前的定时器
  if (scrollTimer) {
    clearInterval(scrollTimer)
    scrollTimer = null
  }
  
  // 获取当前激活的滚动容器
  let wrapper = null
  switch(activeTab.value) {
    case 0:
      wrapper = sosScrollWrapper.value
      break
    case 1:
      wrapper = vehicleScrollWrapper.value
      break
    case 2:
      wrapper = boundaryScrollWrapper.value
      break
    case 3:
      wrapper = monitorScrollWrapper.value
      break
  }
  
  // 如果没有数据或容器不存在，则不启动滚动
  if (!wrapper || wrapper.scrollHeight <= wrapper.clientHeight) {
    return
  }
  
  // 设置初始滚动方向为向下
  let direction = 1
  const step = 1
  
  // 启动自动滚动
  scrollTimer = setInterval(() => {
    // 计算新的滚动位置
    const newScrollTop = wrapper.scrollTop + (step * direction)
    
    // 判断是否到达顶部或底部
    if (newScrollTop <= 0) {
      // 到达顶部，改变方向向下
      direction = 1
      wrapper.scrollTop = 1
    } else if (newScrollTop >= wrapper.scrollHeight - wrapper.clientHeight) {
      // 到达底部，改变方向向上
      direction = -1
      wrapper.scrollTop = wrapper.scrollHeight - wrapper.clientHeight - 1
    } else {
      // 正常滚动
      wrapper.scrollTop = newScrollTop
    }
  }, 50)
}

// 当tab切换时重新初始化滚动
const handleTabChange = (index) => {
  activeTab.value = index
  // 延迟执行以确保DOM更新完成
  setTimeout(initScroll, 100)
}

// 组件挂载时初始化滚动
onMounted(() => {
  initScroll()
})

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
  }
})
</script>

<style scoped lang="scss">
.wrapper {
  overflow: visible;
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
  background-size: contain;
  width: 100%;
  margin-top: 0.3rem;
  background-image: url("@/assets/jinrun/module-bg.png");
background-size: cover;
  background-repeat: no-repeat;

      margin-top: .26rem;
  .card-title {
    position: absolute;
    left: 0.25rem;
    top: -0.15rem;
    font-weight: 500;
    font-size: 0.2rem;
    color: #ffffff;
    text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
  }
}

.alarm-tabs {
  width: 4.4rem;
  display: flex;
  gap: 0.05rem;
  margin-top: 0.18rem;
  margin-bottom: 0.15rem;
  flex-wrap: wrap;
  color: #fff;
}

.tab-item {
  padding: 0.05rem 0.1rem;
  background: transparent;
  cursor: pointer;
  position: relative;
  font-weight: 400;
  font-size: 0.16rem;
  color: #88DBBD;
  
  &.active {
    color: #05FFA4;
    
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 0.02rem;
      background-color: #36a2eb;
    }
  }
}

.list-container {
  height: 2.2rem;
  overflow: hidden;
}

.scroll-wrapper {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.alarm-list {
  margin: 0;
  padding: 0;
}

.list-header {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  // background: rgba(10, 25, 71, 0.8);
  background-image: url("@/assets/jinrun/table-header-bg.png");
  // border-radius: 0.05rem;
     /* margin-bottom: 0.05rem; */
    background-repeat: no-repeat;
  

  position: sticky;
  top: 0;
  z-index: 10;
  
  span {
    font-weight: 500;
    font-size: 0.14rem;
    // color: #fff;
    color: #36F3FF;
    flex: 1;
    text-align: center;
    
    &:first-child {
      text-align: left;
    }
    
    &:last-child {
      text-align: right;
    }
  }
}

.list-item {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  margin-bottom: 0.05rem;
      margin-top: .13rem;
  // background: rgba(10, 25, 71, 0.6);
  background-color: #2a496d78;
  // border-radius: 0.05rem;
  // border-left: 0.03rem solid #36a2eb;
  
  span {
    font-size: 0.14rem;
    color: #fff;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    &:first-child {
      text-align: left;
    }
    
    &:last-child {
      text-align: right;
    }
  }
  
  .time-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    
    .date-part, .time-part {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
  
  &.status-chengse {
    span {
      color: #FF852B;
    }
  }
  
  &.status-lanse {
    span {
      color: #28CAFF;
    }
  }
  
  &.status-huangse {
    span {
      color: #FFD118;
    }
  }
}

.no-data {
  text-align: center;
  color: #fff;
  padding: 0.2rem;
  background: rgba(10, 25, 71, 0.3);
  border-radius: 0.05rem;
  margin: 0.1rem;
}
</style>