<template>
    <div class="wrapper">
      <h2 class="card-title">在线监测实时数据</h2>
        <!-- SOS报警列表 -->

        <div class="list-container">
            <dl class="alarm-list">
                <dt class="list-header">
                    <span>设备名称</span>
                    <span>监测值</span>
                    <span>监测时间</span>
                </dt>
            </dl>
            
            <div class="scroll-wrapper" ref="vehicleScrollWrapper">
                <dl class="alarm-list">
                    <template v-for="(item, index) in tableData" :key="index">
                        <dd class="list-item" :class="getItemClass(item)">
                            <span>{{ item.name }}</span>
                            <span>{{ item.value }}</span>
                            <span>{{ item.time }}</span>
                        </dd>
                    </template>
                </dl>
            </div>
        </div>
    </div>
</template>

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


// 根据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 columns = ref([
  { title: '设备名称', key: 'name', align: 'left' },
  { title: '监测值', key: 'value', align: 'center' },
  { title: '监测时间', key: 'time', align: 'center' },
]);

const tableData = ref([
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '降雨量', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '排土场表面位移03', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '预警' },
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }

]);


</script>

<style scoped lang="scss">
.wrapper {
  overflow: visible;
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
  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);
  }
}

.list-container {
    height: 2.5rem;
  overflow: hidden;
  margin-top: .2rem;
}

.alarm-list {
  margin: 0;
}

.list-header {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  background-image: url("@/assets/jinrun/table-header-bg.png");
    /* margin-bottom: 0.05rem; */
    background-repeat: no-repeat;
  
  span {
    font-weight: 500;
    font-size: 0.14rem;
    color: #fff;
    flex: 1;
    text-align: center;
    
    &:first-child {
      text-align: left;
    }
    
    &:last-child {
      text-align: right;
    }
  }
}

.scroll-wrapper {
  height: calc(100% - 0.45rem); /* 减去header的高度 */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.list-item {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  margin-bottom: 0.05rem;
  background-color: #2a496d78;
      margin-top: .13rem;
  
  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;
    }
  }
  
  &.status-chengse {
    span {
      color: #FF852B;
    }
  }
  
  &.status-lanse {
    span {
      color: #28CAFF;
    }
  }
  
  &.status-huangse {
    span {
      color: #FFD118;
    }
  }
}

</style>