<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-04 14:32:52
 * @FilePath: /jgdl/src/pages/productDetail/index.vue
 * @Description: 商品详情页
-->
<template>
    <view class="product-detail-page">
        <!-- 图片轮播 -->
        <view class="image-carousel">
            <nut-swiper :init-page="currentImageIndex" :pagination-visible="true" pagination-color="#426543"
                auto-play="3000" @change="onSwiperChange">
                <nut-swiper-item v-for="(image, index) in product.cover_image" :key="index" style="height: 400rpx">
                    <image :src="image" mode="aspectFill" class="w-full h-full object-cover" @error="onImageError"
                        @load="onImageLoad" />
                </nut-swiper-item>
            </nut-swiper>
        </view>

        <!-- 商品信息 -->
        <view class="product-info bg-white p-4">
            <view class="flex items-center justify-between mb-3">
                <text class="text-xl font-bold">{{ product.brand }} {{ product.model }}</text>
                <view class="flex space-x-3">
                    <view class="w-8 h-8 bg-gray-100 rounded-full relative">
                        <button open-type="share" class="absolute inset-0 w-full h-full" style="border-radius: 50%;">
                            <view class="absolute inset-0 flex items-center justify-center" @tap="handleShare">
                                <Share size="16" color="#666" />
                            </view>
                        </button>
                    </view>
                    <view @tap="toggleFavorite(product)"
                        class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                        <HeartFill v-if="product.is_favorite" size="18" color="#ef4444" />
                        <Heart1 v-else size="18" color="#666" />
                    </view>
                </view>
            </view>
            <view v-if="product?.price" class="flex items-center mb-3">
                <text class="text-2xl font-bold text-orange-500 mr-2">
                    ¥ {{ product?.price?.toLocaleString() }}
                </text>
                <view v-if="product?.market_price" class="text-gray-400 text-xs line-through ml-2">
                    ¥ {{ product.market_price?.toLocaleString() }}
                </view>
            </view>
            <view>
                <text class="text-xs text-gray-500 block">{{ product?.school_name }}</text>
            </view>
        </view>

        <!-- 基本信息 -->
        <view class="basic-info bg-white mt-2 p-4">
            <text class="text-lg font-medium mb-3 block">基本信息</text>
            <view class="grid grid-cols-2 gap-4">
                <view v-if="product?.manufacture_year" class="flex items-center">
                    <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                        <text class="text-orange-500">📅</text>
                    </view>
                    <view>
                        <text class="text-xs text-gray-500 block">出厂年份</text>
                        <text class="text-sm block">{{ product.manufacture_year }}</text>
                    </view>
                </view>
                <view v-if="product?.range_km" class="flex items-center">
                    <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                        <text class="text-orange-500">🔋</text>
                    </view>
                    <view>
                        <text class="text-xs text-gray-500 block">续航里程</text>
                        <text class="text-sm block">{{ product.range_km }}</text>
                    </view>
                </view>
                <view v-if="product?.total_mileage_km" class="flex items-center">
                    <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                        <text class="text-orange-500" style="padding-bottom: 10rpx;">🛣️</text>
                    </view>
                    <view>
                        <text class="text-xs text-gray-500 block">行驶里程</text>
                        <text class="text-sm block">{{ product.total_mileage_km }}</text>
                    </view>
                </view>
                <view v-if="product?.max_speed_kmh" class="flex items-center">
                    <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                        <text class="text-orange-500">⚡</text>
                    </view>
                    <view>
                        <text class="text-xs text-gray-500 block">最高时速</text>
                        <text class="text-sm block">{{ product.max_speed_kmh }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 车辆评估 -->
        <view v-if="product?.new_level || product?.brake_wear_level || product?.tire_wear_level" class="vehicle-condition bg-white mt-2 p-4">
            <text class="text-lg font-medium mb-3 block">车辆评估</text>
            <view class="space-y-3">
                <view v-if="product?.new_level" class="flex justify-between items-center">
                    <text>车辆成色</text>
                    <view class="flex">
                        <nut-rate v-model="product.new_level" active-color="orange" readonly size="14" />
                    </view>
                </view>
                <view v-if="product?.brake_wear_level" class="flex justify-between items-center">
                    <text>刹车磨损度</text>
                    <view class="flex">
                        <nut-rate v-model="product.brake_wear_level" active-color="orange" readonly size="14" />
                    </view>
                </view>
                <view v-if="product?.tire_wear_level" class="flex justify-between items-center">
                    <text>轮胎磨损度</text>
                    <view class="flex">
                        <nut-rate v-model="product.tire_wear_level" active-color="orange" readonly size="14" />
                    </view>
                </view>
            </view>
        </view>

        <!-- 车辆描述 -->
        <view class="vehicle-description bg-white mt-2 p-4">
            <text class="text-lg font-medium mb-3 block">车辆描述</text>
            <rich-text :nodes="product.note" class="rich-content"></rich-text>
            <!-- <rich-text :nodes="product.richDescription" class="rich-content"></rich-text> -->

            <!-- 多张图片展示 -->
            <view class="vehicle-images mt-3">
                <!-- <text class="text-base font-medium mb-2 block">车辆图片</text> -->
                <view class="flex flex-col gap-3">
                    <view v-for="(image, index) in product.images" :key="index" class="image-item"
                        @click="previewImages(index)">
                        <image :src="image" :alt="`车辆图片${index + 1}`" mode="aspectFill"
                            class="w-full h-48 object-cover rounded-lg cursor-pointer" @error="onImageError"
                            @load="onImageLoad" />
                    </view>
                </view>
            </view>
        </view>

        <!-- 卖家信息 -->
        <view v-if="!isCurrentUserSeller" class="seller-info bg-white mt-2 p-4 mb-2">
            <text class="text-lg font-medium mb-3 block">卖家信息</text>
            <view class="flex items-center justify-between">
                <view class="flex items-center">
                    <image :src="product.seller?.avatar_url || defaultAvatar" mode="aspectFill"
                        class="w-10 h-10 rounded-full object-cover mr-3" />
                    <view>
                        <view class="flex items-center">
                            <text class="font-medium">{{ product.seller?.nickname }}</text>
                            <view v-if="product.seller?.real_name_verified"
                                class="ml-1 text-xs text-blue-500 bg-blue-50 px-1 py-0.5 rounded">
                                已认证卖家
                            </view>
                        </view>
                        <text class="text-xs text-gray-500 block">{{ product.seller?.school_name }}</text>
                    </view>
                </view>
                <view v-if="product.seller?.wechat_id" @tap="showWechatModal" class="text-green-500 flex items-center">
                    <nut-button type="success">
                        <template #icon>
                            <Message size="16" />
                        </template>
                        <text>加微信</text>
                    </nut-button>
                    <!-- <text>加微信</text>
                    <Right size="16" /> -->
                </view>
            </view>
        </view>

        <!-- 底部按钮 -->
        <view v-if="!isCurrentUserSeller && product.status !== 5" class="bottom-actions">
            <nut-row :gutter="10">
                <nut-col :span="12">
                    <nut-button @click="handleContactSeller" block type="default" shape="round"
                        style="border-color: #f97316; color: #f97316;">
                        联系卖家
                    </nut-button>
                </nut-col>
                <nut-col :span="12">
                    <nut-button @click="handlePurchase" block type="primary" shape="round" color="#EB5305"
                        style="background-color: #f97316; border-color: #f97316;">
                        我想购买
                    </nut-button>
                </nut-col>
            </nut-row>
        </view>

        <!-- 微信号弹框 -->
        <nut-dialog v-model:visible="showWechat" title="卖家微信号" :close-on-click-overlay="true" :no-footer="true">
            <view class="text-center">
                <text class="text-lg font-medium block mb-4">{{ product.seller?.wechat_id }}</text>
                <!-- <text class="text-sm text-gray-500 block mb-4">长按复制微信号</text> -->
                <nut-button @click="copyWechat" type="primary" color="orange">
                    复制微信号
                </nut-button>
            </view>
        </nut-dialog>

        <!-- 联系卖家弹框 -->
        <nut-popup v-model:visible="showContactModal" position="bottom" :style="{ height: '70%' }" round
            :catch-move="true">
            <view class="contact-modal p-4">
                <view class="text-center mb-4">
                    <text class="text-lg font-medium">联系卖家</text>
                </view>
                <view class="seller-card bg-gray-50 rounded-lg p-3 mb-4">
                    <view class="flex items-center">
                        <image :src="product.seller?.avatar || defaultAvatar" :alt="product.seller?.nickname"
                            mode="aspectFill" class="w-12 h-12 rounded-full object-cover mr-3" />
                        <view>
                            <text class="font-medium block">{{ product.seller?.nickname }}</text>
                            <text class="text-sm text-gray-500 block">{{ product.seller?.school_name }}</text>
                        </view>
                    </view>
                </view>

                <!-- 留言输入框 -->
                <view class="message-input mb-4">
                    <nut-textarea v-model="messageText" placeholder="请输入您想对卖家说的话..." :rows="4" :max-length="200" :cursorSpacing="100"
                        show-word-limit class="w-full" />
                </view>

                <!-- 快捷标签 -->
                <view class="quick-tags mb-4">
                    <text class="text-sm text-gray-600 block mb-2">快捷输入：</text>
                    <view class="flex flex-wrap gap-2">
                        <view v-for="tag in quickTags" :key="tag" @click="addQuickTag(tag)"
                            class="quick-tag px-3 py-1 bg-orange-50 text-orange-600 rounded-full text-sm cursor-pointer">
                            {{ tag }}
                        </view>
                    </view>
                </view>

                <!-- 发送按钮 -->
                <nut-button @click="sendMessageToSeller" block type="primary" shape="round" color="orange"
                    style="background-color: #f97316; border-color: #f97316; margin-top: 2rem;"
                    :disabled="!messageText.trim()">
                    发送消息
                </nut-button>
            </view>
        </nut-popup>

        <!-- 支付组件 -->
        <payCard :visible="show_pay" :data="payData" @close="onPayClose" />
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro, { useShareAppMessage, useDidShow } from '@tarojs/taro'
import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro'
import payCard from '@/components/payCard.vue'
import { useFavorite } from '@/composables/useFavorite'
// import avatarImg from '@/assets/images/avatar.png'
import { getCurrentPageParam } from "@/utils/weapp"
import { checkPermission, PERMISSION_TYPES } from '@/utils/permission'
// 导入接口
import { getVehicleDetailAPI } from '@/api/car'
import { createOrderAPI } from '@/api/orders'
import { getChatConversationAPI, sendChatAPI } from '@/api/chat'

import { DEFAULT_COVER_IMG } from '@/utils/config'
// 导入用户 store
import { useUserStore } from '@/stores/user'

// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

// 分享功能
wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
})

