<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="table-container">
      <n-data-table
        :columns="sosColumns"
        :data="sosData"
        :bordered="false"
        size="small"
      />
    </div>
    
    <!-- 车辆报警表格 -->
    <div v-show="activeTab === 1" class="table-container">
      <n-data-table
        :columns="vehicleColumns"
        :data="vehicleData"
        :bordered="false"
        size="small"
      />
    </div>
    
    <!-- 越界开采表格 -->
    <div v-show="activeTab === 2" class="table-container">
      <n-data-table
        :columns="boundaryColumns"
        :data="boundaryData"
        :bordered="false"
        size="small"
      />
    </div>
    
    <!-- 在线监测表格 -->
    <div v-show="activeTab === 3" class="table-container">
      <n-data-table
        :columns="monitorColumns"
        :data="monitorData"
        :bordered="false"
        size="small"
      />
    </div>
  </div>
</template>

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

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

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

// SOS报警表格列
const sosColumns = ref([
  { title: '人员姓名', key: 'name' },
  { title: '定位卡号', key: 'cardNumber' },
  { title: '报警时间', key: 'alarmTime' }
])

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

// 车辆报警表格列
const vehicleColumns = ref([
  { title: '车辆/司机名称', key: 'vehicleOrDriver' },
  { title: '车牌号', key: 'plateNumber' },
  { title: '报警类型', key: 'alarmType' },
  { title: '报警时间', key: 'alarmTime' }
])

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

// 越界开采表格列
const boundaryColumns = ref([
  { title: '人员/车辆名称', key: 'personOrVehicle' },
  { title: '定位卡号/车牌号', key: 'cardOrPlate' },
  { title: '越界时间', key: 'boundaryTime' }
])

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

// 在线监测表格列
const monitorColumns = ref([
  { title: '设备名称', key: 'deviceName' },
  { title: '监测值', key: 'monitorValue' },
  { title: '报警级别', key: 'alarmLevel' },
  { title: '报警时间', key: 'alarmTime' }
])

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

<style scoped lang="scss">
.wrapper {
  overflow: visible;
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
      background-size: contain;
  // padding-top: 0.45rem;

  .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);
  }
  width: 100%;
  margin-top: 0.3rem;
  background-image: url("@/assets/jinrun/module-bg.png");
  background-repeat: no-repeat;
  .chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  .chart-container{
    width: 100%;
    height: 100%;
  }

}

  .alarm-tabs {
    width: 4.4rem;
    display: flex;
    gap: 0.05rem;
    margin-top: .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: var(--n-text-color-primary);
      
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 0.02rem;
        background-color: #36a2eb;
      }
    }
  }

  .table-container {
    :deep(.n-data-table) {
      background-color: transparent;
      
      .n-data-table-th,
      .n-data-table-td {
        background-color: transparent !important;
        color: var(--n-text-color-primary);
        border: none;
      }
      
      .n-data-table-tr:hover .n-data-table-td {
        background-color: rgba(50, 50, 50, 0.3) !important;
      }
    }
  }
</style>