<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-07-07 15:51:00
 * @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.images" :key="index" style="height: 400rpx">
                    <image :src="image" :alt="product.name" 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.name }}</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"
                        class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                        <HeartFill v-if="isFavorite" size="18" color="#ef4444" />
                        <Heart1 v-else size="18" color="#666" />
                    </view>
                </view>
            </view>
            <view class="flex items-center mb-3">
                <text class="text-2xl font-bold text-orange-500 mr-2">
                    ¥{{ product.price.toLocaleString() }}
                </text>
                <view class="ml-2 text-xs px-2 py-1 bg-orange-100 text-orange-600 rounded">
                    低于市场价{{ product.discountPercent }}%
                </view>
            </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 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.year }}</text>
                    </view>
                </view>
                <view 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 }}</text>
                    </view>
                </view>
                <view 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.mileage }}</text>
                    </view>
                </view>
                <view 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.maxSpeed }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 车辆评估 -->
        <view 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 class="flex justify-between items-center">
                    <text>车辆成色</text>
                    <view class="flex">
                        <text v-for="star in 5" :key="star" class="text-orange-400">★</text>
                    </view>
                </view>
                <view class="flex justify-between items-center">
                    <text>刹车磨损度</text>
                    <view class="flex">
                        <text v-for="star in 5" :key="star"
                            :class="star <= Math.round(product.brakeCondition) ? 'text-orange-400' : 'text-gray-300'">
                            ★
                        </text>
                    </view>
                </view>
                <view class="flex justify-between items-center">
                    <text>轮胎磨损度</text>
                    <view class="flex">
                        <text v-for="star in 5" :key="star"
                            :class="star <= product.tireCondition ? 'text-orange-400' : 'text-gray-300'">
                            ★
                        </text>
                    </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.richDescription" class="rich-content"></rich-text>
            <image :src="product.images[1]" alt="车辆细节" mode="aspectFill"
                class="w-full h-40 object-cover rounded-lg mt-3" @error="onImageError" @load="onImageLoad" />
        </view>

        <!-- 卖家信息 -->
        <view 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 || defaultAvatar" :alt="product.seller.name" 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.name }}</text>
                            <view v-if="product.seller.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 }}</text>
                    </view>
                </view>
                <view @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 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 }}</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.name"
                            mode="aspectFill" class="w-12 h-12 rounded-full object-cover mr-3" />
                        <view>
                            <text class="font-medium block">{{ product.seller.name }}</text>
                            <text class="text-sm text-gray-500 block">{{ product.seller.school }}</text>
                        </view>
                    </view>
                </view>

                <!-- 留言输入框 -->
                <view class="message-input mb-4">
                    <nut-textarea v-model="messageText" placeholder="请输入您想对卖家说的话..." :rows="4" :max-length="200"
                        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 } from 'vue'
import Taro, { useShareAppMessage } from '@tarojs/taro'
import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro'
import payCard from '@/components/payCard.vue'
import avatarImg from '@/assets/images/avatar.png'
import { getCurrentPageParam } from "@/utils/weapp"

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

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

// 响应式数据
const currentImageIndex = ref(0)
const isFavorite = ref(false)
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({
    id: '5',
    name: '雅迪 豪华版',
    price: 3200,
    discountPercent: 8,
    images: [
        'https://images.unsplash.com/photo-1558981806-ec527fa84c39?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'
    ],
    year: '2023年',
    range: '60km',
    mileage: '1200公里',
    maxSpeed: '25km/h',
    batteryHealth: 98,
    brakeCondition: 4.5,
    tireCondition: 4,
    bodyCondition: 5,
    description: '这辆雅迪豪华版电动车是我去年购买的，一直很爱惜。电池健康度保持在98%，行驶里程仅1200公里，车身几乎无划痕，配置齐全，包括原装充电器、车锁、后视镜等。因为毕业需要离开学校，所以忍痛出售，价格比市场价低8%，非常划算。',
    richDescription: `
        <div style="line-height: 1.6; color: #333;">
            <p style="margin-bottom: 12px;">这辆<strong style="color: #f97316;">雅迪豪华版电动车</strong>是我去年购买的，一直很爱惜。</p>
            <p style="margin-bottom: 12px;">🔋 电池健康度保持在<span style="color: #10b981; font-weight: bold;">98%</span></p>
            <p style="margin-bottom: 12px;">🛣️ 行驶里程仅<span style="color: #3b82f6; font-weight: bold;">1200公里</span></p>
            <p style="margin-bottom: 12px;">✨ 车身几乎无划痕，配置齐全</p>
            <ul style="margin: 12px 0; padding-left: 20px;">
                <li style="margin-bottom: 6px;">✅ 原装充电器</li>
                <li style="margin-bottom: 6px;">✅ 车锁</li>
                <li style="margin-bottom: 6px;">✅ 后视镜</li>
                <li style="margin-bottom: 6px;">✅ 脚踏板</li>
            </ul>
            <p style="margin-bottom: 12px; background: #fef3c7; padding: 8px; border-radius: 6px;">💰 因为毕业需要离开学校，所以忍痛出售，价格比市场价低8%，非常划算！</p>
        </div>
    `,
    seller: {
        name: '李同学',
        verified: true,
        school: '上海理工大学-本部',
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        wechat: 'li_student_2023',
        phone: '138****8888'
    }
})

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

