<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-04 09:58:48
 * @FilePath: /jgdl/src/pages/setAuthCar/index.vue
 * @Description: 申请认证
-->
<template>
    <view class="auth-car-page">
        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 车辆照片上传 -->
            <view class="form-section">
                <text class="section-title">添加车辆照片</text>
                <view class="upload-grid">
                    <!-- 正面照 -->
                    <view class="upload-item">
                        <!-- 上传按钮 -->
                        <view v-if="!uploadedImages.front" class="upload-button" @click="triggerUpload('front')">
                            <Plus class="upload-icon" />
                        </view>
                        <!-- 图片预览 -->
                        <view v-else class="image-preview" @click="previewImage(uploadedImages.front)">
                            <image :src="uploadedImages.front" class="preview-image" mode="aspectFill" />
                            <view class="delete-btn" @click.stop="deleteImage('front')">
                                <Close class="delete-icon" />
                            </view>
                        </view>
                        <text class="upload-label">正面照</text>
                    </view>

                    <!-- 左侧照 -->
                    <view class="upload-item">
                        <!-- 上传按钮 -->
                        <view v-if="!uploadedImages.left" class="upload-button" @click="triggerUpload('left')">
                            <Plus class="upload-icon" />
                        </view>
                        <!-- 图片预览 -->
                        <view v-else class="image-preview" @click="previewImage(uploadedImages.left)">
                            <image :src="uploadedImages.left" class="preview-image" mode="aspectFill" />
                            <view class="delete-btn" @click.stop="deleteImage('left')">
                                <Close class="delete-icon" />
                            </view>
                        </view>
                        <text class="upload-label">左侧照</text>
                    </view>

                    <!-- 右侧照 -->
                    <view class="upload-item">
                        <!-- 上传按钮 -->
                        <view v-if="!uploadedImages.right" class="upload-button" @click="triggerUpload('right')">
                            <Plus class="upload-icon" />
                        </view>
                        <!-- 图片预览 -->
                        <view v-else class="image-preview" @click="previewImage(uploadedImages.right)">
                            <image :src="uploadedImages.right" class="preview-image" mode="aspectFill" />
                            <view class="delete-btn" @click.stop="deleteImage('right')">
                                <Close class="delete-icon" />
                            </view>
                        </view>
                        <text class="upload-label">右侧照</text>
                    </view>

                    <!-- 其他 -->
                    <view class="upload-item">
                        <!-- 上传按钮 -->
                        <view v-if="!uploadedImages.other" class="upload-button" @click="triggerUpload('other')">
                            <Plus class="upload-icon" />
                        </view>
                        <!-- 图片预览 -->
                        <view v-else class="image-preview" @click="previewImage(uploadedImages.other)">
                            <image :src="uploadedImages.other" class="preview-image" mode="aspectFill" />
                            <view class="delete-btn" @click.stop="deleteImage('other')">
                                <Close class="delete-icon" />
                            </view>
                        </view>
                        <text class="upload-label">其他</text>
                    </view>
                </view>

                <!-- 图片预览组件 -->
                <nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex"
                    @close="closePreview" />
            </view>

            <!-- 车辆详情表单 -->
            <nut-form ref="formRef" :model-value="formData">
                <view class="form-section">
                    <!-- 品牌型号选择 -->
                    <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel" required
                        :rules="[{ required: true, message: '请选择品牌型号' }]">
                        <view class="form-item-content" @click="showBrandModelPicker">
                            <text class="form-value"
                                :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model) }">
                                {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号'
                                }}
                            </text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

                    <!-- 续航里程 -->
                    <nut-form-item label="续航里程" prop="range_km">
                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right"
                            @input="validateRangeInput">
                            <template #right>
                                <text class="unit">公里</text>
                            </template>
                        </nut-input>
                    </nut-form-item>

                    <!-- 最高时速 -->
                    <nut-form-item label="最高时速" prop="max_speed_kmh">
                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number" input-align="right"
                            @input="validateMaxSpeedInput">
                            <template #right>
                                <text class="unit">km/h</text>
                            </template>
                        </nut-input>
                    </nut-form-item>
                </view>
            </nut-form>

            <!-- 车辆描述 -->
            <view class="form-section">
                <text class="section-title">车辆描述</text>
                <nut-textarea v-model="formData.note" placeholder="请描述车辆详情，如使用感受、车况特点等" :max-length="200" :rows="4"
                    show-word-limit :cursorSpacing="100" />
            </view>
        </view>

        <!-- 底部按钮 -->
        <view class="bottom-actions">
            <nut-button color="#f97316" size="large" block @click="onSubmit">
                {{ isEditMode ? '提交申请并支付' : '提交申请并支付' }}
            </nut-button>
        </view>

        <!-- 品牌型号选择器 -->
        <BrandModelPicker ref="brandModelPickerRef" :brand-options="brandOptions" @confirm="onBrandModelConfirm"
            @cancel="onBrandModelCancel" />

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

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Right, Close } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import './index.less'
import BASE_URL from '@/utils/config';
import BrandModelPicker from '@/components/BrandModelPicker.vue'
import payCard from '@/components/payCard.vue'