// 响应式数据
const currentImageIndex = ref(0)
// isFavorite 功能现在由 useFavorite composable 提供
const showWechat = ref(false)
const showContactModal = ref(false)
const show_pay = ref(false)
const messageText = ref('')
const payData = ref({
    id: '',
    price: 0,
    remain_time: 0
})

// 快捷标签数据
const quickTags = ref([
    '请问车况怎么样？',
    '可以面谈吗？',
    '价格还能商量吗？',
    '什么时候方便看车？',
])

// 备用图片数组
// const fallbackImages = ref([
//     avatarImg,
//     avatarImg,
//     avatarImg,
//     avatarImg,
//     avatarImg
// ])
// const imageLoadErrors = ref(new Set())

// 模拟商品数据
const product = ref({})

/**
 * 轮播图切换事件
 * @param {number} index - 当前图片索引
 */
const onSwiperChange = (index) => {
    currentImageIndex.value = index
}

// 使用收藏功能composables
const { toggleFavorite } = useFavorite()

// 使用用户 store
const userStore = useUserStore()

/**
 * 判断当前用户是否为卖家
 */
const isCurrentUserSeller = computed(() => {
    return product.value.seller?.id && userStore.userInfo.id && product.value.seller.id === userStore.userInfo.id
})

/**
 * 显示微信号弹框
 */
