<template>
  <div class="vehicle-table">
    <!-- 搜索区域 -->
    <div class="search-area" v-if="!hideSearch">
      <el-input
        v-model="searchText"
        placeholder="请输入车牌号查询"
        clearable
        prefix-icon="Search"
        class="search-input"
        @input="handleSearchInput"
        @keyup.enter="handleSearch"
      />
      
      <el-select v-model="vehicleType" placeholder="车辆类型" clearable class="search-select" @change="handleSearch">
        <el-option label="全部" value="" />
        <el-option label="驱动车" value="驱动车" />
        <el-option label="巡检车" value="巡检车" />
      </el-select>
      
      <el-select v-model="vehicleStatus" placeholder="车辆状态" clearable class="search-select" @change="handleSearch">
        <el-option label="全部" value="" />
        <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="handleSearch">搜索</el-button>
        <el-button class="reset-btn" @click="handleReset">重置</el-button>
        <el-button class="export-btn" @click="handleExport">导出</el-button>
      </div>
      
      <div class="action-buttons">
        <!-- 视图切换按钮 -->
        <div class="view-switcher">
          <div 
            class="view-btn list-view" 
            :class="{'active': !isCardView}" 
            @click="switchView('list')"
            title="列表视图"
          >
            <svg-icon icon-class="table" />
          </div>
          <div 
            class="view-btn card-view" 
            :class="{'active': isCardView}" 
            @click="switchView('card')"
            title="卡片视图"
          >
            <svg-icon icon-class="dashboard" />
          </div>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container" :class="{ 'full-height': hideSearch }">
      <!-- 表格 -->
      <el-table
        :data="pagedVehicleData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ backgroundColor: '#343744', color: '#fff' }"
        class="custom-table"
        :bg-color="'#292C38'"
        :max-height="tableMaxHeight"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column label="序号" width="70">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        

        
        <el-table-column prop="carId" label="车辆号" />
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="brand" label="品牌" />
        <el-table-column prop="organization" label="所属单位" width="120"/>
        <el-table-column prop="number" label="当前故障数" width="100" />
        
        <el-table-column prop="routeStatus" label="作业状态">
          <template #default="scope">
            <el-tag :type="getRouteStatusType(scope.row.routeStatus)">
              {{ scope.row.routeStatus }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="车辆状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === '在线' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="chargeStatus" label="充电状态"/>
        <el-table-column prop="voltage" label="总电压"/>
        <el-table-column prop="current" label="总电流" />
        <el-table-column prop="soc" label="SOC" />
        <el-table-column prop="lastTime" label="最新时间" width="170" />
        <el-table-column prop="location" label="最新位置" />
        <el-table-column prop="batteryLevel" label="负责人" />
        <el-table-column prop="contactPhone" label="负责人电话" width="130" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              text
              type="primary"
              @click="handleView(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-container">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="currentPage"
        v-model:limit="pageSize"
        @pagination="handlePagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watchEffect } from 'vue';
import { Search, Download } from '@element-plus/icons-vue';
import Pagination from '@/components/Pagination/index.vue';

const props = defineProps({
  vehicleData: {
    type: Array,
    required: true
  },
  filters: {
    type: Object,
    default: () => ({})
  },
  hideSearch: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['view', 'control', 'selection-change', 'search', 'filter', 'reset', 'export', 'switch-view']);

// 搜索相关
const searchText = ref('');
const vehicleType = ref('');
const vehicleStatus = ref('');

// 分页相关
const currentPage = ref(1);
const pageSize = ref(7);
const tableMaxHeight = 512;

// 选中的行
const selectedRows = ref([]);

// 视图切换状态
const isCardView = ref(false);

// 监听filters变化并同步到本地状态
watchEffect(() => {
  if (props.filters) {
    searchText.value = props.filters.searchText || '';
    vehicleType.value = props.filters.vehicleType || '';
    vehicleStatus.value = props.filters.vehicleStatus || '';
  }
});

// 筛选后的数据
const filteredVehicleData = computed(() => {
  let filtered = [...props.vehicleData];
  
  // 应用搜索文本过滤
  if (searchText.value) {
    const text = searchText.value.toLowerCase();
    filtered = filtered.filter(item => 
      item.id?.toString().toLowerCase().includes(text) ||
      item.carId?.toLowerCase().includes(text) ||
      item.type?.toLowerCase().includes(text) ||
      item.organization?.toLowerCase().includes(text)
    );
  }
  
  // 应用车辆状态过滤
  if (vehicleStatus.value) {
    filtered = filtered.filter(item => item.status === vehicleStatus.value);
  }
  
  // 应用车辆类型过滤
  if (vehicleType.value) {
    filtered = filtered.filter(item => item.type === vehicleType.value);
  }
  
  return filtered;
});

// 过滤后的总数用于分页组件显示
const total = computed(() => filteredVehicleData.value.length);

// 分页切片后的数据用于表格显示
const pagedVehicleData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredVehicleData.value.slice(start, end);
});