/**
 * 切换收藏状态
 */
const toggleFavorite = () => {
    isFavorite.value = !isFavorite.value
    Taro.showToast({
        title: isFavorite.value ? '已收藏' : '已取消收藏',
        icon: 'none'
    })
}

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

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

/**
 * 联系卖家
 */
const handleContactSeller = () => {
    showContactModal.value = true
}

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

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

    Taro.showToast({
        title: '消息发送成功',
        icon: 'success'
    })

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

    // 这里可以调用API发送消息
    // sendMessageAPI({
    //     sellerId: product.value.seller.id,
    //     message: messageText.value,
    //     productId: product.value.id
    // })
}

/**
 * 购买商品
 */
const handlePurchase = () => {
    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 = ({ id, remain_time, price }) => {
    show_pay.value = true
    payData.value.id = id
    payData.value.price = price
    payData.value.remain_time = remain_time
}

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

/**
 * 图片加载成功
 */
const onImageLoad = () => {
    // 图片加载成功
}

/**
 * 图片加载失败处理
 */
const onImageError = (e) => {
    const target = e.target || e.currentTarget
    const src = target.src

    // 记录加载失败的图片
    imageLoadErrors.value.add(src)

    // 如果不是备用图片，则替换为备用图片
    if (!src.includes('avatar.png')) {
        const imageIndex = product.value.images.findIndex(img => img === src)
        if (imageIndex !== -1 && fallbackImages.value[imageIndex]) {
            // 替换为备用图片
            product.value.images[imageIndex] = fallbackImages.value[imageIndex]
        }
    }

    Taro.showToast({
        title: '图片加载失败，已使用备用图片',
        icon: 'none',
        duration: 2000
    })
}

// 分享功能
useShareAppMessage(() => {
    let params = getCurrentPageParam();
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
        title: product.value.name,    // 默认是小程序的名称(可以写slogan等)
        path: `pages/productDetail/index?id=${params.id}`,    // 默认是当前页面，必须是以'/'开头的完整路径
        imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
        success: function (res) {
            // 转发成功之后的回调
            if (res.errMsg == 'shareAppMessage:ok') {
                Taro.showToast({
                    title: '分享成功',
                    icon: 'success'
                })
            }
        },
        fail: function () {
            // 转发失败之后的回调
            if (res.errMsg == 'shareAppMessage:fail cancel') {
                // 用户取消转发
                Taro.showToast({
                    title: '分享取消',
                    icon: 'none'
                })
            } else if (res.errMsg == 'shareAppMessage:fail') {
                // 转发失败，其中 detail message 为详细失败信息
                Taro.showToast({
                    title: '分享失败',
                    icon: 'none'
                })
            }
        },
        complete: function () {
            // 转发结束之后的回调（转发成不成功都会执行）
        }
    }
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {
    //   var eData = options.target.dataset;
    //   // 此处可以修改 shareObj 中的内容
    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
    // }
    // 返回shareObj
    return shareObj;
})
</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;
}

.grid {
    display: grid;
}

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

.gap-4 {
    gap: 1rem;
}

.rich-content {
    line-height: 1.6;

    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>