const showWechatModal = () => {
    showWechat.value = true
}

/**
 * 复制微信号
 */
const copyWechat = () => {
    Taro.setClipboardData({
        data: product.value.seller?.wechat_id,
        success: () => {
            Taro.showToast({
                title: '微信号已复制',
                icon: 'success'
            })
            showWechat.value = false
        },
    })
}

/**
 * 联系卖家
 */
const conversation_id = ref('')
const handleContactSeller = async () => {
    const permissionResult = await checkPermission(PERMISSION_TYPES.CONTACT_SELLER, {
        showToast: false,
        autoRedirect: false
    })

    // 如果没有权限，显示确认弹窗
    if (!permissionResult.hasPermission) {
        // 可以通过 permissionResult.missingFields 获取未通过校验的字段
        // 可以通过 permissionResult.validFields 获取已通过校验的字段
        Taro.showModal({
            title: '提示',
            content: '联系卖家需要先完善个人信息',
            cancelText: '关闭',
            confirmText: '前往完善',
            success: (res) => {
                if (res.confirm) {
                    // 用户点击前往完善，跳转到注册页面
                    Taro.navigateTo({
                        url: '/pages/register/index'
                    })
                } else {
                    // 用户点击关闭，返回上一页
                    // Taro.navigateBack()
                }
            }
        })
        return
    } else {
        // 获取聊天室ID
        const { code, data } = await getChatConversationAPI({
            buyer_id: userStore.userInfo.id,
            seller_id: product.value.seller.id,
            vehicle_id: product.value.id
        })
        if (code) {
            showContactModal.value = true
            conversation_id.value = data.conversation_id
        }
    }
}

