<template>
    <view class="sell-page">
        <!-- 顶部导航 -->
        <nut-config-provider :theme-vars="themeVars">
            <nut-navbar title="发布车源" left-show @on-click-back="goBack">
                <template #left-show>
                    <RectLeft />
                </template>
            </nut-navbar>
        </nut-config-provider>

        <!-- 表单内容 -->
        <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" />
            </view>

            <!-- 所在学校 -->
            <view class="form-section">
                <view class="form-item" @click="showSchoolPicker">
                    <view class="form-item-left">
                        <Location class="form-icon" />
                        <text class="form-label">所在学校</text>
                    </view>
                    <view class="form-item-right">
                        <text class="form-value">{{ formData.school || '上海理工大学' }}</text>
                        <Right class="arrow-icon" />
                    </view>
                </view>
            </view>

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

                    <!-- 车辆型号 -->
                    <nut-form-item label-position="top" label="车辆型号" prop="model">
                        <view class="form-item-content" @click="showModelPicker">
                            <text class="form-value">{{ formData.model || '请选择' }}</text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

                    <!-- 车辆出厂年份 -->
                    <nut-form-item label-position="top" label="车辆出厂年份" prop="year">
                        <view class="form-item-content" @click="showYearPicker">
                            <text class="form-value">{{ formData.year || '请选择' }}</text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

                    <!-- 新旧程度 -->
                    <nut-form-item label-position="top" label="新旧程度" prop="condition" required
                        :rules="[{ required: true, message: '请选择新旧程度' }]">
                        <view class="form-item-content" @click="showConditionPicker">
                            <text class="form-value">{{ formData.condition || '请选择' }}</text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

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

                    <!-- 续航里程 -->
                    <nut-form-item label="续航里程" prop="range">
                        <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">
                        <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>

                    <!-- 电池容量 -->
                    <nut-form-item label="电池容量" prop="batteryCapacity">
                        <nut-input v-model="formData.batteryCapacity" placeholder="20" type="number"
                            input-align="right">
                            <template #right>
                                <text class="unit">Ah</text>
                            </template>
                        </nut-input>
                    </nut-form-item>

                    <!-- 电池损耗度 -->
                    <nut-form-item label-position="top" label="电池损耗度" prop="batteryWear">
                        <view class="form-item-content" @click="showBatteryWearPicker">
                            <text class="form-value">{{ formData.batteryWear || '请选择' }}</text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

                    <!-- 刹车磨损度 -->
                    <nut-form-item label-position="top" label="刹车磨损度" prop="brakeWear">
                        <view class="form-item-content" @click="showBrakeWearPicker">
                            <text class="form-value">{{ formData.brakeWear || '请选择' }}</text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>

                    <!-- 轮胎磨损度 -->
                    <nut-form-item label-position="top" label="轮胎磨损度" prop="tireWear">
                        <view class="form-item-content" @click="showTireWearPicker">
                            <text class="form-value">{{ formData.tireWear || '请选择' }}</text>
                            <Right class="arrow-icon" />
                        </view>
                    </nut-form-item>
                </view>
            </nut-form>

            <!-- 价格信息 -->
            <view class="form-section">
                <view class="form-item">
                    <view class="form-item-left">
                        <Location class="form-icon" />
                        <text class="form-label">出让价格</text>
                    </view>
                    <view class="form-item-right">
                        <text class="price-symbol">¥</text>
                        <input v-model="formData.sellingPrice" placeholder="3,200" type="text" class="price-input" />
                    </view>
                </view>

                <view class="form-item">
                    <view class="form-item-left">
                        <Location class="form-icon" />
                        <text class="form-label">市场价</text>
                    </view>
                    <view class="form-item-right">
                        <text class="market-price-symbol">¥</text>
                        <input v-model="formData.marketPrice" placeholder="6,500" type="text"
                            class="market-price-input" />
                    </view>
                </view>
            </view>

            <!-- 车辆描述 -->
            <view class="form-section">
                <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="onPublish">
                确认发布
            </nut-button>
        </view>

        <!-- 选择器弹窗 -->
        <!-- 学校选择 -->
        <nut-popup v-model:visible="schoolPickerVisible" position="bottom">
            <nut-picker v-model="schoolValue" :columns="schoolOptions" title="选择学校" @confirm="onSchoolConfirm"
                @cancel="schoolPickerVisible = false" />
        </nut-popup>

        <!-- 品牌选择 -->
        <nut-popup v-model:visible="brandPickerVisible" position="bottom">
            <nut-picker v-model="brandValue" :columns="brandOptions" title="选择车型品牌" @confirm="onBrandConfirm"
                @cancel="brandPickerVisible = false" />
        </nut-popup>

        <!-- 型号选择 -->
        <nut-popup v-model:visible="modelPickerVisible" position="bottom">
            <nut-picker v-model="modelValue" :columns="modelOptions" title="选择车辆型号" @confirm="onModelConfirm"
                @cancel="modelPickerVisible = false" />
        </nut-popup>

        <!-- 年份选择 -->
        <nut-popup v-model:visible="yearPickerVisible" position="bottom">
            <nut-picker v-model="yearValue" :columns="yearOptions" title="选择出厂年份" @confirm="onYearConfirm"
                @cancel="yearPickerVisible = false" />
        </nut-popup>

        <!-- 新旧程度选择 -->
        <nut-popup v-model:visible="conditionPickerVisible" position="bottom">
            <nut-picker v-model="conditionValue" :columns="conditionOptions" title="选择新旧程度"
                @confirm="onConditionConfirm" @cancel="conditionPickerVisible = false" />
        </nut-popup>

        <!-- 电池损耗度选择 -->
        <nut-popup v-model:visible="batteryWearPickerVisible" position="bottom">
            <nut-picker v-model="batteryWearValue" :columns="wearLevelOptions" title="选择电池损耗度"
                @confirm="onBatteryWearConfirm" @cancel="batteryWearPickerVisible = false" />
        </nut-popup>

        <!-- 刹车磨损度选择 -->
        <nut-popup v-model:visible="brakeWearPickerVisible" position="bottom">
            <nut-picker v-model="brakeWearValue" :columns="wearLevelOptions" title="选择刹车磨损度"
                @confirm="onBrakeWearConfirm" @cancel="brakeWearPickerVisible = false" />
        </nut-popup>

        <!-- 轮胎磨损度选择 -->
        <nut-popup v-model:visible="tireWearPickerVisible" position="bottom">
            <nut-picker v-model="tireWearValue" :columns="wearLevelOptions" title="选择轮胎磨损度" @confirm="onTireWearConfirm"
                @cancel="tireWearPickerVisible = false" />
        </nut-popup>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus, Right, Location, RectLeft, Close } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
