<template>
  <div class="vehicle-cards">
    <!-- 卡片网格布局 -->
    <div class="cards-container" :style="{ '--card-row-height': cardRowHeight + 'px' }">
      <div class="cards-grid">
        <div 
          v-for="vehicle in filteredVehicleData" 
          :key="vehicle.id" 
          class="vehicle-card"
          :class="{
            'task-status': vehicle.routeStatus === '任务中',
            'idle-status': vehicle.routeStatus === '闲置中',
            'waiting-status': vehicle.routeStatus === '等待中'
          }"
          @click="handleView(vehicle)"
        >
          <div class="card-content">
            <!-- 第一行：左侧图标+车辆编号和类型，右侧状态 -->
            <div class="card-row card-header">
              <div class="left-content">
                <img src="@/assets/images/carIcon.png" class="car-icon" alt="车辆图标" />
                <div class="vehicle-info">
                  <span class="vehicle-id">{{ vehicle.carId }}</span>
                  <span class="vehicle-type">{{ vehicle.type }}</span>
                </div>
              </div>
              <div class="right-content">
                <span class="status-tag" 
                  :class="{
                    'task': vehicle.routeStatus === '任务中',
                    'idle': vehicle.routeStatus === '闲置中',
                    'waiting': vehicle.routeStatus === '等待中'
                  }">
                  {{ vehicle.routeStatus }}
                </span>
              </div>
            </div>
            
            <!-- 第二行：电池信息、电压电流 -->
            <div class="card-row battery-info">
              <div class="info-item battery-status">
                <div class="battery-container">
                  <div class="battery-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14">
                      <rect x="1" y="2" width="20" height="10" rx="1" ry="1" fill="transparent" stroke="#00ff84" stroke-width="1.5"/>
                      <rect x="21" y="4" width="2" height="6" rx="1" ry="1" fill="#00ff84"/>
                      <rect x="2" y="3" :width="getBatteryWidth(vehicle.soc)" height="8" rx="1" ry="1" fill="#00ff84"/>
                    </svg>
                  </div>
                  <span class="lightning-icon">⚡</span>
                  <span class="percentage">{{ vehicle.soc }}</span>
                </div>
              </div>
              <span class="divider">|</span>
              <div class="info-item voltage">
                <i class="el-icon voltage-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14 9.5V6h2V2H8v4h2v3.5L2 20h20L14 9.5zm-6 8.5l5-5l5 5H8z"/></svg>
                </i>
                <span>{{ vehicle.voltage }}</span>
              </div>
              <span class="divider">|</span>
              <div class="info-item current">
                <i class="el-icon current-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7l-4-4l-4 4l1.41 1.41L11 6.83V20h2V6.83l1.59 1.58L16 7z"/></svg>
                </i>
                <span>{{ vehicle.current }}</span>
              </div>
            </div>
            
            <!-- 第三行：位置信息 -->
            <div class="card-row location-info">
              <i class="el-icon location-icon">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M512 928c23.936 0 117.504-68.352 192.064-153.152C803.456 661.888 864 535.808 864 416c0-189.632-155.84-320-352-320S160 226.368 160 416c0 120.32 60.544 246.4 159.936 359.232C394.432 859.84 488 928 512 928zm0-435.2a64 64 0 1 0 0-128 64 64 0 0 0 0 128zm0 140.8a204.8 204.8 0 1 1 0-409.6 204.8 204.8 0 0 1 0 409.6z"></path></svg>
              </i>
              <span class="location-value">{{ vehicle.location }}</span>
            </div>
            
            <!-- 第四行：负责人和电话 -->
            <div class="card-row contact-info">
              <div class="left-content">
                <i class="el-icon person-icon">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0z"></path></svg>
                </i>
                <span class="contact-name">{{ vehicle.batteryLevel }}</span>
              </div>
              <div class="right-content">
                <i class="el-icon phone-icon">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M768 896a128 128 0 0 0 128-128V256a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512zm0 64H256a192 192 0 0 1-192-192V256a192 192 0 0 1 192-192h512a192 192 0 0 1 192 192v512a192 192 0 0 1-192 192z"></path><path fill="currentColor" d="M542.336 711.552a32 32 0 0 1-33.92-29.44 431.04 431.04 0 0 0-166.272-173.76 32 32 0 0 1-2.048-50.592l42.688-38.816a32 32 0 0 1 43.008 3.328 353.6 353.6 0 0 1 151.936 167.52 32 32 0 0 1-28.8 45.76l-.512-13.28c.448 4.48.704 8.96.512 13.28zm215.808-261.12a32 32 0 0 1-46.08-12.608 803.2 803.2 0 0 0-315.392-280.064 32.128 32.128 0 0 1-9.216-43.392l38.016-51.2a32.128 32.128 0 0 1 44.352-8.448c123.136 88.576 242.688 196.544 339.456 347.648a32 32 0 0 1-11.264 47.424l-39.872 1.344.064-.704z"></path></svg>
                </i>
                <span class="contact-phone">{{ vehicle.contactPhone }}</span>
              </div>
            </div>
            
            <!-- 第五行：品牌和公司 -->
            <div class="card-row company-info">
              <div class="left-content">
                <i class="el-icon brand-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4C7.59 4 4 7.59 4 12s3.59 8 8 8s8-3.59 8-8s-3.59-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6s6 2.69 6 6s-2.69 6-6 6zm-1-10h2v4h-2zm0 5h2v2h-2z"/></svg>
                </i>
                <span class="brand-name">{{ vehicle.brand }}</span>
              </div>
              <div class="right-content">
                <i class="el-icon company-icon">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M160 224a32 32 0 0 0-32 32v544a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V256a32 32 0 0 0-32-32H160zm0-64h704a96 96 0 0 1 96 96v544a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V256a96 96 0 0 1 96-96z"></path><path fill="currentColor" d="M464 224a32 32 0 0 0-32 32v128a32 32 0 0 0 32 32h96a32 32 0 0 0 32-32V256a32 32 0 0 0-32-32h-96zM96 384h128q32 0 32 32t-32 32H96q-32 0-32-32t32-32zm142.4 234.24L326.4 800h64.32l96-170.24-41.92-64.96L384 704l-88.96-149.76-57.6 64z"></path></svg>
                </i>
                <span class="company-name">{{ vehicle.organization }}</span>
              </div>
            </div>
            
            <!-- 第六行：最新更新时间 -->
            <div class="card-row update-time">
              <span class="update-label">最新更新时间：</span>
              <span class="update-value">{{ vehicle.lastTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部统计和分页 -->
    <div class="bottom-stats">
      <div class="status-counters">
        <div class="status-counter online">
          <div class="counter-label">在线设备:</div>
          <div class="counter-value">{{ onlineCount }}</div>
        </div>
        <div class="status-counter offline">
          <div class="counter-label">离线设备:</div>
          <span class="counter-value">{{ offlineCount }}</span>
        </div>
        <div class="status-counter fault">
          <span class="counter-label">故障设备:</span>
          <span class="counter-value">{{ faultCount }}</span>
        </div>
      </div>
      
      <div class="pagination-wrapper">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="currentPage"
          v-model:limit="pageSize"
          @pagination="handlePagination"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, onMounted, onUnmounted } from 'vue';
import Pagination from '@/components/Pagination/index.vue';
import car1 from '@/assets/images/car1.png';
import car2 from '@/assets/images/car2.png';
import car3 from '@/assets/images/car3.png';
import car4 from '@/assets/images/car4.png';

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

const emit = defineEmits(['view', 'control']);

const currentPage = ref(1);
const pageSize = ref(8);
const columnsCount = ref(4);
const cardRowHeight = ref(210);

function resolveColumnsByViewport() {
  const w = window.innerWidth || document.documentElement.clientWidth;
  if (w <= 768) return 1;
  if (w <= 1200) return 2;
  if (w <= 1600) return 3;
  return 4;
}

function updatePageSizeByViewport() {
  const cols = resolveColumnsByViewport();
  columnsCount.value = cols;
  pageSize.value = cols * 2;
  const maxStart = Math.max(0, total.value - pageSize.value);
  const startIndex = (currentPage.value - 1) * pageSize.value;
  if (startIndex > maxStart) {
    currentPage.value = 1;
  }
}

onMounted(() => {
  updatePageSizeByViewport();
  window.addEventListener('resize', updatePageSizeByViewport);
});

onUnmounted(() => {
  window.removeEventListener('resize', updatePageSizeByViewport);
});
const total = computed(() => props.vehicleData.length);

// 筛选后的数据
const filteredVehicleData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.vehicleData.slice(start, end);
});

