<template>
    <view class="post-page">
        <!-- 顶部搜索栏 -->
        <view class="search-container">
            <view class="search-box">
                <Search size="18" color="#9ca3af" />
                <input
                    v-model="searchValue"
                    placeholder="搜索电动车..."
                    class="search-input"
                />
            </view>
        </view>

        <!-- 分类网格 -->
        <view class="categories-grid">
            <view
                v-for="category in categories"
                :key="category.id"
                class="category-item"
                @click="onCategoryClick(category)"
            >
                <view class="category-icon">
                    <component :is="category.icon" size="32" color="#f97316" />
                </view>
                <text class="category-name">{{ category.name }}</text>
                <text class="category-count">{{ category.count }}辆</text>
            </view>
        </view>

        <!-- 热门推荐 -->
        <view class="section">
            <view class="section-header">
                <text class="section-title">热门推荐</text>
                <view class="section-more" @click="onViewMore('hot')">
                    <text class="more-text">查看更多</text>
                    <Right size="16" color="#9ca3af" />
                </view>
            </view>
            <view class="scooter-list">
                <view
                    v-for="scooter in hotScooters"
                    :key="scooter.id"
                    class="scooter-card"
                    @click="onProductClick(scooter)"
                >
                    <image :src="scooter.image" class="scooter-image" mode="aspectFill" />
                    <view class="scooter-info">
                        <text class="scooter-name">{{ scooter.name }}</text>
                        <text class="scooter-year">{{ scooter.year }}年</text>
                        <text class="scooter-school">{{ scooter.school }}</text>
                        <view class="scooter-footer">
                            <text class="scooter-price">¥{{ scooter.price }}</text>
                            <view class="favorite-btn" @click.stop="toggleFavorite(scooter.id)">
                                <Heart
                                    size="20"
                                    :color="favoriteIds.includes(scooter.id) ? '#ef4444' : '#9ca3af'"
                                    :fill="favoriteIds.includes(scooter.id) ? '#ef4444' : 'none'"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 最新发布 -->
        <view class="section">
            <view class="section-header">
                <text class="section-title">最新发布</text>
                <view class="section-more" @click="onViewMore('latest')">
                    <text class="more-text">查看更多</text>
                    <Right size="16" color="#9ca3af" />
                </view>
            </view>
            <view class="scooter-list">
                <view
                    v-for="scooter in latestScooters"
                    :key="scooter.id"
                    class="scooter-card"
                    @click="onProductClick(scooter)"
                >
                    <image :src="scooter.image" class="scooter-image" mode="aspectFill" />
                    <view class="scooter-info">
                        <text class="scooter-name">{{ scooter.name }}</text>
                        <text class="scooter-year">{{ scooter.year }}年</text>
                        <text class="scooter-school">{{ scooter.school }}</text>
                        <view class="scooter-footer">
                            <text class="scooter-price">¥{{ scooter.price }}</text>
                            <view class="favorite-btn" @click.stop="toggleFavorite(scooter.id)">
                                <Heart
                                    size="20"
                                    :color="favoriteIds.includes(scooter.id) ? '#ef4444' : '#9ca3af'"
                                    :fill="favoriteIds.includes(scooter.id) ? '#ef4444' : 'none'"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    
    <!-- 自定义TabBar -->
    <TabBar />
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { Search, Right, Cart, Star, Cart2, Category, Heart } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'

// 响应式数据
const searchValue = ref('')
const favoriteIds = ref([1, 3, 5])

// 分类数据
const categories = ref([
    { id: 1, name: '电动自行车', icon: Cart2, count: 128 },
    { id: 2, name: '电动摩托车', icon: Cart2, count: 86 },
    { id: 3, name: '电动汽车', icon: Star, count: 45 },
    { id: 4, name: '电动货车', icon: Cart, count: 23 },
     { id: 5, name: '平衡车', icon: Category, count: 67 },
     { id: 6, name: '滑板车', icon: Category, count: 92 }
])

// 热门推荐数据
const hotScooters = ref([
    {
        id: 1,
        name: '小牛电动 NGT',
        year: 2023,
        school: '清华大学',
        price: 3200,
        image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&h=200&fit=crop'
    },
    {
        id: 2,
        name: '雅迪 DE2',
        year: 2022,
        school: '北京大学',
        price: 2800,
        image: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=300&h=200&fit=crop'
    }
])

// 最新发布数据
const latestScooters = ref([
    {
        id: 3,
        name: '爱玛 A500',
        year: 2024,
        school: '人民大学',
        price: 2600,
        image: 'https://images.unsplash.com/photo-1544191696-15693072e0d8?w=300&h=200&fit=crop'
    },
    {
        id: 4,
        name: '台铃 TDR',
        year: 2023,
        school: '北京理工',
        price: 3500,
        image: 'https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=300&h=200&fit=crop'
    }
])

/**
 * 切换收藏状态
 * @param {number} id - 电动车ID
 */
const toggleFavorite = (id) => {
    const index = favoriteIds.value.indexOf(id)
    if (index > -1) {
        favoriteIds.value.splice(index, 1)
    } else {
        favoriteIds.value.push(id)
    }
}

// 事件处理函数
const onCategoryClick = () => {
    Taro.showToast({
        title: '选择了分类',
        icon: 'none'
    })
}

const onProductClick = () => {
    Taro.navigateTo({
        url: '/pages/detail/index'
    })
}

/**
 * 查看更多点击事件
 */
const onViewMore = () => {
    // 跳转到列表页面
}
</script>

<style lang="less">
.post-page {
    min-height: 100vh;
    background-color: #fef7ed;
    padding-bottom: 100px;
}

.search-container {
    padding: 16px;
    background-color: #ffffff;
    border-bottom: 1px solid #f3f4f6;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: #f9fafb;
    border-radius: 24px;
    padding: 12px 16px;
    gap: 8px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 16px;
    background-color: #ffffff;
    margin-bottom: 12px;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px;
    background-color: #fef7ed;
    border-radius: 12px;
    border: 1px solid #fed7aa;
    transition: all 0.2s;
}

.category-item:active {
    transform: scale(0.95);
    background-color: #fef3e2;
}

.category-icon {
    margin-bottom: 8px;
}

.category-name {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

.category-count {
    font-size: 12px;
    color: #9ca3af;
}

.section {
    background-color: #ffffff;
    margin-bottom: 12px;
    padding: 16px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.section-more {
    display: flex;
    align-items: center;
    gap: 4px;
}

.more-text {
    font-size: 14px;
    color: #9ca3af;
}

.scooter-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.scooter-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.scooter-card:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scooter-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.scooter-info {
    padding: 12px;
}

.scooter-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    display: block;
}

.scooter-year {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
    display: block;
}

.scooter-school {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
    display: block;
}

.scooter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scooter-price {
    font-size: 16px;
    font-weight: 700;
    color: #f97316;
}

.favorite-btn {
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
}

.favorite-btn:active {
    transform: scale(0.9);
}
</style>