<template>
  <div class="search-filter">
    <div class="search-area">
      <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': viewMode === 'list'}" 
            @click="switchView('list')"
            title="列表视图"
          >
            <svg-icon icon-class="table" />
          </div>
          <div 
            class="view-btn card-view" 
            :class="{'active': viewMode === 'card'}" 
            @click="switchView('card')"
            title="卡片视图"
          >
            <svg-icon icon-class="dashboard" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  filters: {
    type: Object,
    default: () => ({})
  },
  viewMode: {
    type: String,
    default: 'list'
  }
});

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

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

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

// 处理搜索输入
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 switchView(type) {
  emit('switch-view', type);
}
</script>

<style scoped lang="scss">
.search-filter {
  width: 100%;
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  align-items: center;
  
  .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;
        }
      }
    }
  }
}

// 输入框 下拉框 搜索栏
: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;
  }
}

// 媒体查询，处理响应式布局
@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> 