// import BASE_URL from '@/utils/config';

const themeVars = ref({
    // navbarBackground: '#FFA135',
    // navbarColor: '#ffffff',
})

// 文件上传相关
// const frontFileList = ref([])  // 正面照（保留用于兼容旧代码）
// const leftFileList = ref([])   // 左侧照（保留用于兼容旧代码）
// const rightFileList = ref([])  // 右侧照（保留用于兼容旧代码）
// const otherFileList = ref([])  // 其他照片（保留用于兼容旧代码）

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

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

// 表单数据
const formData = reactive({
    school: '',
    brand: '',
    model: '',
    year: '',
    condition: '',
    mileage: '1200',
    range: '60',
    maxSpeed: '25',
    batteryCapacity: '20',
    batteryWear: '',
    brakeWear: '',
    tireWear: '',
    sellingPrice: '3,200',
    marketPrice: '6,500',
    description: ''
})

// 选择器显示状态
const schoolPickerVisible = ref(false)
const brandPickerVisible = ref(false)
const modelPickerVisible = ref(false)
const yearPickerVisible = ref(false)
const conditionPickerVisible = ref(false)
const batteryWearPickerVisible = ref(false)
const brakeWearPickerVisible = ref(false)
const tireWearPickerVisible = ref(false)

// 选择器值
const schoolValue = ref([])
const brandValue = ref([])
const modelValue = ref([])
const yearValue = ref([])
const conditionValue = ref([])
const batteryWearValue = ref([])
const brakeWearValue = ref([])
const tireWearValue = ref([])

// 选择器选项数据
const schoolOptions = ref([
    { text: '上海理工大学', value: '上海理工大学' },
    { text: '复旦大学', value: '复旦大学' },
    { text: '上海交通大学', value: '上海交通大学' },
    { text: '同济大学', value: '同济大学' },
    { text: '华东师范大学', value: '华东师范大学' },
    { text: '上海大学', value: '上海大学' },
    { text: '东华大学', value: '东华大学' },
    { text: '上海财经大学', value: '上海财经大学' }
])

