<template>
  <div>
    <div class="event-list-container">
      <CarDetail v-if="selectedCar" :car="selectedCar" @back="selectedCar = null" />
      <div  v-else class="event-list-header">
        <div class="header-title">
         <img src="../../../assets/images/sub_icon.png" alt="list_bg" class="header-title-icon">
          <div class="header-title-text">车辆列表 ({{ totalCount }})</div>
        </div>
        <div class="header-actions">
          <FilterDropdown 
            v-model="statusFilter" 
            :options="statusOptions" 
            @change="handleFilterChange"
          />
          <FilterDropdown 
            v-model="typeFilter" 
            :options="typeOptions" 
            @change="handleFilterChange"
          />
          <div class="search-box">
            <input type="text" placeholder="请输入关键字搜索" />
            <div class="search-icon"></div>
          </div>
        </div>
      </div>
      <div class="event-list-content">
        <div 
          v-for="(car, index) in filteredCarList" 
          :key="car.id" 
          class="car-item"
          :class="{ 'fault': car.status === 'fault', 'online': car.status === 'online', 'offline': car.status === 'offline' }"
          @click="showDetail(car)"
        >
          <div class="car-main-info">
            <div class="car-id">{{ car.id }} ({{ car.type }})</div>
            <div class="car-actions">
              <div class="status-btn" :class="car.taskStatus">{{ getTaskStatusText(car.taskStatus) }}</div>
              <div class="online-status" :class="car.status">{{ getStatusText(car.status) }}</div>
            </div>
          </div>
          <div class="car-details">
            <div class="detail-row">
              <div class="detail-item">
                <span class="detail-label">行驶速度:</span>
                <span class="detail-value">{{ car.speed }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">行驶距离:</span>
                <span class="detail-value">{{ car.distance }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <span class="detail-label">任务进度:</span>
                <span class="detail-value">{{ car.progress }}%</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">负责人:</span>
                <span class="detail-value">{{ car.manager }}</span>
              </div>
            </div>
            <div class="car-owner">
              <span class="owner-icon"></span>
              <span class="owner-name">{{ car.owner }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="event-list-pagination">
        <div class="page-btn active">1</div>
        <div class="page-btn">2</div>
        <div class="page-btn">3</div>
        <div class="page-btn">4</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import CarDetail from './CarDetail.vue';
import FilterDropdown from './FilterDropdown.vue';

// 状态筛选选项
const statusOptions = [
  { label: '全部', value: 'all' },
  { label: '在线', value: 'online' },
  { label: '离线', value: 'offline' },
  { label: '故障', value: 'fault' }
];

// 车辆类型筛选选项
const typeOptions = [
  { label: '全部', value: 'all' },
  { label: '驱鸟车', value: '驱鸟车' },
  { label: '牵引车', value: '牵引车' },
  { label: '接驳车', value: '接驳车' }
];

// 当前选中的筛选值
const statusFilter = ref('all');
const typeFilter = ref('all');

// 车辆数据
const carList = ref([
  {
    id: 'QN001',
    type: '作业车',
    status: 'online',
    taskStatus: 'task',
    speed: '56.7km/h',
    distance: '56.7km/h',
    progress: 60,
    manager: '张三',
    owner: '天人主控001'
  },
  {
    id: 'QN002',
    type: '巡查车',
    status: 'offline',
    taskStatus: 'idle',
    speed: '56.7km/h',
    distance: '56.7km/h',
    progress: 60,
    manager: '张三',
    owner: '天人主控001'
  },
  {
    id: 'QN003',
    type: '巡查车',
    status: 'fault',
    taskStatus: 'repair',
    speed: '56.7km/h',
    distance: '56.7km/h',
    progress: 60,
    manager: '张三',
    owner: '天人主控001'
  },
  {
    id: 'QN004',
    type: '巡查车',
    status: 'online',
    taskStatus: 'task',
    speed: '56.7km/h',
    distance: '56.7km/h',
    progress: 60,
    manager: '张三',
    owner: '天人主控001'
  },
  {
    id: 'QN005',
    type: '巡查车',
    status: 'fault',
    taskStatus: 'repair',
    speed: '56.7km/h',
    distance: '56.7km/h',
    progress: 60,
    manager: '张三',
    owner: '天人主控001'
  }
]);

// 计算总数
const totalCount = computed(() => carList.value.length);

// 筛选后的车辆列表
const filteredCarList = computed(() => {
  return carList.value.filter(car => {
    // 状态筛选
    if (statusFilter.value !== 'all' && car.status !== statusFilter.value) {
      return false;
    }
    
    // 类型筛选
    if (typeFilter.value !== 'all' && car.type !== typeFilter.value) {
      return false;
    }
    
    return true;
  });
});

// 处理筛选变化
function handleFilterChange() {
  // 可以在这里添加额外的筛选逻辑
  console.log('筛选条件变更:', { status: statusFilter.value, type: typeFilter.value });
}

// 获取状态文本
function getStatusText(status) {
  switch(status) {
    case 'online': return '在线';
    case 'offline': return '离线';
    case 'fault': return '故障';
    default: return '未知';
  }
}

// 获取任务状态文本
function getTaskStatusText(taskStatus) {
  switch(taskStatus) {
    case 'task': return '任务中';
    case 'idle': return '闲置中';
    case 'repair': return '维修中';
    default: return '未知';
  }
}

// 暴露方法，允许父组件更新数据
defineExpose({
  updateCarList,
});

// 更新车辆列表的方法
function updateCarList(newList) {
  if (newList && Array.isArray(newList)) {
    carList.value = newList;
  }
}

const selectedCar = ref(null);
function showDetail(car) {
  // 移除对不存在的moveToTarget函数的调用
  selectedCar.value = car;
}

onMounted(() => {
  console.log('车辆列表组件已加载');
});
</script>

<style scoped lang="scss">
.event-list-container {
  background: #4F565F;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 391px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  /* background-color: rgba(24, 33, 45, 0.85); */
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
  color: #fff;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
}


.header-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.8;
  font-weight: bold;
  background:url("../../../assets/images/subheading.png") no-repeat;
  background-size:100% 100%;
  padding:5px 10px;
  color: #fff;
 img{
 width: 31px;
 height: 15px;
 margin-right: 5px;
}
}
.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 16px;
  margin: 10px 0;
  gap: 10px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.search-box input {
  background: rgba(19, 26, 36, 0.5);
  border: none;
  border-radius: 4px;
  padding: 6px 30px 6px 10px;
  color: #fff;
  width: 100%;
  font-size: 13px;
  outline: none;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-icon {
  position: absolute;
  right: 10px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.event-list-content {
  flex: 1;
  overflow-y: auto;
  padding:0px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
}


.car-item {
  padding: 10px;
  background-color: #424851;
  border-radius: 6px;
}

.car-main-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.car-id {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}

.car-actions {
  display: flex;
  gap: 8px;
}

.status-btn {
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 11px;
  color: white;
}

.status-btn.task {
  background-color: #5690E7;
}

.status-btn.idle {
  background-color: #BDBDBD;
}

.status-btn.repair {
  background-color: #E8D254;
  color: #333;
}

.car-details {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.detail-item {
  display: flex;
}

.detail-label {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 5px;
}

.car-owner {
  display: flex;
  align-items: center;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.owner-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.6;
}

.online-status {
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 11px;
  color: white;
}

.online-status.online {
  background-color: #5690E7;
}

.online-status.offline {
  background-color: #BDBDBD;
}

.online-status.fault {
  background-color: #B51318;
}

.event-list-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px;
  gap: 5px;
  /* background-color: rgba(19, 26, 36, 0.5); */
}

.page-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  background-color: rgba(36, 76, 120, 0.25);
}

.page-btn.active {
  background-color: rgba(36, 76, 120, 0.5);
  color: #fff;
}

.page-btn:hover:not(.active) {
  background-color: rgba(36, 76, 120, 0.5);
}

/* 滚动条样式 */
.event-list-content::-webkit-scrollbar {
  width: 5px;
}

.event-list-content::-webkit-scrollbar-track {
  background: rgba(19, 26, 36, 0.5);
}

.event-list-content::-webkit-scrollbar-thumb {
  background: rgba(78, 113, 143, 0.5);
  border-radius: 3px;
}

.event-list-content::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 113, 143, 0.8);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .event-list-container {
    width: 280px;
    right: 10px;
  }
  
  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .search-box input {
    width: 100%;
  }
}
</style>