// 导入接口
import { getBrandsModelsAPI } from '@/api/other';
import { addVehicleAPI, editVehicleAPI, getVehicleDetailAPI } from '@/api/car';
import { createOrderAPI } from '@/api/orders'

// 获取页面参数
const instance = Taro.getCurrentInstance()
const { id, mode } = instance.router?.params || {}
const isEditMode = ref(mode === 'edit' && id)
const carId = ref(id || '')

// 已上传图片的URL
const uploadedImages = reactive({
    front: '',
    left: '',
    right: '',
    other: ''
})

// 图片预览相关
const previewVisible = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)

const closePreview = () => {
    previewVisible.value = false
}

// 表单数据
const formData = reactive({
    brand: '',
    model: '',
    brandModel: '', // 品牌型号组合字段，用于表单验证
    range_km: '',
    max_speed_kmh: '',
    note: '',
    // 车辆照片字段
    front_photo: '',
    left_photo: '',
    right_photo: '',
    other_photo: '',
    verification_status: ''
})

// 品牌型号选择器组件引用
const brandModelPickerRef = ref(null)

// 品牌型号选项数据
const brandOptions = ref([])

/**
 * 支付模块
 */
const show_pay = ref(false)
const payData = ref({
    id: '',
    price: 0,
    remain_time: 0
})

/**
 * 发送订单支付信息到支付组件
 * @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: 'verification',
            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 {Object} data - 支付成功数据
 * @param {string} data.orderId - 订单ID
 */
const onPaySuccess = ({ orderId }) => {
    if (isEditMode.value) {
        Taro.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000,
            complete: () => {
                // 保存成功后返回上一页
                Taro.navigateBack()
            }
        })
    } else {
        Taro.showModal({
            title: '温馨提示',
            content: '认证提交成功，我们会尽快审核',
            showCancel: false,
            confirmText: '知道了',
            success: function (res) {
                if (res.confirm) {
                    Taro.navigateBack()
                }
            }
        })
    }
}

/**
 * 触发图片上传
 * @param {String} type - 图片类型 (front/left/right/other)
 */
const triggerUpload = (type) => {
    Taro.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
            const tempFilePath = res.tempFilePaths[0]
            uploadImage(tempFilePath, type)
        },
        fail: function () {
            Taro.showToast({
                title: '选择图片失败',
                icon: 'none'
            })
        }
    })
}

/**
 * 上传图片到服务器
 * @param {String} filePath - 图片文件路径
 * @param {String} type - 图片类型 (front/left/right/other)
 */