const brandOptions = ref([
    { text: '小牛电动', value: '小牛电动' },
    { text: '雅迪', value: '雅迪' },
    { text: '爱玛', value: '爱玛' },
    { text: '台铃', value: '台铃' },
    { text: '绿源', value: '绿源' },
    { text: '新日', value: '新日' },
    { text: '立马', value: '立马' },
    { text: '其他', value: '其他' }
])

const modelOptions = ref([
    { text: 'NGT', value: 'NGT' },
    { text: 'UQi+', value: 'UQi+' },
    { text: 'Gova G2', value: 'Gova G2' },
    { text: 'MQi+', value: 'MQi+' },
    { text: 'NQi GTS', value: 'NQi GTS' },
    { text: 'RQi', value: 'RQi' },
    { text: '其他型号', value: '其他型号' }
])

const yearOptions = ref([
    { text: '2024年', value: '2024年' },
    { text: '2023年', value: '2023年' },
    { text: '2022年', value: '2022年' },
    { text: '2021年', value: '2021年' },
    { text: '2020年', value: '2020年' },
    { text: '2019年', value: '2019年' },
    { text: '2018年及以前', value: '2018年及以前' }
])

const conditionOptions = ref([
    { text: '全新', value: '全新' },
    { text: '9成新', value: '9成新' },
    { text: '8成新', value: '8成新' },
    { text: '7成新', value: '7成新' },
    { text: '6成新', value: '6成新' },
    { text: '5成新及以下', value: '5成新及以下' }
])

const wearLevelOptions = ref([
    { text: '全新', value: '全新' },
    { text: '轻微磨损', value: '轻微磨损' },
    { text: '中度磨损', value: '中度磨损' },
    { text: '重度磨损', value: '重度磨损' },
    { text: '需要更换', value: '需要更换' }
])

/**
 * 返回上一页
 */
const goBack = () => {
    Taro.redirectTo({
        url: '/pages/index/index'
    })
}

/**
 * 触发图片上传
 * @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
    })

    // 模拟上传成功（实际项目中替换为真实的上传逻辑）
    setTimeout(() => {
        Taro.hideLoading()

        // 模拟服务器返回的图片URL
        const mockImageUrl = filePath // 在实际项目中，这里应该是服务器返回的URL

        // 更新对应类型的图片
        uploadedImages[type] = mockImageUrl

        Taro.showToast({
            title: '上传成功',
            icon: 'success'
        })
    }, 1500)

    // 真实上传逻辑（注释掉的代码供参考）
    /*
    Taro.uploadFile({
        url: BASE_URL + '/admin/?m=srv&a=upload',
        filePath: filePath,
        name: 'file',
        header: {
            'content-type': 'multipart/form-data'
        },
        success: function (res) {
            try {
                const upload_data = JSON.parse(res.data)
                Taro.hideLoading()

                if (res.statusCode === 200 && upload_data.data) {
                    // 上传成功，更新对应类型的图片
                    uploadedImages[type] = upload_data.data.src

                    Taro.showToast({
                        title: '上传成功',
                        icon: 'success'
                    })
                } else {
                    throw new Error('上传失败')
                }
            } catch (error) {
                Taro.hideLoading()
                Taro.showToast({
                    icon: 'error',
                    title: '服务器错误,稍后重试！',
                    mask: true
                })
            }
        },
        fail: function () {
            Taro.hideLoading()
            Taro.showToast({
                icon: 'error',
                title: '上传失败，请重试',
                mask: true
            })
        }
    })
    */
}

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

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

// 保留旧的上传逻辑作为备用（已注释）
// const afterRead = (event, type) => { ... }

// 保留旧的删除逻辑作为备用（已注释）
// const onDeleteFront = (file, index) => { frontFileList.value.splice(index, 1) }
// const onDeleteLeft = (file, index) => { leftFileList.value.splice(index, 1) }
// const onDeleteRight = (file, index) => { rightFileList.value.splice(index, 1) }
// const onDeleteOther = (file, index) => { otherFileList.value.splice(index, 1) }

/**
 * 显示学校选择器
 */
