<template>
    <view class="feedback-page">
        <!-- 头部区域 -->
        <view class="header-section">
            <view class="header-bg">
                <image mode="aspectFill" class="bg-image" src="https://eshangtech.com/ShopICO/jianyi_bg.png"></image>
                <view class="header-overlay"></view>
            </view>
            <view class="header-content">
                <view class="header-title">高速公路服务区</view>
                <view class="header-subtitle">优质文明服务监督</view>
                <view class="header-subtitle" style="color:#2c3e50;font-size: 20rpx;margin-top: 16rpx;">
                    此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</view>
            </view>
        </view>

        <!-- 主要内容区域 -->
        <view class="main-content">
            <!-- 基本信息卡片 -->
            <view class="form-card">
                <view class="card-header">
                    <view class="card-title">基本信息</view>
                    <view class="card-icon">📝</view>
                </view>

                <view @click="handleGoMap">
                    <!-- <picker @change="bindServerPickerChange" :value="serverIndex" :range="serverRange" range-key="showName"> -->
                    <view class="form-item">
                        <view class="form-label">
                            <text class="label-icon">📍</text>
                            <text class="label-text">服务区</text>
                        </view>
                        <view class="form-input-wrapper">
                            <text class="form-value">{{ currentService.SERVERPART_NAME || '请选择服务区' }}</text>
                            <text class="arrow-icon">›</text>
                        </view>
                    </view>
                </view>
                <!-- </picker> -->

                <view v-if="detailSuggestion.SUGGESTION_ID">
                    <view class="form-item">
                        <view class="form-label">
                            <text class="label-icon">🏷️</text>
                            <text class="label-text">类型</text>
                        </view>
                        <view class="form-input-wrapper">
                            <text class="form-value">{{ pageMsg.typeName }}</text>
                            <text class="arrow-icon">›</text>
                        </view>
                    </view>
                </view>
                <picker v-else @change="bindTypePickerChange" :value="typeIndex" :range="typeRange" range-key="name">
                    <view class="form-item">
                        <view class="form-label">
                            <text class="label-icon">🏷️</text>
                            <text class="label-text">类型</text>
                        </view>
                        <view class="form-input-wrapper">
                            <text class="form-value">{{ pageMsg.typeName }}</text>
                            <text class="arrow-icon">›</text>
                        </view>
                    </view>
                </picker>

                <view class="form-item">
                    <view class="form-label">
                        <text class="label-icon">👤</text>
                        <text class="label-text">您的姓名</text>
                    </view>
                    <view class="form-input-wrapper">
                        <input type="text" class="form-input" maxlength="20" placeholder="请输入您的姓名" @input="bindKeyInput"
                            data-field="SuggestionName" :value="saveMsg.SuggestionName"
                            :disabled="detailSuggestion.SUGGESTION_ID" />
                    </view>
                </view>

                <view class="form-item">
                    <view class="form-label">
                        <text class="label-icon">📱</text>
                        <text class="label-text">联系方式</text>
                    </view>
                    <view class="form-input-wrapper">
                        <input type="number" class="form-input" maxlength="11" placeholder="请输入您的手机号"
                            @input="bindKeyInput" data-field="PhoneNumber" :value="saveMsg.PhoneNumber"
                            :disabled="detailSuggestion.SUGGESTION_ID" />
                    </view>
                </view>
            </view>

            <!-- 快速标签卡片 -->
            <view class="form-card" v-if="tagList.length > 0">
                <view class="card-header" style="margin-bottom: 24rpx;">
                    <view class="card-title">{{ typeIndex === '1' ? '表扬' : '投诉' }}类型</view>
                    <view class="card-icon">🏷️</view>
                </view>

                <view class="tag-section" v-for="(tags, i) in tagList" :key="i">
                    <view class="tag-category">{{ tags.FIELDENUM_NAME }}</view>
                    <view class="tag-list">
                        <view class="tag-item" v-for="(tag, s) in tags.fieldenumList" :key="s" @tap="selectTag(tag)"
                            :class="{ 'tag-active': tag.ischecked }">
                            {{ tag.FIELDENUM_NAME }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 详细描述卡片 -->
            <view class="form-card">
                <view class="card-header">
                    <view class="card-title">详细描述</view>
                    <view class="card-icon">✍️</view>
                </view>

                <view class="textarea-wrapper">
                    <textarea class="form-textarea" cols="30" rows="6" cursor-spacing="200"
                        placeholder="请详细描述您的问题，我们将及时跟进解决（添加图片将有助于我们解决您的问题）" v-model="saveMsg.Info"
                        :class="{ 'textarea-filled': saveMsg.Info }" :disabled="detailSuggestion.SUGGESTION_ID">
                    </textarea>
                </view>

                <!-- 图片上传区域 -->
                <view class="upload-section">
                    <view class="upload-title">上传图片 ({{ imgsList.length }}/9)</view>
                    <view class="upload-grid">
                        <view class="uploaded-image" v-for="(item, i) in imgsList" :key="i">
                            <image mode="aspectFill" :src='item' @click="seePhoto(item)"></image>
                            <view class="delete-btn" v-if="!detailSuggestion.SUGGESTION_ID" @click="deleteImg(i)">
                                <text class="delete-icon">×</text>
                            </view>
                        </view>
                        <view class="upload-btn" @click="choeseImg"
                            v-if="imgsList.length < 9 && !detailSuggestion.SUGGESTION_ID">
                            <view class="upload-icon">📷</view>
                            <text class="upload-text">添加图片</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section" v-if="!detailSuggestion.SUGGESTION_ID">
            <view class="submit-btn" :class="{ 'submit-active': noPost }" @click="checkFn">
                <text class="submit-text">提交反馈</text>
            </view>
        </view>

    </view>
</template>

<script>

import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            noPost: true,
            saveMsg: {
                action_type: 'Complaints',
                ProvinceCode: '',
                ServerPartID: '',
                Type: 2000,
                SuggestionName: '',
                Title: '',
                Info: '',
                PhoneNumber: '',
                WechatOpenId: '',

                imageArr: []
            },
            imgsList: [],
            pageMsg: {
                serverPartName: '',
                typeName: '投诉'
            },
            // msgType: [{ type: 2000, name: '投诉' }, { type: 4000, name: '咨询' }, { type: 1000, name: '建议' }],
            msgType: [{ type: 1000, name: '投诉' }, { type: 1050, name: '表扬' }],
            typeIndex: 0,
            serverIndex: 0,
            tagList: [], // 可选择的建议标签
            selectTags: [], // 已选中的建议标签
            currentService: {}, // 当前服务区信息
            detailSuggestion: {} // 当前投诉建议的详情内容
        }
    },
    computed: {
        ...mapGetters({ 'serverList': 'severList', 'user': 'user', 'serverPart': 'serverPart' }),
        typeRange() {
            return this.msgType
        },
        serverRange() {
            return this.serverList
        }
    },
    onLoad(option) {
        if ((this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID))) {
            let _this = this;
            uni.showModal({
                title: "温馨提示",
                content: "请您授权登录后再操作。",
                success(res) {
                    if (res.confirm) {
                        uni.navigateTo({ url: "/pages/register/index" });
                    } else if (res.cancel) {
                        uni.switchTab({
                            url: '/pages/index/index'
                        });
                    }
                },
            });
        }



        console.log('optionoptionoption', option);
        if (option.SUGGESTIONID) {
            this.detailSuggestion.SUGGESTION_ID = option.SUGGESTIONID
        }
        console.log('this.serverList', this.serverList)
        this.loadIndustry()
        this.getTag()

    },
    onShow() {
        let currentService = uni.getStorageSync("currentService");
        this.currentService = currentService
        this.saveMsg.ServerPartID = currentService.SERVERPART_ID

        this.pageMsg.serverPartName = currentService.SERVERPART_NAME
        this.saveMsg.ProvinceCode = this.user.PROVINCE_CODE

        console.log('this.currentServicethis.currentServicethis.currentService', this.currentService);

        // 设置默认的服务区索引
        const serverIndex = this.serverList.findIndex(item => item.ServerPart_Id === this.serverPart.ServerPart_Id)
        if (serverIndex !== -1) {
            this.serverIndex = serverIndex
        }

        // if (!(this.tagList && this.tagList.length > 0)) {
        //     this.getTag()
        // }
        this.saveMsg.PhoneNumber = this.user.MEMBERSHIP_MOBILEPHONE

    },
    onUnload() {
        this.saveMsg = {
            action_type: 'Complaints',
            ProvinceCode: '',
            ServerPartID: '',
            Type: 2000,
            SuggestionName: '',
            Title: '',
            Info: '',
            PhoneNumber: '',
            WechatOpenId: '',

            imageArr: []
        }
        this.noPost = true
        this.imgsList = []
    },
    methods: {
        // 拿到投诉建议的详情
        async handleGetComplaintsDetail() {
            const req = {
                action_type: 'GetSuggestionDetail',
                PROVINCECODE: this.user.PROVINCE_CODE,
                SUGGESTIONID: this.detailSuggestion.SUGGESTION_ID,
            }
            const data = await this.$api.getCoop(req)
            this.detailSuggestion = data.Data
            console.log('this.detailSuggestionthis.detailSuggestion', this.detailSuggestion);
            console.log('this.tagListthis.tagListthis.tagList', this.tagList);
            this.saveMsg = {
                ...this.saveMsg,
                Type: this.detailSuggestion.SUGGESTION_TYPE,
                SuggestionName: this.detailSuggestion.SUGGESTION_NAME,
                Info: this.detailSuggestion.SUGGESTION_REASON,
                PhoneNumber: this.detailSuggestion.PHONE_NUMBER,
            }
            this.currentService = {
                SERVERPART_ID: this.detailSuggestion.SERVERPART_ID,
                SERVERPART_NAME: this.detailSuggestion.SERVERPART_NAME,
            }
            this.imgsList = this.detailSuggestion.IMAGE_URL.split(',')

            let labelList = this.detailSuggestion.ENUM_LABEL.split(',')
            console.log('labelListlabelListlabelList', labelList);
            let list = JSON.parse(JSON.stringify(this.tagList))
            if (list && list.length > 0) {
                list.forEach((item) => {
                    if (item.fieldenumList && item.fieldenumList.length > 0) {
                        item.fieldenumList.forEach((subItem) => {
                            if (labelList.indexOf(subItem.FIELDENUM_VALUE) !== -1) {
                                subItem.ischecked = true
                            }
                        })
                    }
                })
            }
            this.tagList = list
        },
        // 跳转去服务区列表 选择服务区
        handleGoMap() {
            if (this.detailSuggestion.SUGGESTION_ID) {
                return
            }

            uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=complaints" });
        },
        bindServerPickerChange(event) {
            let index = event.detail.value
            this.serverIndex = index
            this.saveMsg.ProvinceCode = this.serverList[index].ProvinceCode
            this.saveMsg.ServerPartID = this.serverList[index].ServerPart_Id
            this.pageMsg.serverPartName = this.serverList[index].ServerPart_Name
        },
        bindTypePickerChange(event) {
            let index = event.detail.value
            console.log('indexindex', index);

            this.typeIndex = index
            this.saveMsg.Type = this.msgType[index].type
            this.pageMsg.typeName = this.msgType[index].name
        },
        choeseImg() {
            if (this.detailSuggestion.SUGGESTION_ID) {
                return
            }

            let _this = this
            let num = 9 - _this.imgsList.length
            if (num === 0) {
                uni.showToast({ title: '您最多可以上传9张图', icon: 'none' })
                return false
            }

            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success(rs) {
                    console.log('rs', rs)
                    _this.noPost = false
                    let tempFilePath = rs.tempFilePaths[0]

                    uni.getImageInfo({
                        src: tempFilePath,
                        success(imgInfo) {
                            let quality = 100
                            if (imgInfo.size > 1024 * 200) {
                                quality = 1024 * 200 / imgInfo.size * 100
                            }

                            if (quality < 100 && tempFilePath.indexOf('.jpg') > -1) {
                                uni.compressImage({
                                    src: tempFilePath,
                                    quality: quality,
                                    success(res) {
                                        uni.showLoading({
                                            title: '图片上传中...',
                                            mask: true
                                        })
                                        uni.uploadFile({
                                            url: 'https://mp.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
                                            filePath: res.tempFilePath,
                                            name: 'data',
                                            success(res) {
                                                let _data = JSON.parse(res.data)
                                                _this.imgsList.push(tempFilePath)
                                                _this.saveMsg.imageArr.push(_data.Data.IMAGE_PATH)
                                                uni.hideLoading()
                                                _this.noPost = true
                                            },
                                            fail(res) {
                                                console.log(res)
                                                _this.noPost = true
                                            }
                                        })
                                    },
                                    fail(error) {
                                        console.log(error)
                                        _this.noPost = true
                                    }
                                })
                            } else {
                                uni.showLoading({
                                    title: '图片上传中...',
                                    mask: true
                                })
                                uni.uploadFile({
                                    url: 'https://mp.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
                                    filePath: tempFilePath,
                                    name: 'data',
                                    success(res) {
                                        let _data = JSON.parse(res.data)
                                        _this.imgsList.push(tempFilePath)
                                        _this.saveMsg.imageArr.push(_data.Data.IMAGE_PATH)
                                        uni.hideLoading()
                                        _this.noPost = true
                                    },
                                    fail(res) {
                                        console.log(res)
                                        _this.noPost = true
                                    }
                                })
                            }
                        }
                    })
                }
            })
        },
        seePhoto(item) {
            let _this = this
            uni.previewImage({
                current: item,
                urls: _this.imgsList
            })
        },
        deleteImg(index) {
            let _this = this
            _this.saveMsg.imageArr.splice(index, 1)
            _this.imgsList.splice(index, 1)
        },
        bindKeyInput(event) {
            const field = event.target.dataset.field
            this.saveMsg[field] = event.detail.value
        },
        checkFn() {
            let _this = this
            let flag = 0

            for (let element in this.saveMsg) {
                if (_this.saveMsg[element] === '') {
                    let msg = ''
                    switch (element) {
                        case 'SuggestionName':
                            msg = '您的姓名'
                            break
                        case 'PhoneNumber':
                            msg = '联系电话'
                            break
                        case 'Info':
                            msg = '反馈内容'
                            break
                    }
                    if (msg !== '') {
                        uni.showToast({
                            title: '请输入' + msg,
                            icon: 'none'
                        })
                        flag += 1
                        return false
                    }
                }
            }
            if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(_this.saveMsg.PhoneNumber)) {
                uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                })
                return false
            }

            if (!(this.selectTags && this.selectTags.length > 0)) {
                uni.showToast({
                    title: '请选择具体类型',
                    icon: 'none'
                })
                return false
            }



            if (flag === 0) {
                this.postIt()
            }
        },
        postIt() {
            let _this = this
            let data = _this.saveMsg

            data.imageArr = data.imageArr.toString()

            data.WechatOpenId = this.user.WECHATAPP_OPENID
            data._enumLabel = this.selectTags.toString()
            delete data.__newReference
            uni.showLoading({
                title: '正在提交...',
                mask: true
            })
            console.log('datadatadatadata', data);

            const req = {
                action_type: 'Complaints',
                PROVINCECODE: data.ProvinceCode,
                SERVERPARTID: data.ServerPartID,
                TYPE: data.Type,
                SUGGESTIONNAME: data.SuggestionName,
                TITLE: data.Title,
                INFO: data.Info,
                PHONENUMBER: data.PhoneNumber,
                IMAGEARR: data.imageArr,
                _enumLabel: data._enumLabel,
                WECHATOPENID: this.user.WECHATAPP_OPENID,
            }

            console.log('reqreqreq', req);


            this.$api.getCoop(req).then(function (rs) {
                _this.$store.commit('refresh', true)
                uni.hideLoading()

                // eslint-disable-next-line eqeqeq
                if (rs.ResultCode == '100') {
                    uni.showToast({
                        title: '反馈成功！'
                    })
                    const pages = getCurrentPages();
                    console.log(pages);
                    if (pages && pages.length > 1) {
                        setTimeout(() => {
                            // _this.noPost = true
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 1000)
                    } else {
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/complaints/index'
                            });
                        }, 1000)
                    }

                } else {
                    uni.showToast({
                        title: rs.ResultDesc,
                        icon: 'none'
                    })
                }
            })
        },
        loadIndustry() { // 新增意见时，如果是内部会员则提供默认填写名字和电话
            if (this.user.MEMBERSHIP_MOBILEPHONE) {
                // this.saveMsg.SuggestionName = this.user.MEMBERSHIP_NAME
                this.saveMsg.PhoneNumber = this.user.MEMBERSHIP_MOBILEPHONE
            }
        },
        getTag() {
            let _this = this
            _this.$api.getCoop({
                action_type: 'GetEnumLable',
                fieldexplainField: 'BUSINESS_TARGET',
                fieldenumIndex: 4000
            }).then(res => {
                _this.tagList = res.Data.List

                if (_this.detailSuggestion.SUGGESTION_ID) {
                    _this.handleGetComplaintsDetail()
                }
            })
        },
        selectTag(tag) {
            if (this.detailSuggestion.SUGGESTION_ID) {
                return
            }

            let index = this.selectTags.indexOf(tag.FIELDENUM_VALUE)
            if (index !== -1) {
                this.selectTags.splice(index, 1)
            } else {
                this.selectTags.push(tag.FIELDENUM_VALUE)
            }

            tag.ischecked = tag.ischecked !== undefined ? !tag.ischecked : true

            console.log('tagListtagList', this.tagList);

            this.$forceUpdate()
        }
    },

}
</script>

