<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-07-04 12:22:02
 * @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">
                                {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }}
                            </text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

                    <!-- 续航里程 -->
                    <nut-form-item label="续航里程" prop="range" required :rules="[{ required: true, message: '请输入续航里程' }]">
                        <nut-input v-model="formData.range" placeholder="60" type="number" input-align="right">
                            <template #right>
                                <text class="unit">公里</text>
                            </template>
                        </nut-input>
                    </nut-form-item>

                    <!-- 最高时速 -->
                    <nut-form-item label="最高时速" prop="maxSpeed" required
                        :rules="[{ required: true, message: '请输入最高时速' }]">
                        <nut-input v-model="formData.maxSpeed" placeholder="25" type="number" input-align="right">
                            <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.description" placeholder="请描述车辆详情，如使用感受、车况特点等" :max-length="200"
                    :rows="4" show-word-limit />
            </view>
        </view>

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

        <!-- 品牌型号选择器 -->
        <BrandModelPicker
            ref="brandModelPickerRef"
            @confirm="onBrandModelConfirm"
            @cancel="onBrandModelCancel"
        />
    </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'

// 获取页面参数
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: '',
    maxSpeed: '',
    description: ''
})

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



/**
 * 触发图片上传
 * @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;
                        Taro.showToast({
                            title: '上传成功',
                            icon: 'success'
                        })
                    } else {
                        Taro.showToast({
                            icon: 'error',
                            title: '服务器错误,稍后重试！',
                            mask: true
                        })
                    }
                },
            });
        },
        fail: function (res) {
            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 = () => {
    // 可以在这里处理取消逻辑
}

/**
 * 提交申请/保存修改
 */
const onSubmit = () => {
    // 表单验证
    if (!formData.brandModel) {
        Taro.showToast({
            title: '请选择品牌型号',
            icon: 'none'
        })
        return
    }

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

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

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

    // 提交数据
    const submitData = {
        ...formData,
        images: uploadedImages
    }

    if (isEditMode.value) {
        submitData.id = carId.value
    }

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

    // TODO: 调用真实API
    // if (isEditMode.value) {
    //   updateAuthApplication(carId.value, submitData)
    // } else {
    //   submitAuthApplication(submitData)
    // }

    // 模拟提交成功
    setTimeout(() => {
        Taro.hideLoading()
        const successTitle = isEditMode.value ? '保存成功' : '申请提交成功'
        Taro.showToast({
            title: successTitle,
            icon: 'success'
        })

        // 返回上一页
        setTimeout(() => {
            Taro.navigateBack()
        }, 1500)
    }, 2000)
}

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

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

        // TODO: 调用真实API获取认证数据
        // const authData = await getAuthById(carId.value)

        // 暂时不模拟数据，按用户要求
        // 如果需要模拟数据，可以取消下面的注释

        const mockAuthData = {
            brand: '小牛电动',
            model: 'NGT',
            range: '60',
            maxSpeed: '25',
            description: '车况良好，电池续航正常，无重大事故。',
            images: {
                front: 'https://picsum.photos/300/200?random=5',
                left: 'https://picsum.photos/300/200?random=6',
                right: 'https://picsum.photos/300/200?random=7',
                other: 'https://picsum.photos/300/200?random=8'
            }
        }

        // 填充表单数据
        Object.assign(formData, {
            brand: mockAuthData.brand,
            model: mockAuthData.model,
            brandModel: `${mockAuthData.brand} ${mockAuthData.model}`, // 设置组合字段
            range: mockAuthData.range,
            maxSpeed: mockAuthData.maxSpeed,
            description: mockAuthData.description
        })

        // 填充图片数据
        Object.assign(uploadedImages, mockAuthData.images)


        Taro.hideLoading()
    } catch (error) {
        console.error('加载认证数据失败:', error)
        Taro.hideLoading()
        Taro.showToast({
            title: '加载数据失败',
            icon: 'none'
        })
    }
}

// 页面加载时执行
onMounted(() => {
    if (isEditMode.value) {
        loadAuthData()
    }
    // 动态修改标题
    wx.setNavigationBarTitle({
        title: isEditMode.value ? '编辑认证' : '发布认证'
    });
})
</script>

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