// 状态统计
const onlineCount = computed(() => 
  props.vehicleData.filter(v => v.status === '在线').length
);
const offlineCount = computed(() => 
  props.vehicleData.filter(v => v.status === '离线').length
);
const faultCount = computed(() => 
  props.vehicleData.filter(v => v.status === '故障').length
);

// 获取车辆图片
function getCarImage(vehicle) {
  switch (vehicle.status) {
    case '在线':
      return car1;
    case '离线':
      return car2;
    case '故障':
      return car3;
    default:
      return car4;
  }
}

// 获取状态类型
function getStatusType(status) {
  switch (status) {
    case '在线':
      return 'success';
    case '离线':
      return 'info';
    case '故障':
      return 'danger';
    default:
      return '';
  }
}

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

// 获取电池百分比
function getBatteryPercentage(soc) {
  return parseInt(soc) || 0;
}

// 获取电池宽度
function getBatteryWidth(soc) {
  const percentage = getBatteryPercentage(soc);
  // 最大宽度为18（因为总宽20，留出左右边距）
  return Math.max(1, Math.min(18, (percentage / 100) * 18));
}

// 获取电池颜色
function getBatteryColor(soc) {
  const percentage = getBatteryPercentage(soc);
  if (percentage > 70) return '#67C23A';
  if (percentage > 30) return '#E6A23C';
  return '#F56C6C';
}

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

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

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

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

