<template>
  <div class="maps">
    <div class="page-header">
      <h1>最近地图上传</h1>
      <div class="view-toggle-group icon-group header-toggle-group">
        <button 
          class="view-toggle-btn icon-btn" 
          :class="{ active: viewMode === 'table' }" 
          @click="viewMode = 'table'"
          title="表格视图"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5"/></svg>
        </button>
        <button 
          class="view-toggle-btn icon-btn" 
          :class="{ active: viewMode === 'card' }" 
          @click="viewMode = 'card'"
          title="卡片视图"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>
        </button>
      </div>
    </div>
    <div class="filters-row">
      <div class="filters">
        <div class="search-box sticky-search-box">
          <span class="search-label">搜索：</span>
          <input
            type="text"
            placeholder="搜索地图..."
            v-model="searchValue"
            @keyup.enter="handleSearch"
            class="search-input"
          >
          <button v-if="searchValue" class="clear-btn" @click="clearSearch" title="清空">
            <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><line x1="5" y1="5" x2="15" y2="15" stroke="#bbb" stroke-width="2" stroke-linecap="round"/><line x1="15" y1="5" x2="5" y2="15" stroke="#bbb" stroke-width="2" stroke-linecap="round"/></svg>
          </button>
          <button class="search-btn-icon" @click="handleSearch" title="搜索">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="7" stroke="#2563eb" stroke-width="2"/><line x1="14.4142" y1="14" x2="18" y2="17.5858" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/></svg>
          </button>
        </div>
        <label>玩家数：</label>
        <select v-model="playerCountFilter" class="filter-select" @change="handleFilterChange">
          <option value="">全部</option>
          <option v-for="n in [2,3,4,5,6,7,8]" :key="n" :value="n">{{ n }}人</option>
        </select>
        <label>分类：</label>
        <select v-model="tagFilter" class="filter-select" @change="handleFilterChange">
          <option value="">全部</option>
          <option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
        </select>
        <label>排序：</label>
        <select v-model="selectedOrder" class="filter-select" @change="handleFilterChange">
          <option v-for="opt in orderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
        </select>
      </div>
      <div class="view-toggle-group icon-group filters-toggle-group">
        <button 
          class="view-toggle-btn icon-btn" 
          :class="{ active: viewMode === 'table' }" 
          @click="viewMode = 'table'"
          title="表格视图"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5"/></svg>
        </button>
        <button 
          class="view-toggle-btn icon-btn" 
          :class="{ active: viewMode === 'card' }" 
          @click="viewMode = 'card'"
          title="卡片视图"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>
        </button>
      </div>
    </div>
    <div class="table-container" v-if="viewMode === 'table'">
      <table class="maps-table">
        <thead>
          <tr>
            <th>预览图</th>
            <th>地图名称</th>
            <th>作者</th>
            <th>下载次数</th>
            <th>收藏次数</th>
            <th>玩家数量</th>
            <th>创建时间</th>
            <th>标签</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="map in maps" :key="map.id" @click="goToMapDetail(map.id)" class="table-row">
            <td class="preview-cell">
              <img :src="map.thumbnail" :alt="map.chinese_name">
            </td>
            <td class="map-name">{{ map.chinese_name }}</td>
            <td>{{ map.user }}</td>
            <td>{{ map.download_count }}</td>
            <td>{{ map.favourite_count }}</td>
            <td>{{ map.player_count }}</td>
            <td>{{ formatDate(map.create_time) }}</td>
            <td>
              <div class="tags">
                <span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="maps.length === 0" class="empty-tip">暂无此地图</div>
    </div>
    <div v-else class="card-list-container">
      <div class="card-list">
        <div class="map-card" v-for="map in maps" :key="map.id" @click="goToMapDetail(map.id)">
          <img :src="map.thumbnail" :alt="map.chinese_name" class="card-image" />
          <div class="card-content">
            <div class="card-title">{{ map.chinese_name }}</div>
            <div class="card-author">作者：{{ map.user }}</div>
            <div class="card-info">
              <span>下载：{{ map.download_count }}</span>
              <span>收藏：{{ map.favourite_count }}</span>
              <span>玩家：{{ map.player_count }}</span>
            </div>
            <div class="card-date">{{ formatDate(map.create_time) }}</div>
            <div class="tags">
              <span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="maps.length === 0" class="empty-tip">暂无此地图</div>
    </div>
    
    <!-- 分页控件 -->
    <div class="pagination">
      <button 
        class="page-btn" 
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        <span class="page-btn-text desktop-only">上一页</span>
        <span class="page-btn-arrow mobile-only">&#8592;</span>
      </button>
      
      <div class="page-numbers">
        <template v-for="(page, index) in displayedPages" :key="index">
          <button 
            v-if="typeof page === 'number'"
            class="page-number"
            :class="{ active: page === currentPage }"
            @click="changePage(page)"
          >{{ page }}</button>
          <span v-else class="page-ellipsis">{{ page }}</span>
        </template>
      </div>
      
      <button 
        class="page-btn" 
        :disabled="!hasNextPage"
        @click="changePage(currentPage + 1)"
      >
        <span class="page-btn-text desktop-only">下一页</span>
        <span class="page-btn-arrow mobile-only">&#8594;</span>
      </button>

      <div class="page-jump">
        <input 
          type="number" 
          v-model="jumpPage" 
          :min="1" 
          :max="totalPages"
          class="jump-input"
          @keyup.enter="handleJumpPage"
        >
        <button class="jump-btn" @click="handleJumpPage">跳转</button>
      </div>
    </div>
    <button v-if="showBackTop && isMobile" class="back-to-top-btn" @click="scrollToTop">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 19V5" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/><path d="M6 11L12 5L18 11" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/></svg>
    </button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getMaps, getAllTags } from '../../api/maps.js'