const uploadImage = (filePath, type) => {
    // 显示上传中提示
    Taro.showLoading({
        title: '上传中',
        mask: true
    })

    // 获取上传URL
    wx.uploadFile({
        url: BASE_URL + '/admin/?m=srv&a=upload',
        filePath,
        name: 'file',
        header: {
            'content-type': 'multipart/form-data',
        },
        success: function (res) {
            let upload_data = JSON.parse(res.data);
            Taro.hideLoading({
                success: () => {
                    if (res.statusCode === 200) {
                        uploadedImages[type] = upload_data.data.src;
                        // 同时更新formData中对应的照片字段
                        formData[`${type}_photo`] = upload_data.data.src;
                        Taro.showToast({
                            title: '上传成功',
                            icon: 'success'
                        })
                    } else {
                        Taro.showToast({
                            icon: 'error',
                            title: '服务器错误,稍后重试！',
                            mask: true
                        })
                    }
                }
            });
        },
        fail: function () {
            Taro.hideLoading({
                success: () => {
                    Taro.showToast({
                        icon: 'error',
                        title: '上传失败,稍后重试！',
                        mask: true
                    })
                }
            })
        }
    });
}

/**
 * 删除图片
 * @param {String} type - 图片类型
 */
const deleteImage = (type) => {
    uploadedImages[type] = ''
    Taro.showToast({
        title: '删除成功',
        icon: 'success'
    })
}

/**
 * 预览图片
 * @param {String} imageUrl - 图片URL
 */
const previewImage = (imageUrl) => {
    previewImages.value = [{ src: imageUrl }]
    previewIndex.value = 0
    previewVisible.value = true
}

/**
 * 显示品牌型号选择器
 */
const showBrandModelPicker = () => {
    brandModelPickerRef.value?.show()
}

/**
 * 品牌型号选择确认
 * @param {Object} data - 选择的品牌和型号数据
 */
const onBrandModelConfirm = (data) => {
    formData.brand = data.brand
    formData.model = data.model
    formData.brandModel = `${data.brand} ${data.model}` // 设置组合字段用于表单验证

    // Taro.showToast({
    //     title: `已选择 ${data.brand} ${data.model}`,
    //     icon: 'success',
    //     duration: 2000
    // })
}

/**
 * 品牌型号选择取消回调
 */
const onBrandModelCancel = () => {
    // 可以在这里处理取消逻辑
}

/**
 * 通用数字输入验证函数，限制范围在0-99999之间
 * @param {Object} event - 输入事件对象
 * @param {String} field - 字段名
 * @param {Boolean} allowDecimal - 是否允许小数，默认false
 */
const validateNumberInput = (event, field, allowDecimal = false) => {
    let value = event.detail.value

    // 只保留数字和小数点（如果允许），删除其他字符
    if (allowDecimal) {
        value = value.replace(/[^0-9.]/g, '')

        // 防止多个小数点，只保留第一个小数点
        const dotIndex = value.indexOf('.')
        if (dotIndex !== -1) {
            value = value.substring(0, dotIndex + 1) + value.substring(dotIndex + 1).replace(/\./g, '')
        }

        // 防止以小数点开头
        if (value.startsWith('.')) {
            value = '0' + value
        }
    } else {
        // 只允许整数
        value = value.replace(/[^0-9]/g, '')
    }

    // 限制范围在0-99999之间
    const numValue = parseFloat(value)
    if (numValue > 99999) {
        value = '99999'
    }

    // 使用 nextTick 确保视图更新
    Taro.nextTick(() => {
        formData[field] = value
    })
}

/**
 * 校验续航里程输入，只允许整数，范围0-99999
 * @param {Object} event - 输入事件对象
 */
const validateRangeInput = (event) => {
    validateNumberInput(event, 'range_km', false)
}

/**
 * 校验最高时速输入，只允许整数，范围0-99999
 * @param {Object} event - 输入事件对象
 */
const validateMaxSpeedInput = (event) => {
    validateNumberInput(event, 'max_speed_kmh', false)
}

/**
 * 加载品牌型号数据
 */
const loadBrandsModels = async () => {
    try {
        const { code, data } = await getBrandsModelsAPI()
        if (code && data) {
            // 转换品牌数据格式
            brandOptions.value = data.map(brand => ({
                text: brand.name,
                value: brand.id,
                models: brand.models || []
            }))
        }
    } catch (error) {
        console.error('加载品牌型号列表失败:', error)
    }
}

