<template>
  <view class="container">
    <view class="card search">
      <view class="row between">
        <input class="ipt" v-model="kw" placeholder="搜索项目：补水/清洁/肩颈…" confirm-type="search" />
        <view class="sbtn" @tap="kw = ''">清空</view>
      </view>
    </view>

    <view class="card filters">
      <scroll-view class="sc" scroll-x>
        <view class="row">
          <view
            v-for="c in allCategories"
            :key="c.id"
            class="chip"
            :class="{ on: c.id === activeCategoryId }"
            @tap="setCategory(c.id)"
          >
            {{ c.name }}
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="list">
      <ProjectCard v-for="p in filteredProjects" :key="p.id" :project="p" class="mb" />
    </view>

    <AiFloat />
  </view>
</template>

<script>
import AiFloat from '@/components/AiFloat.vue'
import ProjectCard from '@/components/ProjectCard.vue'
import { categories, projects } from '@/common/mockData'

export default {
  components: { ProjectCard, AiFloat },
  data() {
    return {
      allCategories: [{ id: 'all', name: '全部' }, ...categories],
      activeCategoryId: 'all',
      kw: ''
    }
  },
  computed: {
    filteredProjects() {
      const kw = (this.kw || '').trim()
      const list = this.activeCategoryId === 'all' ? projects : projects.filter((p) => p.categoryId === this.activeCategoryId)
      if (!kw) return list
      return list.filter((p) => `${p.name}${p.fitFor}${p.desc}`.includes(kw))
    }
  },
  methods: {
    setCategory(id) {
      this.activeCategoryId = id
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  padding: 16rpx;
}
.ipt {
  flex: 1;
  height: 76rpx;
  padding: 0 16rpx;
  border-radius: 18rpx;
  background: rgba(17, 24, 39, 0.05);
  font-size: 28rpx;
}
.sbtn {
  margin-left: 12rpx;
  padding: 18rpx 14rpx;
  border-radius: 18rpx;
  background: rgba(17, 24, 39, 0.06);
  font-size: 26rpx;
  font-weight: 800;
}
.filters {
  margin-top: 16rpx;
  padding: 16rpx;
}
.sc {
  white-space: nowrap;
}
.chip {
  padding: 14rpx 18rpx;
  margin-right: 12rpx;
  border-radius: 999rpx;
  font-size: 26rpx;
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
  flex: 0 0 auto;
}
.on {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.list {
  margin-top: 18rpx;
}
.mb {
  margin-bottom: 18rpx;
}
</style>