import '../../assets/styles/common.css'
import '../../assets/styles/Maps.css'

const router = useRouter()
const maps = ref([])
const currentPage = ref(1)
const totalPages = ref(1)
const hasNextPage = ref(false)
const jumpPage = ref('')
const viewMode = ref('table')
const showBackTop = ref(false)
const isMobile = ref(window.innerWidth <= 700)

// 排序和筛选相关
const orderOptions = [
  { label: '创建时间降序', value: ' -create_time' },
  { label: '创建时间升序', value: 'create_time' },
  { label: '下载量降序', value: ' -download_count' },
  { label: '下载量升序', value: 'download_count' },
  { label: '收藏数降序', value: ' -favourite_count' },
  { label: '收藏数升序', value: 'favourite_count' }
]
const selectedOrder = ref(' -create_time')
const searchValue = ref('')
const playerCountFilter = ref('')
const tagFilter = ref('')
const tagOptions = ref([])

// 计算显示的页码
const displayedPages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = currentPage.value

  if (total <= 5) {
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else if (current <= 3) {
    pages.push(1, 2, 3, 4, '...', total)
  } else if (current >= total - 2) {
    pages.push(1, '...')
    for (let i = total - 2; i <= total; i++) {
      if (i > 1) pages.push(i)
    }
  } else {
    pages.push(1, '...', current - 1, current, current + 1, '...', total)
  }
  return pages
})

// 获取地图数据
const fetchMaps = async (page = 1) => {
  try {
    const params = {
      page,
      search: searchValue.value,
      player_count: playerCountFilter.value,
      tags: tagFilter.value,
      ordering: selectedOrder.value
    }
    const data = await getMaps(params)

    maps.value = data.results
    hasNextPage.value = !!data.next
    totalPages.value = Math.ceil(data.count / 20)
    currentPage.value = page
    console.log('分页状态:', {
      currentPage: currentPage.value,
      totalPages: totalPages.value,
      hasNextPage: hasNextPage.value,
      resultsCount: data.results.length
    })
  } catch (error) {
    console.error('获取地图列表失败:', error)
  }
}

// 搜索按钮和回车触发搜索
const handleSearch = () => {
  fetchMaps(1)
}

// 处理筛选条件变化
const handleFilterChange = () => {
  console.log('筛选条件变化:', {
    playerCount: playerCountFilter.value,
    tag: tagFilter.value,
    order: selectedOrder.value
  })
  fetchMaps(1)
}

// 处理页码跳转
const handleJumpPage = () => {
  const page = parseInt(jumpPage.value)
  if (page && page >= 1 && page <= totalPages.value) {
    changePage(page)
  }
  jumpPage.value = ''
}