/**
 * 表单验证
 */
const validateForm = () => {
    if (!formData.brandModel) {
        Taro.showToast({
            title: '请选择品牌型号',
            icon: 'none'
        })
        return false
    }

    // if (!formData.range_km) {
    //     Taro.showToast({
    //         title: '请输入续航里程',
    //         icon: 'none'
    //     })
    //     return false
    // }

    // if (!formData.max_speed_kmh) {
    //     Taro.showToast({
    //         title: '请输入最高时速',
    //         icon: 'none'
    //     })
    //     return false
    // }

    // 检查是否至少上传了一张照片
    const hasImage = uploadedImages.front
    if (!hasImage) {
        Taro.showToast({
            title: '请至少上传一张车辆照片',
            icon: 'none'
        })
        return false
    }

    return true
}

/**
 * 提交申请/保存修改
 */
const onSubmit = async () => {
    // 表单验证
    if (!validateForm()) {
        return
    }

    // 同步图片数据到表单
    formData.front_photo = uploadedImages.front
    formData.left_photo = uploadedImages.left
    formData.right_photo = uploadedImages.right
    formData.other_photo = uploadedImages.other

    const loadingTitle = isEditMode.value ? '保存中' : '提交中'
    Taro.showLoading({
        title: loadingTitle,
        mask: true
    })

    try {
        // 调用真实API
        if (isEditMode.value) {
            // 编辑车辆，且认证时，op=verification，表示申请认证
            const { code, data } = await editVehicleAPI({ id: carId.value, ...formData, op: 'verification' })
            if (code) {
                onPay({
                    id: data.id,
                    remain_time: data.remain_time || 1800, // 30分钟
                    price: data.verification_price
                })
            }
        } else {
            // 新增车辆，且认证时，op=verification，表示只申请认证
            const { code, data } = await addVehicleAPI({ ...formData, op: 'verification' })
            if (code) {
                onPay({
                    id: data.id,
                    remain_time: data.remain_time || 1800, // 30分钟
                    price: data.verification_price
                })
            }
        }

        Taro.hideLoading()
    } catch (error) {
        console.error('提交失败:', error)
        Taro.hideLoading()
        Taro.showToast({
            title: '提交失败，请重试',
            icon: 'none'
        })
    }
}

/**
 * 加载认证数据（编辑模式）
 */
const loadAuthData = async () => {
    if (!isEditMode.value || !carId.value) return

    try {
        Taro.showLoading({ title: '加载中...' })

        // 调用真实API获取车辆数据
        const { code, data } = await getVehicleDetailAPI({ id: carId.value })
        if (code && data) {
            // 填充表单数据
            Object.assign(formData, {
                ...data,
                brand: data.brand,
                model: data.model,
                brandModel: `${data.brand} ${data.model}`,
                range_km: data.range_km,
                max_speed_kmh: data.max_speed_kmh,
                note: data.note,
                front_photo: data.front_photo,
                left_photo: data.left_photo,
                right_photo: data.right_photo,
                other_photo: data.other_photo,
                verification_status: data.verification_status
            })

            // 填充图片数据
            Object.assign(uploadedImages, {
                front: data.front_photo,
                left: data.left_photo,
                right: data.right_photo,
                other: data.other_photo
            })
        } else {
            throw new Error('获取车辆数据失败')
        }
    } catch (error) {
        console.error('加载车辆数据失败:', error)
        Taro.showToast({
            title: '加载数据失败',
            icon: 'none'
        })

    } finally {
        Taro.hideLoading()
    }
}

// 页面加载时执行
onMounted(async () => {
    // 并行加载品牌型号数据
    await loadBrandsModels()

    if (isEditMode.value) {
        loadAuthData()
    }

    // 动态修改标题
    wx.setNavigationBarTitle({
        title: isEditMode.value ? '发布认证' : '发布认证'
    });
})
</script>

<script>
export default {
    name: "setAuthCarPage",
};
</script>