<template>
    <view class="post-page">
        <view class="flex flex-col bg-white min-h-screen">
            <!-- Header -->
            <nut-sticky>
                <view class="bg-orange-400">
                    <nut-row type="flex" justify="center" align="center">
                        <!-- <nut-col span="0">
                            <view class="text-xl font-bold text-white">分类</view>
                        </nut-col> -->
                        <nut-col span="24">
                            <!-- Search Bar -->
                            <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
                                <template #leftin>
                                    <Search2 />
                                </template>
                            </nut-searchbar>
                        </nut-col>
                    </nut-row>
                </view>

                <!-- Filter options -->
                <nut-config-provider :theme-vars="themeVars">
                    <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-config-provider>
            </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.front_photo" mode="aspectFill"
                                    class="w-full h-full object-cover rounded-lg" />
                                <view v-if="scooter.verification_status === 5"
                                    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)">
                                    <Heart1 v-if="!scooter.is_favorite" size="22" color="#9ca3af" />
                                    <HeartFill v-else size="22" color="#ef4444" />
                                </view>
                                <text class="font-medium text-sm block">{{ scooter.brand }} {{ scooter.model }}</text>
                                <text class="text-xs text-gray-600 mt-1 block">
                                    {{ scooter.manufacture_year }} ·
                                    <text v-if="scooter.range_km">续航{{ scooter.range_km }}km</text>
                                    <text v-if="scooter.max_speed_kmh"> 最高时速{{ scooter.max_speed_kmh }}km/h</text>
                                </text>
                                <view class="mt-2">
                                    <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
                                        ¥{{ scooter.price.toLocaleString() }}
                                    </text>
                                    <!-- <text v-if="scooter.isVerified" class="ml-2 text-xs px-1 py-0.5 bg-orange-100 text-orange-500 rounded">
                                        低于市场价 10%
                                    </text> -->
                                    <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school_name }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 空状态提示 -->
                <view v-if="scooters.length === 0 && !loading && !hasMore" class="empty-state py-8 text-center">
                    <Search2 size="48" color="#9ca3af" class="mb-4" />
                    <text class="text-gray-500 text-base block mb-2">暂无相关车辆</text>
                    <text class="text-gray-400 text-sm">试试调整筛选条件或稍后再来看看</text>
                </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="!hasMore && scooters.length > 0" class="no-more-data">
                        <text>没有更多数据了</text>
                    </view>

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

            <!-- Featured recommendations section -->
            <view class="mb-20">
                <FeaturedRecommendations />
            </view>
        </view>

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

        <!-- 成功提示 -->
        <nut-toast
            v-model:visible="toastVisible"
            :msg="toastMessage"
            :type="toastType"
        />
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Search2, Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import FeaturedRecommendations from '@/components/FeaturedRecommendations.vue'
import { useFavorite } from '@/composables/useFavorite'
// 接口导入
import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
import { getVehicleListAPI } from '@/api/car';
import { DEFAULT_COVER_IMG } from '@/utils/config'

const themeVars = {
    menuItemContentMaxHeight: '650rpx',
    menuItemOptionPaddingTop: '32rpx',
}

// 响应式数据
const searchValue = ref('')
/**
 * 搜索框失焦事件
 */
const onBlurSearch = async () => {
    // 重置分页并重新加载数据
    currentPage.value = 0
    hasMore.value = true
    await loadVehicleData()
}
// 收藏功能现在使用基于对象属性的模式

// 分页相关状态
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(0)
const pageSize = ref(10)

// Toast提示
const toastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

// Filter states - 使用NutUI Menu组件
const selectedBrand = ref('')
const selectedYear = ref('')
const selectedSchool = ref('')

// Menu选项数据
const brandOptions = ref([])
const yearOptions = ref([])
const schoolOptions = ref([])

// 车辆列表数据
const scooters = ref([])



/**
 * 切换收藏状态
 * @param {string} scooterId - 电动车ID
 */
// 使用收藏功能composables
const { toggleFavorite } = useFavorite()

/**
 * 点击产品卡片
 * @param {Object} scooter - 电动车信息
 */