// 切换页码
const changePage = (page) => {
  console.log('尝试切换页码:', page, '当前页码:', currentPage.value, '总页数:', totalPages.value)
  if (page < 1 || page > totalPages.value) {
    console.log('页码无效:', page)
    return
  }
  currentPage.value = page
  fetchMaps(page)
  // 滚动到页面顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 跳转到地图详情
const goToMapDetail = (id) => {
  // 保存当前状态
  const state = {
    viewMode: viewMode.value,
    currentPage: currentPage.value,
    searchValue: searchValue.value,
    playerCountFilter: playerCountFilter.value,
    tagFilter: tagFilter.value,
    selectedOrder: selectedOrder.value
  }
  sessionStorage.setItem('maps_state', JSON.stringify(state))
  router.push(`/map/${id}`)
}

// 格式化日期
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

// 清除搜索内容
const clearSearch = () => {
  searchValue.value = ''
  fetchMaps(1)
}

const handleScroll = () => {
  showBackTop.value = window.scrollY > 200
}
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

let searchBoxEl = null
const tabBarHeight = 56 // 按实际tab栏高度调整

const stickyStyles = {
  position: 'fixed',
  top: tabBarHeight + 'px',
  left: '50%',
  transform: 'translateX(-50%)',
  zIndex: 2001,
  width: '92vw',
  maxWidth: '98vw',
  boxShadow: '0 2px 12px rgba(37,99,235,0.13)'
}

function handleStickySearchBox() {
  if (!searchBoxEl) return
  if (window.innerWidth <= 700 && window.scrollY > tabBarHeight) {
    Object.entries(stickyStyles).forEach(([k, v]) => (searchBoxEl.style[k] = v))
  } else {
    Object.keys(stickyStyles).forEach(k => (searchBoxEl.style[k] = ''))
  }
}

onMounted(() => {
  // 恢复保存的状态
  const savedState = sessionStorage.getItem('maps_state')
  if (savedState) {
    const state = JSON.parse(savedState)
    viewMode.value = state.viewMode
    currentPage.value = state.currentPage
    searchValue.value = state.searchValue
    playerCountFilter.value = state.playerCountFilter
    tagFilter.value = state.tagFilter
    selectedOrder.value = state.selectedOrder
    // 使用保存的状态重新获取数据
    fetchMaps(currentPage.value)
  } else {
    // 如果没有保存的状态，根据屏幕宽度设置视图模式
    if (window.innerWidth <= 700) {
      viewMode.value = 'card'
    }
    fetchMaps(1)
  }
  
  getAllTags().then(tags => {
    tagOptions.value = tags
  })
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 700
  })
  searchBoxEl = document.querySelector('.sticky-search-box')
  window.addEventListener('scroll', handleStickySearchBox)
  window.addEventListener('resize', handleStickySearchBox)
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', handleStickySearchBox)
})
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 0 0;
}
.page-btn {
  padding: 6px 16px;
  border: none;
  background: #e3f0ff;
  color: #2563eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.page-btn:disabled {
  background: #f5f5f5;
  color: #aaa;
  cursor: not-allowed;
}
.page-numbers {
  display: flex;
  gap: 4px;
}
.page-number {
  padding: 6px 12px;
  border: none;
  background: #f5f5f5;
  color: #2563eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.page-number.active {
  background: #2563eb;
  color: #fff;
}
.page-ellipsis {
  padding: 6px 8px;
  color: #aaa;
  font-size: 14px;
}
.page-jump {
  display: flex;
  align-items: center;
  gap: 4px;
}
.jump-input {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.jump-btn {
  padding: 4px 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.jump-btn:hover {
  background: #1a237e;
}
.page-header {
  display: block;
  position: relative;
  margin-bottom: 30px;
}
.page-header h1 {
  margin-bottom: 0;
}
.view-toggle-group {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: none;
}
.view-toggle-btn {
  background: #f5f7fa;
  color: #2563eb;
  border: none;
  padding: 6px 22px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  outline: none;
}
.view-toggle-btn.active {
  background: #2563eb;
  color: #fff;
  z-index: 1;
}
.view-toggle-btn:not(.active):hover {
  background: #e3f0ff;
  color: #1a237e;
}
.view-toggle-btn:first-child {
  border-right: 1px solid #2563eb22;
}
.view-toggle-btn:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.card-list-container {
  width: 100%;
  margin-top: 20px;
}
.card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.map-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 280px;
  max-height: 280px;
  overflow: hidden;
}
.map-card:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,0.15);
  transform: translateY(-2px) scale(1.03);
}
.card-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #f5f5f5;
  display: block;
}
.card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  overflow: hidden;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #1a237e;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-author {
  font-size: 14px;
  color: #666;
  margin-bottom: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}
