<script setup lang="ts">
import type { PoiCategory } from '@/domain/poi'

defineProps<{
  categories: PoiCategory[]
  activeCategoryCode: string | null
  resultCount: number
  coverageLabel: string
  loading?: boolean
}>()

const emit = defineEmits<{
  checkIns: []
  select: [categoryCode: string | null]
}>()
</script>

<template>
  <view class="map-filter-header">
    <view class="map-filter-header__heading">
      <view class="map-filter-header__title-block">
        <text class="map-filter-header__title">光明区文旅资源</text>
        <text class="map-filter-header__scope">{{ coverageLabel }}</text>
      </view>
      <view class="map-filter-header__actions">
        <text class="map-filter-header__count">共 {{ resultCount }} 个点位</text>
        <button class="map-filter-header__check-ins" @click="emit('checkIns')">我的打卡</button>
      </view>
    </view>

    <scroll-view class="map-filter-header__scroll" scroll-x :show-scrollbar="false">
      <view class="map-filter-header__chips">
        <button
          class="category-chip"
          :class="{ 'category-chip--active': activeCategoryCode === null }"
          :disabled="loading"
          hover-class="category-chip--hover"
          @click="emit('select', null)"
        >
          全部
        </button>
        <button
          v-for="category in categories"
          :key="category.code"
          class="category-chip"
          :class="{ 'category-chip--active': activeCategoryCode === category.code }"
          :disabled="loading"
          hover-class="category-chip--hover"
          @click="emit('select', category.code)"
        >
          {{ category.name }}
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.map-filter-header {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 20rpx 0 16rpx;
  background: #fff;
  box-shadow: 0 8rpx 28rpx rgb(24 32 29 / 8%);
}

.map-filter-header__heading {
  display: flex;
  gap: 24rpx;
  align-items: center;
  justify-content: space-between;
  min-height: 64rpx;
  padding: 0 32rpx;
}

.map-filter-header__title-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-filter-header__title {
  font-size: 34rpx;
  font-weight: 700;
  line-height: 46rpx;
  color: #18201d;
}

.map-filter-header__scope,
.map-filter-header__count {
  font-size: 22rpx;
  line-height: 32rpx;
  color: #5e6b65;
}

.map-filter-header__count {
  font-weight: 600;
  color: #167a5b;
}

.map-filter-header__actions {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4rpx;
  align-items: flex-end;
}

.map-filter-header__check-ins {
  width: auto;
  height: 42rpx;
  padding: 0 15rpx;
  margin: 0;
  font-size: 20rpx;
  font-weight: 700;
  line-height: 42rpx;
  color: #0e6247;
  background: #e8f4ee;
  border: 0;
  border-radius: 21rpx;
}

.map-filter-header__check-ins::after {
  border: 0;
}

.map-filter-header__scroll {
  width: 100%;
  height: 80rpx;
  margin-top: 8rpx;
  white-space: nowrap;
}

.map-filter-header__chips {
  display: inline-flex;
  gap: 16rpx;
  align-items: center;
  height: 80rpx;
  padding: 0 32rpx;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 104rpx;
  height: 64rpx;
  padding: 0 28rpx;
  margin: 0;
  font-size: 26rpx;
  line-height: 64rpx;
  color: #425049;
  white-space: nowrap;
  background: #f0f4f2;
  border: 0;
  border-radius: 32rpx;
}

.category-chip::after {
  border: 0;
}

.category-chip--active {
  font-weight: 600;
  color: #fff;
  background: #167a5b;
}

.category-chip--hover {
  opacity: 0.82;
}

.category-chip[disabled] {
  opacity: 0.5;
}
</style>