const showSchoolPicker = () => {
    schoolPickerVisible.value = true
}

/**
 * 显示品牌选择器
 */
const showBrandPicker = () => {
    brandPickerVisible.value = true
}

/**
 * 显示型号选择器
 */
const showModelPicker = () => {
    if (!formData.brand) {
        Taro.showToast({
            title: '请先选择品牌',
            icon: 'none'
        })
        return
    }
    modelPickerVisible.value = true
}

/**
 * 显示年份选择器
 */
const showYearPicker = () => {
    yearPickerVisible.value = true
}

/**
 * 显示新旧程度选择器
 */
const showConditionPicker = () => {
    conditionPickerVisible.value = true
}

/**
 * 显示电池损耗度选择器
 */
const showBatteryWearPicker = () => {
    batteryWearPickerVisible.value = true
}

/**
 * 显示刹车磨损度选择器
 */
const showBrakeWearPicker = () => {
    brakeWearPickerVisible.value = true
}

/**
 * 显示轮胎磨损度选择器
 */
const showTireWearPicker = () => {
    tireWearPickerVisible.value = true
}

/**
 * 学校选择确认
 */
const onSchoolConfirm = ({ selectedValue }) => {
    formData.school = selectedValue[0]
    schoolPickerVisible.value = false
}

/**
 * 品牌选择确认
 */
const onBrandConfirm = ({ selectedValue }) => {
    formData.brand = selectedValue[0]
    formData.model = '' // 重置型号
    brandPickerVisible.value = false
}

/**
 * 型号选择确认
 */
const onModelConfirm = ({ selectedValue }) => {
    formData.model = selectedValue[0]
    modelPickerVisible.value = false
}

/**
 * 年份选择确认
 */
const onYearConfirm = ({ selectedValue }) => {
    formData.year = selectedValue[0]
    yearPickerVisible.value = false
}

/**
 * 新旧程度选择确认
 */
const onConditionConfirm = ({ selectedValue }) => {
    formData.condition = selectedValue[0]
    conditionPickerVisible.value = false
}

/**
 * 电池损耗度选择确认
 */
const onBatteryWearConfirm = ({ selectedValue }) => {
    formData.batteryWear = selectedValue[0]
    batteryWearPickerVisible.value = false
}

/**
 * 刹车磨损度选择确认
 */
const onBrakeWearConfirm = ({ selectedValue }) => {
    formData.brakeWear = selectedValue[0]
    brakeWearPickerVisible.value = false
}

/**
 * 轮胎磨损度选择确认
 */
const onTireWearConfirm = ({ selectedValue }) => {
    formData.tireWear = selectedValue[0]
    tireWearPickerVisible.value = false
}

/**
 * 发布车辆
 */
const onPublish = () => {
    if (!validateForm()) return

    Taro.showLoading({ title: '发布中...' })

    // 收集所有上传的图片URL
    const images = {
        front: uploadedImages.front || '',
        left: uploadedImages.left || '',
        right: uploadedImages.right || '',
        other: uploadedImages.other || ''
    }

    // 构建提交数据
    const submitData = {
        ...formData,
        images: images,
        imageUrls: Object.values(images).filter(url => url) // 过滤空URL
    }

    // 发布车辆信息数据已准备完成
    // TODO: 在此处调用实际的API接口提交数据
    // console.log('提交数据:', submitData)

    // 模拟发布请求
    setTimeout(() => {
        Taro.hideLoading()
        Taro.showToast({
            title: '发布成功',
            icon: 'success'
        })

        // 发布成功后跳转到首页
        setTimeout(() => {
            Taro.switchTab({ url: '/pages/index/index' })
        }, 1500)
    }, 2000)
}

/**
 * 表单验证
 * @returns {boolean} 验证结果
 */
const validateForm = () => {
    // 检查是否至少上传了一张图片
    const hasImages = uploadedImages.front || uploadedImages.left || uploadedImages.right || uploadedImages.other
    if (!hasImages) {
        Taro.showToast({ title: '请上传车辆图片', icon: 'none' })
        return false
    }

    if (!formData.brand) {
        Taro.showToast({ title: '请选择车型品牌', icon: 'none' })
        return false
    }

    if (!formData.condition) {
        Taro.showToast({ title: '请选择新旧程度', icon: 'none' })
        return false
    }

    if (!formData.mileage || formData.mileage <= 0) {
        Taro.showToast({ title: '请输入正确的行驶里程', icon: 'none' })
        return false
    }

    if (!formData.sellingPrice) {
        Taro.showToast({ title: '请输入出让价格', icon: 'none' })
        return false
    }

    return true
}
</script>

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