// 获取行驶状态对应的类型
function getRouteStatusType(status) {
  switch (status) {
    case '任务中':
      return 'success';
    case '待命中':
      return '';
    case '充电中':
      return 'warning';
    case '等待中':
      return 'info';
    default:
      return '';
  }
}

// 处理搜索输入
function handleSearchInput() {
  // 可以添加防抖逻辑
}

// 处理搜索
function handleSearch() {
  emit('filter', {
    searchText: searchText.value,
    vehicleType: vehicleType.value,
    vehicleStatus: vehicleStatus.value
  });
}

// 处理重置
function handleReset() {
  searchText.value = '';
  vehicleType.value = '';
  vehicleStatus.value = '';
  emit('reset');
}

// 处理导出
function handleExport() {
  emit('export');
}

// 处理查看详情
function handleView(row) {
  emit('view', row);
}

// 处理车辆控制
function handleControl(row) {
  emit('control', row);
}

// 视图切换
function switchView(viewType) {
  isCardView.value = viewType === 'card';
  emit('switch-view', viewType);
}

// 处理选择变化
function handleSelectionChange(selection) {
  selectedRows.value = selection;
  emit('selection-change', selection);
}

// 处理分页变化
function handlePagination({ page, limit }) {
  currentPage.value = page;
  pageSize.value = limit;
}
</script>

<style scoped lang="scss">
.vehicle-table {
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
  .search-input {
    width: 250px;
    margin-right: 10px;
  }
  
  .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;
    
    .view-switcher {
      display: flex;
      background-color: #343744;
      border-radius: 8px;
      overflow: hidden;
      
      .view-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          background-color: #2B3B5A;
        }
        
        &.active {
          background-color: #409eff;
          
          svg {
            color: white;
          }
        }
        
        svg {
          font-size: 18px;
          color: #96A0B5;
        }
      }
    }
  }
}

.table-container {
  height: 32rem;
  max-height: 32rem;
  &.full-height {
    height: calc(100% - 50px); /* 留出分页高度 */
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 15px 0;
  position: relative;
  z-index: 10;
}

// 输入框 下拉框 搜索栏
:deep(.el-input__wrapper:hover) {
  box-shadow: none !important;
}

:deep(.el-select) {
  border: none !important;
  width: 150px !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;
  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;
}

:deep(.el-button) {
  background: #343744;
  border-color: transparent;
  border-radius: 8px;
  height: 36px;
  
  &.el-button--primary {
    background-color: #409eff;
  }
  
  &:hover, &:focus {
    background: #2B3B5A;
    border-color: transparent;
  }
  
  &.el-button--primary:hover, &.el-button--primary:focus {
    background-color: #337ecc;
  }
}

/* 自定义表格样式 */
.custom-table {
  background-color: transparent !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: transparent !important;
  }
  
  :deep(.el-table__body) {
    background-color: transparent !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: transparent;
      color: #ffffff;
      border-bottom: 1px solid #4C4F5F;
    }
  }
  
  :deep(.el-table__body tr:hover > td) {
    background: #2B3B5A!important; 
  }
  
  :deep(.el-button--link) {
    border: none;
    background: transparent;
    color: #347AE2;
    padding: 0;
    margin: 0 5px;
  }
  
  :deep(.el-button.is-text) {
    background-color: transparent !important;
    border-color: transparent;
    color: #347AE2;
    
    &:hover, &:focus, &:active {
      background-color: transparent !important;
      color: #347AE2;
    }
  }
  
  :deep(.el-button.el-button--primary.is-text) {
    background-color: transparent !important;
    color: #347AE2;
    
    &:hover {
      background-color: transparent !important;
      color: #347AE2;
    }
  }
  
  :deep(.el-table__body tr:hover .el-button--link.is-text) {
    background-color: transparent !important;
    color: #347AE2;
  }
}

/* 全局表格样式覆盖，防止闪白 */
:deep(.el-table) {
  --el-table-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-border-color: #4C4F5F !important;
  --el-table-header-bg-color: #343744 !important;
  --el-table-row-hover-bg-color: #2B3B5A !important;
  
  &::before {
    display: none;
  }
}

/* 自定义滚动条 */
.table-container::-webkit-scrollbar {
  width: 6px;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #4C4F5F;
  border-radius: 6px;
}

.table-container::-webkit-scrollbar-track {
  background-color: #292c38;
}

// 媒体查询，处理响应式布局
@media (max-width: 1200px) {
  .search-area {
    flex-wrap: wrap;
    gap: 10px;
    
    .search-input {
      width: 100%;
      max-width: 250px;
      margin-right: 0;
    }
    
    .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-input,
    .search-select {
      width: 100%;
      max-width: none;
    }
    
    .search-buttons,
    .action-buttons {
      width: 100%;
      margin-top: 10px;
    }
  }
}
</style>