const onProductClick = (scooter) => {
    Taro.navigateTo({
        url: `/pages/productDetail/index?id=${scooter.id}`
    })
}



// Menu组件事件处理方法
/**
 * 品牌选择变化事件
 * @param {string} value - 选中的品牌值
 */
const onBrandChange = (value) => {
    selectedBrand.value = value
    filterCars()
}

/**
 * 年份选择变化事件
 * @param {string} value - 选中的年份值
 */
const onYearChange = (value) => {
    selectedYear.value = value
    filterCars()
}

/**
 * 学校选择变化事件
 * @param {string} value - 选中的学校值
 */
const onSchoolChange = (value) => {
    selectedSchool.value = value
    filterCars()
}

/**
 * 过滤车辆数据
 */
const filterCars = async () => {
    // 重置数据
    scooters.value = []
    currentPage.value = 0
    hasMore.value = true

    // 重新加载数据
    await loadVehicleData()
    showToast('筛选条件已更新', 'success')
}

/**
 * 加载车辆数据
 * @param {boolean} isLoadMore - 是否为加载更多
 */
const loadVehicleData = async (isLoadMore = false) => {
    if (loading.value) return

    loading.value = true

    try {
        // 构建请求参数
        const params = {
            page: currentPage.value,
            limit: pageSize.value
        }

        // 添加筛选条件
        if (selectedSchool.value) {
            params.school_id = selectedSchool.value
        }
        if (selectedBrand.value) {
            params.brand = selectedBrand.value
        }
        if (selectedYear.value) {
            params.manufacture_year = selectedYear.value
        }
        if (searchValue.value.trim()) {
            params.keyword = searchValue.value.trim()
        }

        const response = await getVehicleListAPI(params)

        if (response && response.code === 1 && response.data) {
            const vehicleList = response.data.list || []

            // 处理图片数据
            const processedData = vehicleList.map(item => ({
                ...item,
                front_photo: item.front_photo || DEFAULT_COVER_IMG
            }))

            if (isLoadMore) {
                scooters.value.push(...processedData)
            } else {
                scooters.value = processedData
            }

            // 检查是否还有更多数据 - 基于总数和当前已加载数量
            const totalLoaded = (currentPage.value + 1) * pageSize.value
            hasMore.value = totalLoaded < response.data.total
        } else {
            console.error('API返回错误:', response)
            showToast(response?.msg || '获取数据失败', 'error')
        }
    } catch (error) {
        console.error('加载车辆数据失败:', error)
        showToast('网络错误，请稍后重试', 'error')
    } finally {
        loading.value = false
    }
}

/**
 * 点击加载更多数据
 */
const loadMoreData = async () => {
    if (loading.value || !hasMore.value) return

    currentPage.value++
    await loadVehicleData(true)
}

/**
 * 显示提示信息
 */
const showToast = (message, type = 'success') => {
    toastMessage.value = message
    toastType.value = type
    toastVisible.value = true
}

// 初始化
onMounted(async () => {
    // 获取全部品牌数据
    const vBrands = await getVehicleBrandsAPI()
    if (vBrands.code) {
        brandOptions.value = vBrands.data.map(brand => ({
            text: brand,
            value: brand
        }))
        brandOptions.value = [{
            text: '全部品牌',
            value: ''
        }, ...brandOptions.value]
    }
    // 生成从当前日期开始往前10年的年份
    yearOptions.value = Array.from({ length: 10 }, (_, i) => ({
        text: (new Date().getFullYear() - i).toString() + '年',
        value: (new Date().getFullYear() - i).toString()
    }))
    yearOptions.value = [{
        text: '全部年份',
        value: ''
    }, ...yearOptions.value]
    // 获取全部学校数据
    const schoolData = await getSchoolsAPI()
    if (schoolData.code) {
        schoolOptions.value = schoolData.data.map(school => ({
            text: school.name,
            value: school.id
        }))
    }
    schoolOptions.value = [{
        text: '全部学校',
        value: ''
    }, ...schoolOptions.value]

    // 加载初始车辆数据
    await loadVehicleData()
})
</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>