/**
 * 添加快捷标签到输入框
 * @param {string} tag - 快捷标签文本
 */
const addQuickTag = (tag) => {
    if (messageText.value.trim()) {
        messageText.value += ' ' + tag
    } else {
        messageText.value = tag
    }
}

/**
 * 发送消息给卖家
 */
const sendMessageToSeller = async () => {
    if (!messageText.value.trim()) {
        Taro.showToast({
            title: '请输入留言内容',
            icon: 'none'
        })
        return
    }

    // 发送消息
    const { code } = await sendChatAPI({
        conversation_id: conversation_id.value,
        note: messageText.value,
    })
    if (code) {
        Taro.showToast({
            title: '消息发送成功',
            icon: 'success'
        })
    }

    // 清空输入框并关闭弹框
    messageText.value = ''
    showContactModal.value = false
}

/**
 * 购买商品
 */
const handlePurchase = async () => {
    const permissionResult = await checkPermission(PERMISSION_TYPES.BUY_CAR, {
        showToast: false,
        autoRedirect: false
    })

    // 如果没有权限，显示确认弹窗
    if (!permissionResult.hasPermission) {
        Taro.showModal({
            title: '提示',
            content: '购买车辆需要先完善个人信息',
            cancelText: '关闭',
            confirmText: '前往完善',
            success: (res) => {
                if (res.confirm) {
                    // 用户点击前往完善，跳转到注册页面
                    Taro.navigateTo({
                        url: '/pages/register/index'
                    })
                } else {
                    // 用户点击关闭，返回上一页
                    // Taro.navigateBack()
                }
            }
        })
        return
    } else {
        onPay({
            id: product.value.id,
            remain_time: 1800, // 30分钟
            price: product.value.price
        })
    }
}

/**
 * 发送订单支付信息到支付组件
 * @param {Object} payInfo - 支付信息
 * @param {string} payInfo.id - 订单ID
 * @param {number} payInfo.remain_time - 剩余时间
 * @param {number} payInfo.price - 价格
 */
const onPay = async ({ id, remain_time, price }) => {
    try {
        const { code, data } = await createOrderAPI({
            business_type: 'buy_sell',
            vehicle_id: id,
            total_amount: price
        })
        if (code) {
            show_pay.value = true
            payData.value.id = data.id
            payData.value.price = price
            payData.value.remain_time = remain_time
        }
    } catch (error) {
        console.error('创建订单失败:', error)
    }
}

