<!-- FaultAlarm.vue（故障报警） -->
<template>
  <div class="fault-alarm">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-select v-model="filter.type" placeholder="故障状态" clearable class="search-select">
        <el-option label="全部" value="" />
        <el-option label="未解除" value="未解除" />
        <el-option label="已解除" value="已解除" />
      </el-select>
      <el-select v-model="filter.status" placeholder="车辆状态" clearable class="search-select">
        <el-option label="全部" value="" />
        <el-option label="在线" value="在线" />
        <el-option label="离线" value="离线" />
      </el-select>
      
      <div class="search-buttons">
        <el-button type="primary" class="search-btn" @click="doFilter">搜索</el-button>
        <el-button class="reset-btn" @click="resetFilter">重置</el-button>
      </div>
      
      <div class="action-buttons">
        <el-button class="export-btn">导出</el-button>
      </div>
    </div>
    
    <!-- 表格 -->
    <el-table 
      :data="pagedData" 
      :header-cell-style="{ backgroundColor: '#343744', color: '#fff' }"
      class="custom-table">
      <el-table-column prop="index" label="序号" width="60" />
      <el-table-column prop="carId" label="电池SN码" />
      <el-table-column prop="vin" label="车辆VIN码" />
      <el-table-column prop="location" label="电池包编号" />
      <el-table-column prop="status" label="故障状态">
        <template #default="scope">
          <span :class="scope.row.status === '未解除' ? 'status-danger' : 'status-success'">
            {{ scope.row.status }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="faultType" label="故障名称" />
      <el-table-column prop="faultLevel" label="故障等级" />
      <el-table-column prop="faultStart" label="故障开始时间" />
      <el-table-column prop="faultEnd" label="故障结束时间" />
    </el-table>
    
    <!-- 使用Pagination组件替换el-pagination -->
    <pagination
      v-show="filteredData.length > 0"
      :total="filteredData.length"
      v-model:page="page"
      v-model:limit="pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup>
import { ref, computed, defineProps } from "vue";
import Pagination from '@/components/Pagination/index.vue';
const props = defineProps({
  detail: { type: Object, default: () => null },
  vehicle: { type: Object, default: () => ({}) }
});

const filter = ref({ type: "", status: "" });
const page = ref(1);
const pageSize = ref(10);

const sourceData = computed(() => {
  const fm = props.detail?.fmsMessage;
  if (fm) {
    return [
      {
        index: 1,
        carId: props.detail?.vehicleId || "",
        vin: props.detail?.details?.vin || "",
        location: "",
        status: fm.isActive === 1 ? "未解除" : "已解除",
        faultType: fm.description || fm.code || "",
        faultLevel: fm.level ?? "",
        faultStart: fm.ts || "",
        faultEnd: ""
      }
    ];
  }
  return [];
});

const filteredData = computed(() => {
  return sourceData.value.filter(item => {
    const typeMatch = !filter.value.type || item.status === filter.value.type;
    const statusMatch = !filter.value.status || item.status === filter.value.status;
    return typeMatch && statusMatch;
  });
});

const pagedData = computed(() => {
  const start = (page.value - 1) * pageSize.value;
  return filteredData.value.slice(start, start + pageSize.value);
});

function doFilter() { 
  page.value = 1;
}

function resetFilter() { 
  filter.value = { type: '', status: '' }; 
  page.value = 1;
}

// 处理分页事件
function handlePagination({ page: newPage, limit: newLimit }) {
  // 这里可以添加额外的分页处理逻辑
  // 例如重新加载数据等
}
</script>

<style scoped lang="scss">
.fault-alarm {
  background: #292C38;
  border-radius: 8px;
  padding: 20px;
  color: #fff;
}

// 搜索区域
.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
  .search-select {
    width: 150px;
    margin-right: 10px;
  }
  
  .search-buttons {
    margin-right: 20px;
    display: flex;
    gap: 10px;
  }
  
  .action-buttons {
    margin-left: auto;
    display: flex;
    gap: 10px;
  }
}

// 输入框和下拉框样式
:deep(.el-input__wrapper:hover) {
  box-shadow: none !important;
}

:deep(.el-select) {
  border: none !important;
  width: 160px !important;
  // 修改el-select的输入框的border 
  --el-border-color-hover: #343744 !important;
  --el-border-color: #343744 !important;
}

:deep(.el-select__wrapper.is-focused) {
  box-shadow: none !important;
}

:deep(.el-select__wrapper) {
  background: #343744 !important;
  color: #96A0B5 !important;
  border-radius: 8px !important;
  height: 36px !important;
  width: 160px;
  font-size: 15px;
  border: none !important;
}

:deep(.el-input__wrapper) {
  background: #343744 !important;
  color: #96A0B5 !important;
  border-radius: 8px !important;
  height: 36px !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-select__placeholder) {
  color: #96A0B5 !important;
}

// 表格样式
.custom-table {
  background-color: #292c38 !important;
  color: #ffffff;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  
  // 防止表格闪白
  :deep(.el-loading-mask) {
    background-color: rgba(41, 44, 56, 0.7) !important;
  }
  
  :deep(.el-table__empty-block) {
    background-color: #292c38 !important;
  }
  
  :deep(.el-table__empty-text) {
    color: #96A0B5 !important;
  }
  
  // 确保整个表格区域背景色
  :deep(.el-table) {
    background-color: #292c38 !important;
  }
  
  :deep(.el-table__body) {
    background-color: #292c38 !important;
  }
  
  :deep(.el-table__inner-wrapper::before) {
    display: none; /* 隐藏表格顶部的边框线 */
  }
  
  :deep(.el-table__header) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
  }
  
  :deep(.el-table__header-wrapper) {
    th {
      background-color: #343744 !important;
      color: #96A0B5 !important;
      font-weight: normal;
      border-bottom: none; /* 移除th底部边线 */
    }
    
    tr th.el-table__cell:first-child {
      border-top-left-radius: 6px;
      
      .cell {
        border-top-left-radius: 6px;
      }
    }
    
    tr th.el-table__cell:last-child {
      border-top-right-radius: 4px;
      
      .cell {
        border-top-right-radius: 4px;
      }
    }
    
    .el-table__header th.el-table__cell {
      background-color: #343744 !important;
      color: #96A0B5;
    }
    
    tr {
      background-color: #343744 !important;
    }
  }
  
  :deep(.el-table__body-wrapper) {
    td {
      height: 68px !important;
      background-color: #292c38;
      color: #ffffff;
      border-bottom: 1px solid #4C4F5F;
    }
  }
  
  :deep(.el-table__body tr:hover > td) {
    background: #2B3B5A !important;
  }
}

// 状态标识
.status-danger {
  color: #FF4D4F;
  font-weight: bold;
}

.status-success {
  color: #00C48F;
  font-weight: bold;
}

// 移除原有的分页样式，因为已经使用了Pagination组件
.pagination-bar {
  display: none;
}

// 媒体查询，处理响应式布局
@media (max-width: 1200px) {
  .search-area {
    flex-wrap: wrap;
    gap: 10px;
    
    .search-select {
      margin-right: 0;
    }
    
    .search-buttons {
      margin-right: 0;
    }
    
    .action-buttons {
      margin-left: 0;
      margin-top: 10px;
    }
  }
}

@media (max-width: 768px) {
  .search-area {
    flex-direction: column;
    align-items: flex-start;
    
    .search-select {
      width: 100%;
      max-width: none;
    }
    
    .search-buttons,
    .action-buttons {
      width: 100%;
      margin-top: 10px;
    }
  }
}
</style>