<style lang="less" scoped>
.feedback-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
    position: relative;
}

/* 头部区域 */
.header-section {
    position: relative;
    height: 320rpx;
    overflow: hidden;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .bg-image {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(46, 125, 50, 0.85) 100%);
}

.header-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white;

    .header-title {
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 12rpx;
        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    }

    .header-subtitle {
        font-size: 28rpx;
        opacity: 0.9;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    }
}

/* 主要内容区域 */
.main-content {
    position: relative;
    z-index: 3;
    margin-top: -40rpx;
    padding: 0 24rpx 40rpx;
}

/* 卡片样式 */
.form-card {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 2rpx solid #f5f7fa;

    .card-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2c3e50;
    }

    .card-icon {
        font-size: 36rpx;
        opacity: 0.7;
    }
}

/* 表单项样式 */
.form-item {
    display: flex;
    align-items: center;
    padding: 28rpx 32rpx;
    border-bottom: 2rpx solid #f8f9fa;

    &:last-child {
        border-bottom: none;
    }

    &:active {
        background-color: #f8f9fa;
    }
}

.form-label {
    display: flex;
    align-items: center;
    min-width: 200rpx;

    .label-icon {
        font-size: 28rpx;
        margin-right: 16rpx;
    }

    .label-text {
        font-size: 24rpx;
        color: #34495e;
        font-weight: 500;
    }
}