/**
 * 关闭支付弹框
 */
const onPayClose = () => {
    show_pay.value = false
}

/**
 * 预览图片
 * @param {number} index - 当前图片索引
 */
const previewImages = (index) => {
    Taro.previewImage({
        current: product.value.images[index], // 当前显示图片的链接
        urls: product.value.images // 需要预览的图片链接列表
    })
}

// 分享功能
useShareAppMessage(() => {
    let params = getCurrentPageParam();
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
        title: `${product.value.brand} ${product.value.model}`,    // 默认是小程序的名称(可以写slogan等)
        path: `pages/productDetail/index?id=${params.id}`,    // 默认是当前页面，必须是以'/'开头的完整路径
        imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    }
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {
    //   var eData = options.target.dataset;
    //   // 此处可以修改 shareObj 中的内容
    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
    // }
    // 返回shareObj
    return shareObj;
})

// 过滤数组中的非空值（包括空字符串、null、undefined、空数组、空对象）
function filterEmptyValues(arr) {
    return arr.filter(item => {
        // 处理 null 和 undefined
        if (item == null) return false;

        // 处理空字符串
        if (typeof item === 'string') return item.trim().length > 0;

        // 处理数组
        if (Array.isArray(item)) return item.length > 0;

        // 处理对象
        if (typeof item === 'object') return Object.keys(item).length > 0;

        // 其他情况（数字、布尔值等）保留
        return true;
    });
}

useDidShow(async () => {
    // 获取用户信息
    await userStore.fetchUserInfo()

    // 获取页面参数
    let params = getCurrentPageParam();

    // 检查是否有商品ID参数，如果没有则不请求详情
    // 这种情况通常发生在支付成功后返回详情页，但实际上应该跳转到订单页面
    if (!params.id) {
        console.warn('商品详情页缺少ID参数，可能是支付成功后的异常返回')
        return
    }

    // 获取商品详情
    try {
        const { code, data } = await getVehicleDetailAPI({ id: params.id })
        if (code) {
            product.value = data
            product.value.cover_image = [data.front_photo || DEFAULT_COVER_IMG]
            product.value.images = filterEmptyValues([data.front_photo, data.other_photo, data.left_photo, data.right_photo])
        }
    } catch (error) {
        console.error('获取商品详情失败:', error)
    }
})
</script>

<style lang="less">
.product-detail-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120rpx;
}

.image-carousel {
    .nut-swiper {
        .nut-swiper-pagination {
            bottom: 20rpx;
        }
    }
}

.space-x-3>view:not(:first-child) {
    margin-left: 0.75rem;
}

.space-x-6>view:not(:first-child) {
    margin-left: 1.5rem;
}

.space-y-3>view:not(:first-child) {
    margin-top: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-2 {
    gap: 8rpx;
}

.gap-3 {
    gap: 12rpx;
}

.vehicle-images {
    .image-item {
        position: relative;
        overflow: hidden;
        border-radius: 12rpx;

        image {
            transition: transform 0.2s ease;
        }

        &:active {
            image {
                transform: scale(0.95);
            }
        }
    }
}

.rich-content {
    line-height: 1.6;
    // 处理文本里面含有/n的情况
    white-space: pre-line;

    p {
        margin-bottom: 12rpx;
    }

    ul {
        margin: 12rpx 0;
        padding-left: 20rpx;

        li {
            margin-bottom: 6rpx;
        }
    }
}

.contact-modal {
    .seller-card {
        background-color: #f9fafb;
    }

    .message-input {
        .nut-textarea {
            border-radius: 12rpx;
            border: 1px solid #e5e7eb;

            &:focus {
                border-color: #f97316;
                box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
            }
        }
    }

    .quick-tags {
        .quick-tag {
            transition: all 0.2s ease;
            border: 1px solid #fed7aa;

            &:hover {
                background-color: #f97316;
                color: white;
                transform: translateY(-1px);
            }

            &:active {
                transform: translateY(0);
            }
        }
    }

    .gap-2 {
        gap: 8rpx;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }
}
</style>