.cards-container {
  height: calc(var(--card-row-height) * 2 + 15px);
  max-height: calc(100% - 50px);
  overflow-y: auto;
  padding: 10px 0;
}

.cards-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--card-row-height);
  gap: 15px;
}

.vehicle-card {
  background-color: #343744;
  color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* 鼠标悬停效果 */
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #3a3f4d;
  }
  
  /* 点击效果 */
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  /* 顶部状态颜色 */
  &.task-status {
    border-top: 4px solid #5690e7;
  }
  
  &.idle-status {
    border-top: 4px solid #c3c3c3;
  }

  
  &.waiting-status {
    border-top: 4px solid #ff312f;
  }
}

.card-content {
  padding: 15px;
}

.card-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.card-header {
    justify-content: space-between;
    margin-bottom: 15px;
    
    .left-content {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .car-icon {
        width: 24px;
        height: 24px;
      }
      
      .vehicle-info {
        display: flex;
        flex-direction: column;
        
        .vehicle-id {
          font-size: 16px;
          font-weight: bold;
        }
        
        .vehicle-type {
          font-size: 12px;
          color: #96a0b5;
        }
      }
    }
    
    .status-tag {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      
      &.task {
        background-color: #5690e7;
        color: #fff;
      }
      
      &.idle {
        background-color: #c3c3c3;
        color: #fff;
      }
      
      &.waiting {
        background-color: #ff312f;
        color: #fff;
      }
    }
  }
  
  &.battery-info {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .info-item {
      display: flex;
      align-items: center;
      
      .battery-container {
        display: flex;
        align-items: center;
        background-color: rgba(0, 255, 132, 0.2); /* #00ff84 with 20% opacity */
        border-radius: 4px;
        padding: 4px 8px;
        
        .battery-icon {
          display: flex;
          align-items: center;
        }
        
        .lightning-icon {
          font-size: 12px;
          margin: 0 4px;
          color: #00ff84;
        }
        
        .percentage {
          font-size: 12px;
          font-weight: bold;
          color: #00ff84;
        }
      }
      
      i.el-icon {
        font-size: 18px;
        color: #67C23A;
        
        &.voltage-icon,
        &.current-icon {
          color: #409EFF;
        }
      }
    }
    
    .divider {
      color: #5e6778;
    }
  }
  
  &.location-info {
    color: #96a0b5;
    font-size: 14px;
    
    i.location-icon {
      color: #409EFF;
      margin-right: 4px;
      font-size: 18px;
    }
  }
  
  &.contact-info,
  &.company-info {
    display: flex;
    justify-content: space-between;
    
    .left-content,
    .right-content {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #96a0b5;
      font-size: 14px;
      
      i {
        color: #409EFF;
        font-size: 18px;
      }
    }
  }
  
  &.update-time {
    font-size: 12px;
    color: #5e6778;
    
    .update-label {
      margin-right: 4px;
    }
  }
}

.bottom-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 5px;
  border-top: 1px solid #4C4F5F;
  
  .status-counters {
    display: flex;
    align-items: center;
    gap: 10px;
    
    .status-counter {
      display: flex;
      align-items: center;
      
      .counter-label {
        color: #96A0B5;
        margin-right: 5px;
      }
      
      &.online .counter-value {
        color: #67C23A;
      }
      
      &.offline .counter-value {
        color: #909399;
      }
      
      &.fault .counter-value {
        color: #F56C6C;
      }
    }
  }
  
  .pagination-wrapper {
    margin-left: auto;
  }
}

/* 自定义EL组件样式 */
:deep(.el-button.is-text) {
  color: #347AE2;
}

:deep(.el-pagination) {
  margin-top: 0;
  justify-content: flex-end;
}

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

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

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

/* 响应式设计 */
@media (max-width: 1600px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .bottom-stats {
    height: auto;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    .status-counters {
      width: 100%;
      justify-content: space-between;
    }
    .pagination-wrapper {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