.form-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.form-input {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 24rpx;
    color: #2c3e50;
    text-align: right;
    border: none;
    background: transparent;

    &::placeholder {
        color: #bdc3c7;
        font-size: 24rpx;
    }
}

.form-value {
    color: #2c3e50;
    font-size: 24rpx;
    margin-right: 16rpx;
}

.arrow-icon {
    color: #bdc3c7;
    font-size: 36rpx;
    font-weight: 300;
}

/* 标签区域 */
.tag-section {
    padding: 0 32rpx 24rpx;

    &:last-child {
        padding-bottom: 32rpx;
    }
}

.tag-category {
    font-size: 28rpx;
    color: #5d6d7e;
    margin-bottom: 20rpx;
    font-weight: 500;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.tag-item {
    padding: 16rpx 24rpx;
    background: #ecf0f1;
    color: #5d6d7e;
    border-radius: 40rpx;
    font-size: 24rpx;
    border: 2rpx solid transparent;

    &.tag-active {
        background: linear-gradient(135deg, #52C88A, #3B9F6B);
        color: #ffffff;
        border-color: #52C88A;
        box-shadow: 0 4rpx 12rpx rgba(82, 200, 138, 0.3);
    }
}

/* 文本域样式 */
.textarea-wrapper {
    padding: 24rpx 32rpx;
}

.form-textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 24rpx;
    border: 2rpx solid #ecf0f1;
    border-radius: 16rpx;
    font-size: 24rpx;
    color: #2c3e50;
    line-height: 1.6;
    background: #fafbfc;
    resize: vertical;
    box-sizing: border-box;

    &:focus {
        border-color: #52C88A;
        background: #ffffff;
        outline: none;
        box-shadow: 0 0 0 6rpx rgba(82, 200, 138, 0.1);
    }

    &::placeholder {
        color: #bdc3c7;
        font-size: 24rpx;
    }

    &.textarea-filled {
        background: #ffffff;
        border-color: #52C88A;
    }
}

/* 图片上传区域 */
.upload-section {
    padding: 24rpx 32rpx 32rpx;
}

.upload-title {
    font-size: 26rpx;
    color: #5d6d7e;
    margin-bottom: 20rpx;
    font-weight: 500;
}

.upload-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.uploaded-image {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

    image {
        width: 100%;
        height: 100%;
    }

    .delete-btn {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        width: 48rpx;
        height: 48rpx;
        background: #e74c3c;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);

        .delete-icon {
            color: white;
            font-size: 32rpx;
            font-weight: bold;
            line-height: 1;
        }
    }
}

.upload-btn {
    width: 160rpx;
    height: 160rpx;
    border: 4rpx dashed #bdc3c7;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafbfc;

    &:active {
        background: #ecf0f1;
        border-color: #95a5a6;
    }

    .upload-icon {
        font-size: 48rpx;
        margin-bottom: 8rpx;
        opacity: 0.6;
    }

    .upload-text {
        font-size: 22rpx;
        color: #7f8c8d;
    }
}

/* 提交按钮区域 */
.submit-section {
    padding: 40rpx 24rpx 60rpx;
    position: relative;
    z-index: 3;
}

.submit-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #bdc3c7, #95a5a6);
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(149, 165, 166, 0.3);

    &.submit-active {
        background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
        box-shadow: 0 8rpx 24rpx rgba(76, 204, 127, 0.4);

        &:active {
            transform: translateY(2rpx);
            box-shadow: 0 4rpx 16rpx rgba(76, 204, 127, 0.4);
        }
    }

    .submit-text {
        color: white;
        font-size: 32rpx;
        font-weight: 600;
    }
}


/* 响应式适配 */
@media (max-width: 320px) {
    .form-card {
        margin: 0 16rpx 24rpx;
    }

    .submit-section {
        padding-left: 16rpx;
        padding-right: 16rpx;
    }
}
</style>