.form-container {
    padding: 0 32rpx;
    margin-bottom: 2rem;
}

.form-section {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin: 24rpx 0;
}

.section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #111827;
    margin-bottom: 32rpx;
    display: block;
}

.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;
    margin-top: 24rpx;
}

.upload-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
}

.upload-button {
    width: 160rpx;
    height: 160rpx;
    border: 2rpx dashed #d1d5db;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb;
    transition: all 0.3s ease;
}

.upload-button:active {
    background-color: #f3f4f6;
    border-color: #f97316;
}

.upload-icon {
    font-size: 48rpx;
    color: #9ca3af;
}

.upload-label {
    font-size: 24rpx;
    color: #6b7280;
    text-align: center;
}

.image-preview {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    overflow: hidden;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-btn {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 32rpx;
    height: 32rpx;
    background-color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16rpx;
    z-index: 10;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.delete-icon {
    font-size: 16rpx;
    color: white;
}

.form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f3f4f6;
}

.form-item:last-child {
    border-bottom: none;
}

.form-item-left {
    display: flex;
    align-items: center;
}

.form-icon {
    margin-right: 16rpx;
    color: #9ca3af;
}

.form-label {
    font-size: 28rpx;
    color: #374151;
}

.form-item-right {
    display: flex;
    align-items: center;
}

.form-value {
    font-size: 28rpx;
    color: #9ca3af;
    margin-right: 16rpx;
}

.arrow-icon {
    color: #9ca3af;
}

.form-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 24rpx 0;
}

.unit {
    font-size: 28rpx;
    color: #9ca3af;
    margin-left: 16rpx;
}

.price-symbol {
    font-size: 32rpx;
    color: #f97316;
    font-weight: 600;
    margin-right: 8rpx;
}

.price-input {
    font-size: 32rpx;
    color: #f97316;
    font-weight: 600;
    text-align: right;
    border: none;
    outline: none;
    background: transparent;
    width: 160rpx;
}

.market-price-symbol {
    font-size: 28rpx;
    color: #9ca3af;
    margin-right: 8rpx;
}

.market-price-input {
    font-size: 28rpx;
    color: #9ca3af;
    text-align: right;
    border: none;
    outline: none;
    background: transparent;
    width: 160rpx;
}

.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f3f4f6;
    z-index: 100;
}

// NutUI组件样式覆盖
:deep(.nut-form-item) {
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1rpx solid #f3f4f6;
}

// :deep(.nut-form-item:last-child) {
//     border-bottom: none;
// }

:deep(.nut-form-item__body) {
    padding: 32rpx 0;
}

:deep(.nut-form-item__label) {
    font-size: 28rpx;
    color: #374151;
    margin-right: 32rpx;
}

:deep(.nut-input) {
    text-align: right;
}

:deep(.nut-input__input) {
    font-size: 28rpx;
    color: #374151;
    text-align: right;
}

:deep(.nut-textarea) {
    border: 1rpx solid #e5e7eb;
    border-radius: 16rpx;
    padding: 24rpx;
}

:deep(.nut-textarea__textarea) {
    font-size: 28rpx;
    color: #374151;
    line-height: 1.5;
}

:deep(.nut-uploader) {
    margin-bottom: 0;
}

:deep(.nut-uploader__preview) {
    margin-bottom: 0;
}

:deep(.nut-uploader__preview-img) {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    object-fit: cover;
}

:deep(.nut-uploader__upload) {
    width: 160rpx;
    height: 160rpx;
}

:deep(.nut-uploader__input) {
    width: 100%;
    height: 100%;
}

:deep(.nut-uploader__preview-delete) {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 32rpx;
    height: 32rpx;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20rpx;
}

:deep(.nut-picker__toolbar) {
    padding: 24rpx 32rpx;
}

:deep(.nut-picker__cancel) {
    color: #9ca3af;
}

:deep(.nut-picker__confirm) {
    color: #f97316;
}

:deep(.nut-picker__title) {
    font-size: 32rpx;
    font-weight: 600;
}
</style>