.card-info {
  font-size: 13px;
  color: #2563eb;
  margin-bottom: 2px;
  display: flex;
  gap: 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}
.card-date {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.tag {
  padding: 2px 8px;
  background: #f5f7fa;
  color: #2563eb;
  border-radius: 4px;
  font-size: 12px;
}
@media (max-width: 1200px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .search-box {
    /* 移除 position: fixed 相关样式，交由JS控制 */
    /* position: fixed; */
    /* top: 0; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* z-index: 2001; */
    /* width: 92vw; */
    /* max-width: 98vw; */
    /* box-shadow: 0 2px 12px rgba(37,99,235,0.13); */
  }
  .search-input {
    width: 100%;
    min-width: 0;
    font-size: 15px;
    background: transparent;
    border: none;
    outline: none;
  }
  body {
    padding-top: 70px;
  }
  .filter-select {
    width: 100%;
    font-size: 15px;
    margin-bottom: 0;
  }
  .view-toggle-group.icon-group {
    margin-top: 4px;
    justify-content: center;
    width: 100%;
  }
  .icon-btn {
    min-width: 40px;
    height: 40px;
  }
  .filters label {
    margin-bottom: 2px;
    font-size: 14px;
  }
  .search-label {
    display: none !important;
  }
  .header-toggle-group {
    display: flex !important;
    position: static;
    justify-content: flex-end;
    margin-top: 12px;
    margin-bottom: 10px;
    width: 100%;
    background: none;
    box-shadow: none;
  }
  .filters-toggle-group {
    display: none !important;
  }
  .page-header {
    display: block;
    position: relative;
    margin-bottom: 0;
  }
  .card-list {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .map-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    height: auto;
    max-height: none;
    padding: 16px 16px 24px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card-image {
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
    object-fit: contain;
    border-radius: 8px;
    background: #f5f5f5;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    overflow: hidden;
  }
  .card-title {
    font-size: 18px;
    font-weight: bold;
    color: #1a237e;
    margin-bottom: 4px;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    text-align: left;
    word-break: break-all;
  }
  .card-author {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    text-align: left;
  }
  .card-info {
    font-size: 13px;
    color: #2563eb;
    margin-bottom: 6px;
    display: flex;
    gap: 10px;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    text-align: left;
  }
  .card-date {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    text-align: left;
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 0;
  }
  .tag {
    padding: 4px 8px;
    background: #f5f7fa;
    color: #2563eb;
    border-radius: 4px;
    font-size: 12px;
  }
  .page-jump {
    display: none !important;
  }
  .page-btn-text.desktop-only {
    display: none !important;
  }
  .page-btn-arrow.mobile-only {
    display: inline !important;
    font-size: 20px;
    vertical-align: middle;
  }
  .back-to-top-btn {
    display: flex;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.12);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
  }
  .back-to-top-btn:hover {
    background: #e3f0ff;
  }
  .back-to-top-btn svg {
    display: block;
  }
}
@media (min-width: 701px) {
  .header-toggle-group {
    display: none !important;
  }
  .filters-toggle-group {
    display: flex !important;
  }
  .page-btn-text.desktop-only {
    display: inline !important;
  }
  .page-btn-arrow.mobile-only {
    display: none !important;
  }
}
.filters-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.icon-group {
  display: flex;
  align-items: center;
  height: 36px;
  margin-top: 2px;
}
.icon-btn {
  padding: 4px 8px;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #2563eb;
  border: none;
  border-radius: 0;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
  outline: none;
}
.icon-btn.active {
  background: #2563eb;
  color: #fff;
}
.icon-btn:not(.active):hover {
  background: #e3f0ff;
  color: #1a237e;
}
.icon-btn:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right: 1px solid #2563eb22;
}
.icon-btn:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input {
  height: 36px;
  line-height: 36px;
  padding: 0 36px 0 12px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  background: #fff;
}
.search-btn-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.search-btn-icon:hover {
  background: #e3f0ff;
}
.search-btn-icon svg {
  display: block;
}
.empty-tip {
  text-align: center;
  color: #aaa;
  font-size: 18px;
  margin: 32px 0 24px 0;
  letter-spacing: 2px;
}
.clear-btn {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  z-index: 2;
}
.clear-btn:hover {
  background: #f5f5f5;
}
.clear-btn svg {
  display: block;
}
.search-label {
  font-size: 15px;
  color: #222;
  margin-right: 6px;
  white-space: nowrap;
  display: inline-block;
}
</style> 