<template>
    <view class="post-page">
        <view class="flex flex-col bg-white min-h-screen">
            <!-- Header -->
            <nut-sticky>
                <view class="bg-orange-400 p-4 pt-4 pb-4">
                    <nut-row type="flex" justify="center" align="center">
                        <nut-col span="6">
                            <view class="text-xl font-bold text-white">捡个电驴</view>
                        </nut-col>
                        <nut-col span="18">
                            <!-- Search Bar -->
                            <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round"
                                background="transparent" input-background="#ffffff">
                                <template #leftin>
                                    <Search2 />
                                </template>
                            </nut-searchbar>
                        </nut-col>
                    </nut-row>
                </view>

                <!-- Filter options -->
                <nut-menu>
                    <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                    <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                    <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                </nut-menu>
            </nut-sticky>

            <!-- Scooter listings - 参考PostPage.tsx -->
            <view class="flex-1 p-4 vehicle-list">
                <view class="space-y-4">
                    <view v-for="scooter in scooters" :key="scooter.id"
                        class="bg-white rounded-lg shadow-sm overflow-hidden mb-3" @tap="() => onProductClick(scooter)">
                        <view class="flex">
                            <view class="w-32 h-24 relative p-2">
                                <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
                                    class="w-full h-full object-cover rounded-lg" />
                                <view v-if="scooter.isVerified"
                                    class="absolute bottom-3 right-3 bg-orange-500 text-white text-xs px-1 rounded flex items-center">
                                    <Check size="12" color="#ffffff" class="mr-0.5" />
                                    <text class="text-white">认证</text>
                                </view>
                            </view>
                            <view class="flex-1 p-3 relative">
                                <view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(scooter.id)">
                                    <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" color="#9ca3af" />
                                    <HeartFill v-else size="16" color="#ef4444" />
                                </view>
                                <text class="font-medium text-sm block">{{ scooter.name }}</text>
                                <text class="text-xs text-gray-600 mt-1 block">
                                    {{ scooter.year }} ·
                                    <text v-if="scooter.batteryHealth">电池健康度{{ scooter.batteryHealth }}%</text>
                                    <text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
                                </text>
                                <view class="mt-2">
                                    <text class="text-orange-500 font-bold">
                                        ¥{{ scooter.price.toLocaleString() }}
                                    </text>
                                    <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 加载更多按钮 -->
                <view class="load-more-container">
                    <view v-if="loading" class="loading-container">
                        <view class="loading-spinner"></view>
                        <text class="loading-text">加载中...</text>
                    </view>

                    <view v-else-if="noMoreData" class="no-more-data">
                        <text>没有更多数据了</text>
                    </view>

                    <nut-button v-else shape="round" type="default" plain @click="loadMoreData">点击加载更多</nut-button>
                </view>
            </view>

            <!-- Featured recommendations section -->
            <view class="mt-6 mb-20 ml-4 mr-4">
                <view class="flex justify-between items-center mb-3">
                    <text class="text-lg font-medium">精品推荐</text>
                    <view class="text-sm text-gray-500 flex items-center" @tap="onViewMore">
                        <text>更多</text>
                        <RectRight size="12" />
                    </view>
                </view>
                <view class="grid grid-cols-2 gap-3">
                    <view v-for="scooter in featuredScooters" :key="scooter.id"
                        class="bg-white rounded-lg shadow-sm overflow-hidden" @tap="() => onProductClick(scooter)">
                        <view class="relative p-2">
                            <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
                                class="w-full h-36 object-cover rounded-lg" />
                            <view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)">
                                <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="20" color="#ffffff" />
                                <HeartFill v-else size="20" color="#ef4444" />
                            </view>
                            <view v-if="scooter.isVerified"
                                class="absolute bottom-4 right-4 bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded flex items-center">
                                <Check size="12" color="#ffffff" class="mr-0.5" />
                                <text class="text-white">认证</text>
                            </view>
                        </view>
                        <view class="p-2">
                            <text class="font-medium text-sm block">{{ scooter.name }}</text>
                            <text class="text-xs text-gray-500 block">
                                {{ scooter.year }} ·
                                <text v-if="scooter.batteryHealth">电池健康度{{ scooter.batteryHealth }}%</text>
                                <text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
                            </text>
                            <view class="mt-1">
                                <text class="text-orange-500 font-bold">
                                    ¥{{ scooter.price.toLocaleString() }}
                                </text>
                                <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 自定义TabBar -->
        <TabBar />
    </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { Search2, RectRight, Check, Addfollow, HeartFill } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'

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

// 无限滚动相关状态
const loading = ref(false)
const noMoreData = ref(false)
const currentPage = ref(1)
const pageSize = ref(4)

// Filter states - 使用NutUI Menu组件
const selectedBrand = ref('全部品牌')
const selectedYear = ref('出厂年份')
const selectedSchool = ref('所在学校')

// Menu选项数据
const brandOptions = ref([
    { text: '全部品牌', value: '全部品牌' },
    { text: '雅迪', value: '雅迪' },
    { text: '台铃', value: '台铃' },
    { text: '小鸟', value: '小鸟' },
    { text: '新日', value: '新日' },
    { text: '爱玛', value: '爱玛' },
    { text: '小牛', value: '小牛' }
])

const yearOptions = ref([
    { text: '出厂年份', value: '出厂年份' },
    { text: '2024年', value: '2024年' },
    { text: '2023年', value: '2023年' },
    { text: '2022年', value: '2022年' },
    { text: '2021年', value: '2021年' },
    { text: '2020年', value: '2020年' }
])

