<template>
  <div class="map-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <div class="action-btn" >
          <van-icon name="arrow-left" class="nav-back" @click="goBack" />
        </div>
        <h1 class="nav-title">监控地图</h1>
      </div>
      
      <div class="nav-right">
        <div class="action-btn" >
          <van-icon name="location" />
        </div>
        <div class="action-btn" :class="{ active: showFilter }" >
          <van-icon name="filter-o" @click="showFilter = !showFilter" />
        </div>
      </div>
    </div>
    <!-- 地图区域 -->
    <div class="map-container">
      <!-- 筛选面板 -->
      <div v-if="showFilter"  class="filter-panel-container">
        <div  class="filter-panel">
        <div class="filter-section">
          <div class="filter-label">区域筛选</div>
          <div class="filter-tags">
            <button
              v-for="area in areas"
              :key="area"
              class="filter-tag"
              :class="{ active: filterArea === area }"
              @click="filterArea = area"
            >
              {{ area }}
            </button>
          </div>
        </div>
        <div class="filter-row">
          <span class="filter-row-label">仅显示收藏</span>
          <van-switch v-model="showFavoriteOnly" size="20" />
        </div>
      </div>
      </div>
      <ul class="alett-btn">
        <li>在线 <span>5</span></li>
        <li>离线 <span>2</span></li>
      </ul>
      <GdMap mapid="map-page-map" :is-show="false" />

      <!-- 标记详情卡片 -->
      <div class="marker-card" v-show="showCard">
        <div class="card-header">
          <div class="card-info">
            <span class="card-title">长江大桥监控</span>
            <span class="line">在线</span>
          </div>
          <van-icon name="cross" class="close-icon"  />
        </div>
        <div>
          <van-icon name="location-o" color="#89909d" />
          <span class="card-location">江苏省南京市长江大桥</span>
        </div>
        <div class="btn-box">
          <span class="smallBtn">桥梁监控</span>
          <span class="smallBtn">江岸区</span>
          <span class="smallBtn">M002</span>
        </div>
        <div class="card-footer">
          <span class="card-btn"><van-icon name="eye-o" size="16px" style="top:2px;margin-right: 10px;" />查看视频</span>
          <span class="detail-btn" > 详情</span>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <BottomTabs :active-tab="'map'" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import BottomTabs from "@/components/bottomTabs.vue";
import GdMap from "@/components/GdMap/index.vue";
const router = useRouter();
const showCard = ref(false); //展示卡片
// 区域列表
const areas = ["全部", "江汉区", "江岸区", "洪山区", "武昌区"];
const showFavoriteOnly = ref(false);
const showFilter = ref(false);
// 页面加载时获取数据
onMounted(() => {
});

// 返回
function goBack() {
  router.back();
}


</script>

<style lang="scss" scoped>
.map-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2057e0;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #fff;

  .nav-back {
    font-size: 24px;
  }

  .nav-title {
    font-size: 17px;
    font-weight: 600;
  }
  .nav-left{
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .action-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;

    &.active {
      background: white;
      color: #2563eb;
    }
  }
}



.map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #eff9f9;
  .filter-panel-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    background-color: #2563eb;
    z-index: 100;
  }
.filter-panel {
  background: rgb(94, 138, 233);
  border-radius: 16px;
  padding: 16px;

  .filter-section {
    margin-bottom: 12px;

    .filter-label {
      font-size: 14px;
      color: white;
      margin-bottom: 8px;
    }

    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-tag {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: none;

      &.active {
        background: white;
        color: #2563eb;
        font-weight: 500;
      }
    }
  }

  .filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .filter-row-label {
      font-size: 14px;
      color: white;
    }
  }
}
  .alett-btn{
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    gap: 12px;
    background: #fff;
    padding: 6px 6px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    li{
      display: flex;
      align-items: center;
      position: relative;
      color: #4d5868;
      margin-left: 15px;
      span{
        margin-left: 6px;
      }
      &:before{
        content: '';
        position: absolute;
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #10b981;
      }
      &:nth-child(2):before{
        background: #4d5868;
      }
    }
  }
}

.marker-card {
  position: absolute;
  bottom: 90px;
  left: 50%;
  right: 0;
  transform: translateX(-50%);
  width: 80%;
  background: white;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  z-index: 20;
  animation: slideUp 0.3s ease;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .card-info {
      display: flex;
      align-items: center;
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 4px;
      }
      .line{
        display: inline-block;
        font-size: 12px;
        color: #10b981;
        background: #d1fae5;
        border-radius: 4px;
        padding: 1px 4px;
        margin-left: 10px;
      }
    }

    .close-icon {
      font-size: 20px;
      color: #9ca3af;
      padding: 4px;
    }
  }

  .card-location{
    margin-left: 5px;
    color: #89909d;
    font-size: 14px;
  }
  .btn-box{
    color: #89909d;
    font-size: 14px;
    span{
      display: inline-block;
      margin-right: 6px;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 13px;
      margin: 10px 0;
      &:nth-child(1){
        background: #e0e7ff;
        color: #4338ca;
      }
      &:nth-child(2){
        background: #f3f4f6;
        color: #4d5868;
      }
    }
  }
  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-btn {
      flex: 1;
      font-size: 13px;
      color: #fff;
      text-align: center;
      height: 40px;
      line-height: 40px;
      background: #2b7fff;
      border-radius: 4px;
    }

    .detail-btn {
      width: 60px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 13px;
      margin-left: 8px;
      background: #f3f4f6;
      border-radius: 4px;
      color: #4d5868;
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}


</style>