<template>
  <div class="app-container">
    <!-- GIS 地图展示区 -->
    <div class="map-section" style="margin-bottom: 16px;">
      <div class="map-tabs">
        <div class="map-tab" :class="{ active: mapTab === 'all' }" @click="switchMapTab('all')">全部</div>
        <div class="map-tab" :class="{ active: mapTab === '雨水分区' }" @click="switchMapTab('雨水分区')">雨水分区</div>
        <div class="map-tab" :class="{ active: mapTab === '污水分区' }" @click="switchMapTab('污水分区')">污水分区</div>
      </div>
      <div id="psfqglMainMap" class="map-container" style="height: 350px;"></div>
    </div>

    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
      <el-form-item label="监测点名称">
        <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="地点">
        <el-input v-model="queryParams.district" placeholder="请输入" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="分区类型">
        <el-select v-model="queryParams.partitionType" placeholder="请选择" clearable style="width: 200px">
          <el-option label="雨水分区" value="雨水分区" />
          <el-option label="污水分区" value="污水分区" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <div class="toolbar">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="danger" :disabled="selectedIds.length === 0" @click="handleBatchDelete">删除</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="filteredList" border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="监测点名称" prop="name" min-width="160" />
      <el-table-column label="地点" prop="district" min-width="100" />
      <el-table-column label="分区类型" prop="partitionType" min-width="100" />
      <el-table-column label="数据时间" prop="time" min-width="120" />
      <el-table-column label="排水量" prop="drainage" min-width="90" />
      <el-table-column label="积水量" prop="waterlogging" min-width="90" />
      <el-table-column label="积水等级" prop="level" min-width="80" />
      <el-table-column label="关联设备" min-width="160">
        <template #default="{ row }">
          {{ equipmentNameMap[row.id] || '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleView(row)">查看</el-button>
          <el-button link type="primary" @click="handleEdit(row)">修改</el-button>
          <el-button link type="primary" @click="handleBind(row)">关联设备</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
      :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 16px; justify-content: flex-end;" @size-change="loadData" @current-change="loadData" />

    <!-- 查看详情对话框 -->
    <el-dialog v-model="dialogVisible" title="详情" width="700px" :before-close="handleClose" @opened="onDialogOpened">
      <div class="detail-info">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">监测点名称：</span>
              <span class="info-value">{{ currentRow.name }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">地点：</span>
              <span class="info-value">{{ currentRow.district }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">数据时间：</span>
              <span class="info-value">{{ currentRow.time }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">排水量：</span>
              <span class="info-value">{{ currentRow.drainage }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">积水量：</span>
              <span class="info-value">{{ currentRow.waterlogging }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">积水等级：</span>
              <span class="info-value">{{ currentRow.level }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 关联设备 -->
      <div v-if="viewEquipmentNames.length" class="detail-info" style="margin-top: 12px;">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <span class="info-label">关联设备：</span>
              <span class="info-value">{{ viewEquipmentNames.join('、') }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 地图区域 -->
      <div class="map-section">
        <div class="map-tabs">
          <div class="map-tab active">位置标记</div>
        </div>
        <div id="psfqglViewMap" class="map-container"></div>
      </div>
    </el-dialog>

    <!-- 新增/修改对话框 -->
    <el-dialog v-model="editDialogVisible" :title="editDialogTitle" width="800px" :before-close="handleEditClose"
      @opened="onEditDialogOpened">
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="监测点名称" prop="name">
              <el-input v-model="editForm.name" placeholder="请输入监测点名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地点" prop="district">
              <el-input v-model="editForm.district" placeholder="请输入地点" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数据时间" prop="time">
              <el-date-picker v-model="editForm.time" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分区类型" prop="partitionType">
              <el-select v-model="editForm.partitionType" placeholder="请选择分区类型" style="width:100%">
                <el-option label="雨水分区" value="雨水分区" />
                <el-option label="污水分区" value="污水分区" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="排水量" prop="drainage">
              <el-input-number v-model="editForm.drainage" :precision="2" :min="0" style="width:100%"
                placeholder="请输入排水量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="积水量" prop="waterlogging">
              <el-input-number v-model="editForm.waterlogging" :precision="2" :min="0" style="width:100%"
                placeholder="请输入积水量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="积水等级" prop="level">
              <el-input-number v-model="editForm.level" :min="1" :max="5" :precision="0" style="width:100%"
                placeholder="请输入积水等级(1-5)" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 地图标点区域 -->
      <div class="map-section" style="margin-top: 16px;">
        <div class="map-tabs">
          <div class="map-tab active">位置标记</div>
          <div class="map-tab-action" @click="clearEditMarkers">清除标记</div>
        </div>
        <div id="psfqglEditMap" class="map-container" style="height: 350px;"></div>
        <div class="marker-count">
          经度：{{ editForm.longitude || '未标记' }}，纬度：{{ editForm.latitude || '未标记' }}
        </div>
      </div>

      <template #footer>
        <el-button @click="handleEditClose">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
      </template>
    </el-dialog>

    <!-- 关联设备对话框 -->
    <el-dialog v-model="bindDialogVisible" title="关联设备" width="800px">
      <el-form :model="bindQueryParams" :inline="true" class="search-form">
        <el-form-item label="设备名称">
          <el-input v-model="bindQueryParams.equipmentName" placeholder="请输入设备名称" clearable style="width: 220px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleBindQuery">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="bindTableRef" v-loading="bindLoading" :data="bindTableData" row-key="equipmentId" border
        style="width: 100%" height="400">
        <el-table-column label="选择" width="55" align="center">
          <template #default="{ row }">
            <el-radio v-model="selectedEquipmentId" :label="row.equipmentId">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="设备名称" prop="equipmentName" min-width="160" />
        <el-table-column label="设备编号" prop="equipmentCode" min-width="140" />
        <el-table-column label="设备类型" prop="equipmentTypeName" min-width="120" />
      </el-table>

      <el-pagination v-model:current-page="bindPageNum" v-model:page-size="bindPageSize" :total="bindTotal"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 16px; justify-content: flex-end;" @size-change="loadBindData" @current-change="loadBindData" />

      <template #footer>
        <el-button @click="closeBindDialog">取 消</el-button>
        <el-button type="primary" @click="submitBind">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Psfqgl">
import { ref, computed, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import locationIcon from '@/assets/images/location.png'
import {
  getPartitionPage,
  addPartition,
  updatePartition,
  deletePartition,
  batchDeletePartition,
  getEquipmentPage,
  getEquipmentById,
  bindPartitionEquipment
} from '@/api/drainage'

// 地图标记创建（用Label+img代替Marker）
function createMapMarker(map, bPoint, name, bgColor) {
  const color = bgColor || '#409eff'
  const html = `<div style="text-align:center;cursor:pointer;">
    <div style="color:#fff;background:${color};border-radius:4px;padding:2px 6px;font-size:11px;white-space:nowrap;display:inline-block;margin-bottom:2px;">${name || ''}</div>
    <div><img src="${locationIcon}" style="width:28px;height:28px;display:block;margin:0 auto;"/></div>
  </div>`
  const label = new BMapGL.Label(html, {
    position: bPoint,
    offset: new BMapGL.Size(-30, -50)
  })
  label.setStyle({
    border: 'none',
    background: 'transparent',
    padding: '0'
  })
  map.addOverlay(label)
  return label
}

// ==================== 顶部地图 ====================
let mainMapInstance = null
const mainMapMarkers = ref([])
const mapTab = ref('all')

function switchMapTab(tab) {
  mapTab.value = tab
  renderMainMapMarkers()
}

function initMainMap() {
  const container = document.getElementById('psfqglMainMap')
  if (!container) return
  try {
    mainMapInstance = new BMapGL.Map('psfqglMainMap')
    const centerPoint = new BMapGL.Point(110.393, 28.452)
    mainMapInstance.centerAndZoom(centerPoint, 12)
    mainMapInstance.enableScrollWheelZoom(true)
    renderMainMapMarkers()
  } catch (e) {
    console.error('顶部百度地图初始化失败：', e)
  }
}

function renderMainMapMarkers() {
  if (!mainMapInstance) return
  // 清除旧标记
  mainMapMarkers.value.forEach(label => {
    mainMapInstance.removeOverlay(label)
  })
  mainMapMarkers.value = []

  const list = tableData.value.filter(item => item.longitude && item.latitude)
  const filtered = mapTab.value === 'all'
    ? list
    : list.filter(item => item.partitionType === mapTab.value)

  filtered.forEach(item => {
    const bPoint = new BMapGL.Point(item.longitude, item.latitude)
    const color = item.partitionType === '污水分区' ? '#e6a23c' : '#409eff'
    const label = createMapMarker(mainMapInstance, bPoint, item.name, color)
    mainMapMarkers.value.push(label)
  })
}

// ==================== 搜索参数 ====================
const queryParams = ref({
  name: '',
  district: '',
  partitionType: ''
})

// ==================== 表格数据 ====================
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const loading = ref(false)

// 加载分页数据
async function loadData() {
  loading.value = true
  try {
    const res = await getPartitionPage(pageNum.value, pageSize.value, queryParams.value)
    // 兼容直接返回Page对象（无code包装）和AjaxResult包装两种格式
    const pageData = res.code !== undefined ? res.data : res
    tableData.value = pageData.records || []
    total.value = pageData.total || 0
    renderMainMapMarkers()
    // 解析关联设备名称
    resolveEquipmentNames()
  } catch (e) {
    console.error('加载排水分区数据失败', e)
  } finally {
    loading.value = false
  }
}

// 关联设备名称映射（分区ID -> 设备名称字符串）
const equipmentNameMap = ref({})

async function resolveEquipmentNames() {
  const map = {}
  for (const row of tableData.value) {
    if (row.equipmentId) {
      const ids = row.equipmentId.split(',')
      const names = []
      for (const id of ids) {
        try {
          const res = await getEquipmentById(id.trim())
          const data = res.code !== undefined ? res.data : res
          const info = data && data.equipmentInfo ? data.equipmentInfo : data
          if (info && info.equipmentName) names.push(info.equipmentName)
        } catch (e) { /* skip */ }
      }
      map[row.id] = names.join('、')
    }
  }
  equipmentNameMap.value = map
}

onMounted(() => {
  loadData()
  initMainMap()
})

// 多选
const selectedIds = ref([])
function handleSelectionChange(selection) {
  selectedIds.value = selection.map(item => item.id)
}

// 表格数据直接用 tableData（已是分页数据）
const filteredList = computed(() => tableData.value)

// 搜索
function handleQuery() {
  pageNum.value = 1
  loadData()
}

// ==================== 查看详情对话框 ====================
const dialogVisible = ref(false)
const currentRow = ref({})
let viewMapInstance = null

const viewEquipmentNames = ref([])

async function handleView(row) {
  currentRow.value = { ...row }
  dialogVisible.value = true
  // 解析关联设备名称
  viewEquipmentNames.value = []
  if (row.equipmentId) {
    const ids = row.equipmentId.split(',')
    const names = []
    for (const id of ids) {
      try {
        const res = await getEquipmentById(id.trim())
        const data = res.code !== undefined ? res.data : res
        const info = data && data.equipmentInfo ? data.equipmentInfo : data
        if (info && info.equipmentName) names.push(info.equipmentName)
      } catch (e) { /* skip */ }
    }
    viewEquipmentNames.value = names
  }
}

function handleClose() {
  dialogVisible.value = false
  if (viewMapInstance) {
    viewMapInstance = null
  }
}

function onDialogOpened() {
  setTimeout(() => {
    initViewMap()
  }, 300)
}

function initViewMap() {
  const container = document.getElementById('psfqglViewMap')
  if (!container) return

  try {
    viewMapInstance = new BMapGL.Map('psfqglViewMap')
    const centerLng = currentRow.value.longitude || 110.393
    const centerLat = currentRow.value.latitude || 28.452
    const centerPoint = new BMapGL.Point(centerLng, centerLat)
    viewMapInstance.centerAndZoom(centerPoint, 15)
    viewMapInstance.enableScrollWheelZoom(true)

    // 如果有坐标，显示标记
    if (currentRow.value.longitude && currentRow.value.latitude) {
      const bPoint = new BMapGL.Point(currentRow.value.longitude, currentRow.value.latitude)
      createMapMarker(viewMapInstance, bPoint, currentRow.value.name)
    }
  } catch (e) {
    console.error('百度地图初始化失败：', e)
  }
}

// ==================== 新增/修改对话框 ====================
const editDialogVisible = ref(false)
const editDialogTitle = ref('新增监测点')
const editFormRef = ref(null)
const isEditMode = ref(false)
const editRowId = ref(null)

const editForm = ref({
  name: '',
  district: '',
  partitionType: '',
  time: '',
  drainage: 0,
  waterlogging: 0,
  level: 1,
  longitude: null,
  latitude: null
})

const editRules = {
  name: [{ required: true, message: '请输入监测点名称', trigger: 'blur' }],
  time: [{ required: true, message: '请选择数据时间', trigger: 'change' }]
}

// 编辑弹窗地图相关
let editMapInstance = null
let editMarkerLabel = null

function handleAdd() {
  isEditMode.value = false
  editDialogTitle.value = '新增监测点'
  editRowId.value = null
  editForm.value = {
    name: '',
    district: '',
    partitionType: '',
    time: '',
    drainage: 0,
    waterlogging: 0,
    level: 1,
    longitude: null,
    latitude: null
  }
  editDialogVisible.value = true
}

function handleEdit(row) {
  isEditMode.value = true
  editDialogTitle.value = '修改监测点'
  editRowId.value = row.id
  editForm.value = {
    name: row.name,
    district: row.district,
    partitionType: row.partitionType,
    time: row.time,
    drainage: row.drainage,
    waterlogging: row.waterlogging,
    level: row.level,
    longitude: row.longitude,
    latitude: row.latitude
  }
  editDialogVisible.value = true
}

function handleEditClose() {
  editDialogVisible.value = false
  if (editMapInstance) {
    editMapInstance = null
  }
  editMarkerLabel = null
}

function onEditDialogOpened() {
  setTimeout(() => {
    initEditMap()
  }, 300)
}

function initEditMap() {
  const container = document.getElementById('psfqglEditMap')
  if (!container) return

  try {
    editMapInstance = new BMapGL.Map('psfqglEditMap')
    const centerLng = editForm.value.longitude || 110.393
    const centerLat = editForm.value.latitude || 28.452
    const centerPoint = new BMapGL.Point(centerLng, centerLat)
    editMapInstance.centerAndZoom(centerPoint, 15)
    editMapInstance.enableScrollWheelZoom(true)

    // 如果已有坐标，显示标记
    if (editForm.value.longitude && editForm.value.latitude) {
      const bPoint = new BMapGL.Point(editForm.value.longitude, editForm.value.latitude)
      editMarkerLabel = createMapMarker(editMapInstance, bPoint, editForm.value.name)
    }

    // 点击地图更新标记
    editMapInstance.addEventListener('click', function (e) {
      editForm.value.longitude = e.latlng.lng
      editForm.value.latitude = e.latlng.lat
      // 清除旧标记，添加新标记
      if (editMarkerLabel) {
        editMapInstance.removeOverlay(editMarkerLabel)
      }
      const bPoint = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
      editMarkerLabel = createMapMarker(editMapInstance, bPoint, editForm.value.name)
    })
  } catch (e) {
    console.error('百度地图初始化失败：', e)
  }
}

function clearEditMarkers() {
  if (editMapInstance && editMarkerLabel) {
    editMapInstance.removeOverlay(editMarkerLabel)
    editMarkerLabel = null
  }
  editForm.value.longitude = null
  editForm.value.latitude = null
}

function handleEditSubmit() {
  editFormRef.value.validate(async valid => {
    if (!valid) return

    const formData = {
      ...editForm.value
    }

    try {
      if (isEditMode.value) {
        formData.id = editRowId.value
        const res = await updatePartition(formData)
        if (res.code === 0 || res.code === 200) {
          ElMessage.success('修改成功')
        } else {
          ElMessage.error(res.msg || '修改失败')
          return
        }
      } else {
        const res = await addPartition(formData)
        if (res.code === 0 || res.code === 200) {
          ElMessage.success('新增成功')
        } else {
          ElMessage.error(res.msg || '新增失败')
          return
        }
      }
      editDialogVisible.value = false
      if (editMapInstance) {
        editMapInstance = null
      }
      editMarkerLabel = null
      loadData()
    } catch (e) {
      console.error('提交失败', e)
      ElMessage.error('操作失败')
    }
  })
}

// ==================== 删除功能 ====================
function handleDelete(row) {
  ElMessageBox.confirm(`确认删除监测点"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await deletePartition(row.id)
      if (res.code === 0 || res.code === 200) {
        ElMessage.success('删除成功')
        loadData()
      } else {
        ElMessage.error(res.msg || '删除失败')
      }
    } catch (e) {
      ElMessage.error('删除失败')
    }
  }).catch(() => { })
}

function handleBatchDelete() {
  if (selectedIds.value.length === 0) return
  ElMessageBox.confirm(`确认删除选中的 ${selectedIds.value.length} 条数据吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await batchDeletePartition(selectedIds.value)
      if (res.code === 0 || res.code === 200) {
        selectedIds.value = []
        ElMessage.success('删除成功')
        loadData()
      } else {
        ElMessage.error(res.msg || '删除失败')
      }
    } catch (e) {
      ElMessage.error('删除失败')
    }
  }).catch(() => { })
}
// ==================== 关联设备 ====================
const bindDialogVisible = ref(false)
const currentPartitionId = ref(null)
const bindTableRef = ref(null)
const bindQueryParams = ref({ equipmentName: '', equipmentTypeId: 'drainage' })
const bindTableData = ref([])
const bindTotal = ref(0)
const bindPageNum = ref(1)
const bindPageSize = ref(10)
const bindLoading = ref(false)
const selectedEquipmentId = ref('')
async function handleBind(row) {
  currentPartitionId.value = row.id
  bindDialogVisible.value = true
  bindPageNum.value = 1
  bindQueryParams.value.equipmentName = ''
  // 回显已关联设备（取第一个）
  if (row.equipmentId) {
    selectedEquipmentId.value = row.equipmentId.split(',')[0].trim()
  } else {
    selectedEquipmentId.value = ''
  }
  nextTick(() => {
    loadBindData()
  })
}

function handleBindQuery() {
  bindPageNum.value = 1
  loadBindData()
}

async function loadBindData() {
  bindLoading.value = true
  try {
    const res = await getEquipmentPage(bindPageNum.value, bindPageSize.value, bindQueryParams.value)
    const pageData = res.code !== undefined ? res.data : res
    bindTableData.value = pageData.records || []
    bindTotal.value = pageData.total || 0
  } catch (e) {
    console.error('加载设备列表失败', e)
  } finally {
    bindLoading.value = false
  }
}

function closeBindDialog() {
  bindDialogVisible.value = false
  currentPartitionId.value = null
  selectedEquipmentId.value = ''
}

async function submitBind() {
  if (!selectedEquipmentId.value) {
    ElMessage.warning('请选择要关联的设备')
    return
  }
  try {
    const res = await bindPartitionEquipment({
      partitionId: currentPartitionId.value,
      equipmentIds: [selectedEquipmentId.value]
    })
    if (res.code === 0 || res.code === 200) {
      ElMessage.success('关联成功')
      closeBindDialog()
      loadData()
    } else {
      ElMessage.error(res.msg || '关联失败')
    }
  } catch (e) {
    console.error('关联设备失败', e)
    ElMessage.error('关联失败')
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 16px;
}

.toolbar {
  margin-bottom: 16px;
}

.detail-info {
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 32px;
}

.info-label {
  color: #909399;
  font-size: 14px;
  white-space: nowrap;
}

.info-value {
  color: #303133;
  font-size: 14px;
}

.map-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.map-tabs {
  display: flex;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.map-tab {
  padding: 8px 24px;
  font-size: 14px;
  cursor: pointer;
  color: #606266;
  transition: all 0.3s;
  user-select: none;
}

.map-tab:hover {
  color: #409eff;
}

.map-tab.active {
  background: #409eff;
  color: #fff;
}

.map-tab-action {
  padding: 8px 24px;
  font-size: 14px;
  cursor: pointer;
  color: #f56c6c;
  transition: all 0.3s;
  user-select: none;
  margin-left: auto;
}

.map-tab-action:hover {
  color: #f78989;
  text-decoration: underline;
}

.map-container {
  width: 100%;
  height: 400px;
}

.marker-count {
  padding: 8px 16px;
  font-size: 13px;
  color: #909399;
  background: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}
</style>