const schoolOptions = ref([
    { text: '所在学校', value: '所在学校' },
    { text: '上海理工大学', value: '上海理工大学' },
    { text: '上海复旦大学', value: '上海复旦大学' },
    { text: '上海同济大学', value: '上海同济大学' },
    { text: '上海交通大学', value: '上海交通大学' }
])

// 主要车辆列表数据 - 参考PostPage.tsx
const scooters = ref([
    {
        id: '5',
        name: '雅迪 豪华版',
        year: '2023年',
        school: '上海理工大学',
        price: 3200,
        imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        batteryHealth: 98,
        mileage: 1200,
        brand: '雅迪',
        isVerified: true
    },
    {
        id: '6',
        name: '台铃 战速',
        year: '2022年',
        school: '上海理工大学',
        price: 3800,
        imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        batteryHealth: 92,
        mileage: 2500,
        brand: '台铃'
    },
    {
        id: '7',
        name: '小鸟电车',
        year: '2023年',
        school: '上海复旦大学',
        price: 3100,
        imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        batteryHealth: 92,
        mileage: 2000,
        brand: '小鸟'
    },
    {
        id: '8',
        name: '新日电动车',
        year: '2024年',
        school: '上海同济大学',
        price: 6700,
        imageUrl: 'https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        batteryHealth: 96,
        mileage: 500,
        brand: '新日',
        isVerified: true
    }
])

// 精品推荐数据 - 参考PostPage.tsx
const featuredScooters = ref([
    {
        id: '1',
        name: '小龟电动车',
        year: '2023年',
        school: '上海理工大学',
        price: 3880,
        batteryHealth: 92,
        mileage: 2000,
        imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        isVerified: true
    },
    {
        id: '2',
        name: '立马电动车',
        year: '2022年',
        school: '上海复旦大学',
        price: 2999,
        batteryHealth: 95,
        mileage: 1500,
        imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
])

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

/**
 * 点击产品卡片
 * @param {Object} scooter - 电动车信息
 */
const onProductClick = (scooter) => {
    Taro.showToast({
        title: `查看${scooter.name}`,
        icon: 'none'
    })
}

/**
 * 查看更多点击事件
 */
const onViewMore = () => {
    Taro.showToast({
        title: '查看更多精品推荐',
        icon: 'none'
    })
}

// Menu组件事件处理方法
/**
 * 品牌选择变化事件
 * @param {string} value - 选中的品牌值
 */
const onBrandChange = (value) => {
    selectedBrand.value = value
    // 这里可以添加过滤逻辑
}

/**
 * 年份选择变化事件
 * @param {string} value - 选中的年份值
 */
const onYearChange = (value) => {
    selectedYear.value = value
    // 这里可以添加过滤逻辑
}

/**
 * 学校选择变化事件
 * @param {string} value - 选中的学校值
 */
const onSchoolChange = (value) => {
    selectedSchool.value = value
    // 这里可以添加过滤逻辑
}

/**
 * 生成模拟车辆数据
 * @param {number} page - 页码
 * @param {number} size - 每页数量
 * @returns {Array} 车辆数据数组
 */
const generateMockData = (page, size) => {
    const brands = ['雅迪', '台铃', '小鸟', '新日', '爱玛', '小牛', '绿源', '立马']
    const schools = ['上海理工大学', '上海复旦大学', '上海同济大学', '上海交通大学', '华东师范大学', '上海大学']
    const years = ['2024年', '2023年', '2022年', '2021年', '2020年']
    const images = [
        'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        'https://images.unsplash.com/photo-1573981368236-719bbb6f70f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        'https://images.unsplash.com/photo-1583568671741-c70dafa8e8e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        'https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
        'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    ]

    const data = []
    for (let i = 0; i < size; i++) {
        const index = (page - 1) * size + i
        const brand = brands[Math.floor(Math.random() * brands.length)]
        const school = schools[Math.floor(Math.random() * schools.length)]
        const year = years[Math.floor(Math.random() * years.length)]
        const image = images[Math.floor(Math.random() * images.length)]

        data.push({
            id: `mock_${index + 100}`,
            name: `${brand} ${['豪华版', '标准版', '运动版', '经典版'][Math.floor(Math.random() * 4)]}`,
            year: year,
            school: school,
            price: Math.floor(Math.random() * 5000) + 2000,
            imageUrl: image,
            batteryHealth: Math.floor(Math.random() * 20) + 80,
            mileage: Math.floor(Math.random() * 3000) + 500,
            brand: brand,
            isVerified: Math.random() > 0.7
        })
    }
    return data
}

/**
 * 模拟异步请求加载更多数据
 */
const loadMoreData = async () => {
    if (loading.value || noMoreData.value) return

    loading.value = true

    try {
        // 模拟网络请求延迟
        await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000))

        // 模拟最多加载5页数据
        if (currentPage.value >= 5) {
            noMoreData.value = true
            loading.value = false
            return
        }

        currentPage.value++
        const newData = generateMockData(currentPage.value, pageSize.value)
        scooters.value.push(...newData)

    } catch (error) {
        Taro.showToast({
            title: '加载失败，请重试',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}
</script>

<style lang="less">
@import './index.less';

// 使用Tailwind CSS类，只保留必要的自定义样式
.space-y-4>view:not(:first-child) {
    margin-top: 1rem;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gap-3 {
    gap: 0.75rem;
}

// 确保图片正确显示
image {
    display: block;
}

// 加载动画
.load-more-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.loading-container {
    display: flex;
    align-items: center;
    color: #666;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

.loading-text {
    font-size: 0.85rem;
}

.no-more-data {
    color: #999;
    font-size: 0.85rem;
}

.load-more-btn {
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
}

.load-more-btn:hover {
    background-color: #0056cc;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>