<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>
                <nut-uploader
                    v-model:file-list="fileList"
                    :maximum="4"
                    :multiple="true"
                    :preview-type="'picture'"
                    @oversize="onOversize"
                    @delete="onDelete"
                >
                    <nut-button type="success" size="small">
                        <template #icon>
                            <Plus />
                        </template>
                        上传文件
                    </nut-button>
                </nut-uploader>
                <view class="upload-tips">
                    <text class="tip-item">正面照</text>
                    <text class="tip-item">左侧照</text>
                    <text class="tip-item">右侧照</text>
                    <text class="tip-item">其他</text>
                </view>
            </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="车型品牌"
                        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="车辆型号" 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="车辆出厂年份" 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="新旧程度"
                        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="电池损耗度" 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="刹车磨损度" 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="轮胎磨损度" 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 } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'

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

// 文件上传列表
const fileList = ref([])

// 表单数据
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'
    })
}

/**
 * 文件上传超出限制
 */
const onOversize = () => {
    Taro.showToast({
        title: '文件大小超出限制',
        icon: 'none'
    })
}

/**
 * 删除上传的文件
 */
const onDelete = () => {
    // 删除逻辑已由组件内部处理
}

/**
 * 显示学校选择器
 */
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: '发布中...' })

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

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

/**
 * 表单验证
 * @returns {boolean} 验证结果
 */
const validateForm = () => {
    if (fileList.value.length === 0) {
        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;
}

.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-tips {
    display: flex;
    margin-top: 16rpx;
    gap: 32rpx;
}

.tip-item {
    font-size: 24rpx;
    color: #9ca3af;
}

.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: 16rpx;
}

:deep(.nut-uploader__preview) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;
    margin-bottom: 24rpx;
}

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

: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>