<template>
        <!-- 编码出库-->
    <view class="page-container">

        <text class="steps-title">领用申请详情</text>
        <!-- <uni-steps 
        :options="auditingList.map(item => ({ title: item.nodeName,desc: `${item.isAccept == 0 ? '待审批' : item.isAccept == 1 ? '已通过' : '已驳回'}${item.createTime ? ` ${item.createTime}` : ''}` ,
                status: 'finish',
               
                }))" style="margin-bottom: 5px;"
        :active="3"  >
        </uni-steps> -->
               <!-- 自定义横向步骤条 -->
               <view class="custom-steps horizontal">
            <view 
                v-for="(item, index) in auditingList" 
                :key="index" 
                class="step-item"
            >
                <!-- 步骤图标 -->
                <view 
                    class="step-icon" 
                    :class="{ 
                        'pending': item.isAccept === 0, 
                        'approved': item.isAccept === 1, 
                        'rejected': item.isAccept !== 0 && item.isAccept !== 1 
                    }"
                >
                    {{ index + 1 }}
                </view>
                <!-- 步骤连接线 -->
                <view 
                    v-if="index < auditingList.length - 1" 
                    class="step-line" 
                    :class="{ 
                        'approved': item.isAccept === 1, 
                        'rejected': item.isAccept !== 0 && item.isAccept !== 1 
                    }"
                ></view>
                <!-- 步骤标题和描述 -->
                <view class="step-content">
                    <text 
                        class="step-title" 
                        :class="{ 
                            'pending': item.isAccept === 0, 
                            'approved': item.isAccept === 1, 
                            'rejected': item.isAccept !== 0 && item.isAccept !== 1 
                        }"
                    >
                        {{ item.nodeName }}
                    </text>
                    <text 
                        class="step-desc"
                        :class="{ 
                            'pending': item.isAccept === 0, 
                            'approved': item.isAccept === 1, 
                            'rejected': item.isAccept !== 0 && item.isAccept !== 1 
                        }"
                    >
                        {{ item.isAccept == 0 ? '待审批' : item.isAccept == 1 ? '已通过' : '已驳回' }}
                        <br />
                        <text class="black-text">{{ item.auditBy ? item.auditBy : '' }}</text>
                        <br />
                        <!-- 显示创建时间，使用新的 CSS 类设置文字颜色为黑色 -->
                        <text class="black-text">{{ item.createTime ? item.createTime : '' }}</text>
                        <br />
                        <text class="black-text">{{ item.remark ? item.remark : '' }}</text>
                    </text>
                </view>
            </view>
        </view>

        <!-- 按钮区域 -->
    <view class="table-list-item" v-if="type==1 && auditStatus==0">
            <uni-row :gutter="24" style="display: flex; align-items: center" justify="center">
                <uni-col :span="8">
                    <view
                        class="coding-btn search-btn"
                        @tap="handleReview(1)"
                    >通过</view>
                </uni-col>
                <uni-col :span="8">
                    <view
                        class="coding-btn search-btnTwo"
                        @tap="handleReview(2)"
                    >驳回</view>
                </uni-col>
            </uni-row>
        </view>
        <!-- 表单信息区域 -->
    <scroll-view scroll-y style="height: 100vh;margin-top: 5px">
        <view class="form-section">
            <view class="section-header" @tap="toggleForm">
                <text class="title">基本信息</text>
                <text class="toggle-icon" :class="{ 'is-expanded': isExpanded }">›</text>
            </view>
            <view class="form-content" :class="{ 'is-expanded': isExpanded }">
                <uni-forms :model="formData" label-width="100" :border="true">
                    <uni-forms-item label="领料单位：" name="leaseUnit">
                        <span class="form-view">{{ formData.leaseUnit }}</span>
                    </uni-forms-item>
                    <uni-forms-item label="领料工程：" name="leaseProject">
                        <span class="form-view">{{ formData.leaseProject }}</span>
                    </uni-forms-item>
                    <uni-forms-item label="领料人：" name="leasePerson">
                        <span class="form-view">{{ formData.leasePerson }}</span>
                    </uni-forms-item>
                    <!-- <uni-forms-item label="采购申请编号：" name="applyCode">
                        <span class="form-view">{{ formData.applyCode }}</span>
                    </uni-forms-item> -->
                    <uni-forms-item label="标准配置：" name="leaseUnit">
                        <span class="form-view">{{ formData.leaseUnit }}</span>
                    </uni-forms-item>
                    <uni-forms-item label="联系电话：" name="phone">
                        <span class="form-view">{{ formData.phone }}</span>
                    </uni-forms-item>
                    <uni-forms-item label="类型规格：" name="maTypeNames">
                        <span class="form-view">{{ formData.maTypeNames }}</span>
                    </uni-forms-item>
                </uni-forms>
            </view>
        </view>


        <scroll-view scroll-y @scrolltolower="onScrollTolower" style="padding-bottom: 90rpx">
            <div style="width: 92%;height: auto;margin: 5px;">
                <uni-table stripe emptyText="暂无更多数据" >
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th width="60px" style="font-size: 24rpx;" align="center">序号</uni-th>
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">类型名称</uni-th>
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">规格型号</uni-th> 
                        <uni-th width="70px" style="font-size: 24rpx;" align="center">计量单位</uni-th>
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">预领数量</uni-th>
                        <uni-th width="60px" style="font-size: 24rpx;" align="center">备注</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="(item,index) in codeDeviceList" :key="item.id">
                        <uni-td style="font-size: 24rpx;text-align: center;">{{ index + 1 }}</uni-td>
                        <uni-td style="font-size: 24rpx;text-align: center;">{{item.maTypeName}}</uni-td>
						<uni-td style="font-size: 24rpx;text-align: center;">{{item.typeName}}</uni-td>
						<uni-td style="font-size: 24rpx;text-align: center;">{{item.unitName}}</uni-td>
						<uni-td style="font-size: 24rpx;text-align: center;">{{item.preNum}}</uni-td>
                        <uni-td style="font-size: 24rpx;text-align: center;">{{item.remark}}</uni-td>
                    </uni-tr>
                </uni-table>
            </div>
<!-- 
            <view class="loading-text">
                {{ finish ? '没有更多数据了~' : '正在加载...' }}
            </view> -->
        </scroll-view>
    </scroll-view>
    </view>
    
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onShow, } from '@dcloudio/uni-app'
import {  getCodeDeviceListAPI, setOutboundNumAPI,  } from '@/services/picking/outbound.js'
import { getAuditInfoAPI,receiveDetailAPI,submitAuditingApi,getNodeAuditStatusAPI } from '@/services/picking/review.js'
import { appLoginAPI, getUserInfoAPI, iwsLoginAPI,getConfigApi } from '@/services/index.js'
import { debounce } from 'lodash-es'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
// const query = defineProps() // 获取上级页面传递的路由参数
// const queryParams = JSON.parse(query.queryParams)
const queryParams = ref({
    id: '', //任务id
    nodeId: '', //节点id
})
const queryParamsInfo = ref({})
const formData = ref({})
const codeDeviceList = ref([])

const total = ref(0) 
const auditStatus = ref('')
// 编码设备列表查询参数
const queryCodeParams = ref({
    pageNum: 1,
    pageSize: 10,
    typeId: '',
    maStatus: 1,
    maCode: '',
})

const auditingParams = ref({
    nodeId: '', // 当前审核记录的id
    remark: '', // 审核意见
    typeId: '', // 当前审核记录中的 typeId
    taskId: '', // 外层列表的taskId
    isAccept: '', // 审批结果 1. 通过 2. 驳回
    recordId: '',
    nextNodeId: '', // 下个流程节点ID
    leaseId: '', // 外键id
    taskCode: '', // 任务编码
    unitName: '', // 单位名称
    projectName: '', // 项目名称
})

const auditingList = ref([]) //流程记录
// 控制表单展开收起
const isExpanded = ref(true)

// 切换表单展开状态
const toggleForm = () => {
    isExpanded.value = !isExpanded.value
}

const type = ref(1) 

const userId = ref(uni.getStorageSync('id') || '')
const origin = window.location.href

onLoad(async(options) => {
    getConfig()
    if (origin.indexOf('params') != -1) {
        queryParams.value = JSON.parse(options.params)
        auditingParams.value.taskId = queryParams.value.taskId
        type.value = queryParams.value.type
        // 直接执行后续操作
        initPageData();
    } else { //工单跳转
        const urlParams = new URLSearchParams(origin);
        queryParams.value.taskId = urlParams.get('taskId'); 
        queryParams.value.id = urlParams.get('id');
        auditingParams.value.taskId = urlParams.get('taskId')
        const ticketMatch = origin.match(/ticket=([^&]*)/);
        const ticket = ticketMatch ? ticketMatch[1] : '';
        
        try {
            const { data: result } = await iwsLoginAPI({
                ticket: ticket,
                sysType: 1,
            })
            // 1. 获取token并存储
            await memberStore.setToken(result.access_token)
            // 2. 获取用户信息并存储
            const res = await getUserInfoAPI()
            memberStore.setUserInfo(res.user)
            
            uni.setStorageSync('id', res.user.userId)
            userId.value = res.user.userId
            uni.setStorageSync('deptName', res.user?.dept?.deptName)
            uni.setStorageSync('urlPermissions', res.urlPermissions ? res.urlPermissions : [])
            
            // 登录完成后执行后续操作
            initPageData();
        } catch (error) {
            console.error('登录失败:', error)
            uni.showToast({ title: '登录失败，请重试', icon: 'none' })
        }
    }
})
const initPageData = () => {
    console.log(queryParams.value)
    getReviewInfo(queryParams.value.id) 
    fetchAuditInfo()
    //获取当前人节点状态
    getNodeAuditStatus()
}

const getConfig = async () => {
    try {
        const res = await getConfigApi()
        uni.setStorageSync('systemConfig', res.data)
    } catch (error) {
        console.log('🚀 ~ getConfig ~ error:', error)
    }
}

// 移除onShow中的重复逻辑，或保留作为刷新时的处理
onShow(() => {
    // 可以留空或处理页面重新显示时的逻辑
})
// onShow(() => {
// 	console.log(queryParams.value)
// 	// getCodeDetailData(queryParams.value.id,queryParams.value.publishTask,queryParams.value.typeId)//获取详情 
//     getReviewInfo(queryParams.value.id) 
//     fetchAuditInfo()
// })  
// 获取详情列表
const getReviewInfo = async (id) => {
    console.log("yyyyyyyyyy",id)
    const res = await receiveDetailAPI(id)
    console.log("zzzzzzzzz",res)
	formData.value=res.data.leaseApplyInfo;

  
	// queryCodeParams.value.typeId = queryParams.value.typeId;
	// queryCodeParams.value.pageNum = 1;
	codeDeviceList.value = res.data.leaseApplyDetailsList;
	// getCodeDeviceListData()//获取编码列表
}

const fetchAuditInfo = async () => {
    try {
        console.log('xxxxxxxxxxxxxx',queryParams.value.id)
        // 调用导入的 API 函数
        const res = await getAuditInfoAPI({taskId:queryParams.value.taskId})
        console.log('🚀 ~ fetchAuditInfo ~ res:', res)
        auditingList.value = res.rows

        console.log('🚀 ~ fetchAuditInfo ~ auditingList:', auditingList.value)
    } catch (error) {
        // 打印错误信息
        console.log('🚀 ~ fetchAuditInfo ~ error:', error)
    }
}

const getNodeAuditStatus = async () => {
 try {
        // 调用导入的 API 函数
        const res = await getNodeAuditStatusAPI({taskId:queryParams.value.taskId,taskTypeId:19})
        console.log('🚀 ~ getNodeAuditStatus ~ res:', res)
        if(res.data){
            auditStatus.value = res.data.auditStatus
        }else{
            auditStatus.value = ''
        }
    } catch (error) {
        // 打印错误信息
        console.log('🚀 ~ getNodeAuditStatus ~ error:', error)
    }
}


// 获取列表
const getCodeDeviceListData = async () => {
    const res = await getCodeDeviceListAPI(queryCodeParams.value)  
    codeDeviceList.value.push(...res.rows) 
    if (codeDeviceList.value.length > 0) {
        codeDeviceList.value = codeDeviceList.value.map((e) => {
            return { ...e, checked: false }
        })
    }
    total.value = res.total
}


// // 编码搜索按钮
// const onCodeSearch = () => {
//     queryCodeParams.value.pageNum = 1
//     codeDeviceList.value = []
//     getCodeDeviceListData()
// }

// 处理审核操作
const handleReview = (action) => {
    uni.showModal({
        title: action == 1 ? '通过' : '驳回',
        placeholderText: '请输入审核意见',
        editable: true,
        confirmText: '确认',
        cancelText: '取消',
        success: async (res) => {
            if (res.confirm) {
                const comment = res.content;
                // 组装参数
                const userAuthorizedNodes = auditingList.value.filter(e => e.configValues.includes(userId.value))
                if(userAuthorizedNodes.length === 0){
                    uni.showToast({
                        title: '未查询到您的审核权限！',
                        icon: 'none',
                    })
                }
                let currentAuditing = userAuthorizedNodes.find(node => node.isAccept === 0) // 获取当前审核的节点
                // 如果没有待审核的节点，则使用第一个有权限的节点
                if (!currentAuditing) {
                    currentAuditing = userAuthorizedNodes[0]
                }
                auditingParams.value.remark = comment
                const { recordId, id, typeId } = currentAuditing
                Object.assign(auditingParams.value, {
                typeId,
                recordId,
                nodeId: id
                 })
                auditingParams.value.isAccept = action
                auditingParams.value.leaseId = formData.value.id

                auditingParams.value.taskCode = formData.value.code

                auditingParams.value.unitName = formData.value.leaseUnit

                auditingParams.value.projectName = formData.value.leaseProject

                const currentIndex = auditingList.value.findIndex(e => e.id === id) // 获取当前的索引

                if (currentIndex !== auditingList.value.length - 1) {
                    auditingParams.value.nextNodeId =auditingList.value[currentIndex + 1].id
                }

                uni.showLoading({ title: '提交中...', mask: true })
                const submitRes  = await submitAuditingApi(auditingParams.value) 
                console.log("zrrrrrrrrrrrrrrrrrr",submitRes)
                if (submitRes.code === 200) {
                    uni.showToast({
                        title: '审核成功',
                        icon: 'none',
                    }) 
                     uni.hideLoading()
                    initPageData();
                    // uni.navigateBack(); // 调接口成功后返回上一层页面
                }
            } else if (res.cancel) {
                 uni.hideLoading()
                console.log('用户取消操作');
            }
        }
    });
};

// 滚动触底事件
const onScrollTolower = debounce(() => {
    // console.log('滚动触底--')
    if (total.value > codeDeviceList.value.length) {
        queryCodeParams.value.pageSize += 5
        getCodeDeviceListData()
    }
}, 500)



// 出库按钮
const onHandleOutbound = async () => {
    const isSelect = codeDeviceList.value.some((e) => e.checked === true) 
    if (!isSelect) {
        uni.showToast({
            title: '请勾选需要出库的设备',
            icon: 'none',
        })
        return
    } 
    // 解构所需要的数据
    const { typeId, parentId,publishTask } = queryParams.value
    // 组装出库参数
    const paramsList = []
    codeDeviceList.value.map((e) => {
        if (e.checked) {
            paramsList.push({
                leaseType: 0,
                maId: e.maId,
				maCode: e.maCode,
                manageType: 0,
                outNum: 1,
                parentId,
                typeId,
                publishTask,
            })
   
        }
    })
    console.log("mmmmmmmmmmmmmmmm",paramsList)
    const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList }) 
    if (res.code === 200) {
        uni.showToast({
            title: '出库成功！',
            icon: 'none',
        })
	   getCodeDetailData(queryParams.value.id,queryParams.value.publishTask,queryParams.value.typeId)//获取详情  
    }
}




</script>

<style lang="scss" scoped>

.black-text {
    color: #000;
}
.custom-steps {
    margin-bottom: 5px;
}

.custom-steps.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.step-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    z-index: 1;
}

.step-icon.pending {
    background-color: #19a4a0;
}

.step-icon.approved {
    background-color: #19a4a0;
}

.step-icon.rejected {
    background-color: #19a4a0;
}

.step-line {
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #19a4a0;
}

.step-line.approved {
    background-color: #19a4a0;
}

.step-line.rejected {
    background-color: #19a4a0;
}

.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
}

.step-title {
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 3px;
    text-align: center;
}

.step-title.pending {
    color: #19a4a0;
}

.step-title.approved {
    color: #19a4a0;
}

.step-title.rejected {
    color: #19a4a0;
}

.step-desc {
    font-size: 10px;
    text-align: center;
    color: #8c8c8c; // 默认颜色
}

.step-desc.pending {
    font-size: 10px;
    color: #409EFF; // 待审批黄色
}

.step-desc.approved {
    font-size: 10px;
    color: #13ce66; // 已通过绿色
}

.step-desc.rejected {
    font-size: 10px;
    color: #ff4d4f; // 已驳回红色
}
.page-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 24rpx;
    padding-top: 44px; 
    :deep(.uni-steps-item-title.accepted-title) {
        color: red !important;
    }

    :deep(.uni-steps-item-title.rejected-title) {
        color: green !important;
    }
    // :deep(.uni-steps-item) {
    // // 这里根据实际组件的高亮样式类名进行调整
    // // 假设高亮类名为 .uni-steps-item-active
    // &::after {
    //     // 步骤连接线高亮
    //     background-color: #52c41a !important; 
    // }
    // .uni-steps-item-icon {
    //     // 步骤图标高亮
    //     background-color: #52c41a !important; 
    //     border-color: #52c41a !important;
    // }
    // .uni-steps-item-title {
    //     // 步骤标题高亮
    //     color: #52c41a !important; 
    // }
    // .uni-steps-item-description {
    //     // 步骤描述高亮
    //     color: #52c41a !important; 
    //     }
    // }
    .steps-title {
        display: block;
        text-align: center; // 文本居中
        color: #19a4a0; // 绿色文本
        font-size: 32rpx; // 字体大小，可按需调整
        margin-bottom: 20rpx; // 标题与步骤条的间距，可按需调整
    }
    .table-list-item {
        background: #fff;
        padding: 32rpx;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 24rpx;

        // 表单样式
        :deep(.uni-forms) {
            .uni-forms-item {
                margin-bottom: 24rpx;
                padding: 0;

                &:last-child {
                    margin-bottom: 0;
                }

                .uni-forms-item__label {
                    color: #8c8c8c;
                    font-size: 28rpx;
                    font-weight: 500;
                    padding: 0;
                    line-height: 1.8;
                }

                .uni-forms-item__content {
                    display: flex;
                    align-items: center;
                    min-height: unset;
                }
            }
        }

        // 编码按钮组
        .coding-btn {
            padding: 16rpx 0;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            border-radius: 12rpx;
            text-align: center;
            color: #fff;
            font-size: 28rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            // 编码检索按钮特殊样式
            &.search-btn {
                padding: 12rpx 0;
                background: #fff;
                color: #fff;
                border: 2rpx solid rgba(255, 152, 0, 0.5);
                background: linear-gradient(to bottom, rgba(23, 237, 3, 0.957), rgba(23, 237, 3, 0.957));
                box-shadow: none;
                font-weight: 600;
                letter-spacing: 1rpx;

                &:active {
                    background: rgba(23, 237, 3, 0.957);
                    border-color: rgba(23, 237, 3, 0.957);
                    transform: translateY(1rpx);
                }
            }
            &.search-btnTwo {
                padding: 12rpx 0;
                background: #fff;
                color: #fff;
                border: 2rpx solid rgba(255, 152, 0, 0.5);
                background: linear-gradient(to bottom, rgba(255, 8, 0, 0.911), rgba(255, 8, 0, 0.911));
                box-shadow: none;
                font-weight: 600;
                letter-spacing: 1rpx;

                &:active {
                    background: rgba(255, 8, 0, 0.911);
                    border-color: rgba(255, 8, 0, 0.911);
                    transform: translateY(1rpx);
                }
            }
        }

        // 编码列表样式
        :deep(.uni-row) {
            // margin-bottom: 20rpx;
            
            &:last-child {
                margin-bottom: 0;
            }

            .uni-col-6 {
                color: #8c8c8c;
                font-size: 28rpx;
                font-weight: 500;
            }

            .cont {
                color: #262626;
                font-size: 28rpx;
                font-weight: 500;
                line-height: 1.8;
            }
        }

        // 输入框样式
        :deep(.uni-easyinput__content) {
            background-color: #f7f8fa;
            border: 2rpx solid #e8e8e8;
            border-radius: 12rpx;
            height: 75rpx;
            transition: all 0.3s ease;

            &:focus-within {
                border-color: #3784fb;
                box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
            }

            .uni-easyinput__content-input {
                font-size: 28rpx;
                color: #262626;
            }
        }

        // 复选框样式
        :deep(checkbox) {
            .wx-checkbox-input {
                width: 36rpx;
                height: 36rpx;
                border-radius: 8rpx;
                border: 2rpx solid #e8e8e8;
                background: transparent;

                &.wx-checkbox-input-checked {
                    background: #3784fb;
                    border-color: #3784fb;

                    &::before {
                        font-size: 28rpx;
                        color: #fff;
                    }
                }

                &.wx-checkbox-input-disabled {
                    background: #f5f5f5;
                    border-color: #e8e8e8;
                }
            }
        }
    }

    // 底部出库按钮
    .outbound-btn {
        position: fixed;
        bottom: 40rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 88rpx;
        background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        border-radius: 12rpx;
        font-size: 32rpx;
        font-weight: 600;
        box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
        transition: all 0.3s ease;

        &:active {
            transform: translateX(-50%) scale(0.98);
            opacity: 0.9;
        }
    }
}

// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 26rpx;
    color: #8c8c8c;
    padding: 32rpx 0;
    letter-spacing: 1rpx;
}

.form-section {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

    // 头部样式
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 32rpx;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
            background: #f7f8fa;
        }

        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #262626;
        }

        .toggle-icon {
            font-size: 40rpx;
            color: #8c8c8c;
            transform: rotate(90deg);
            transition: transform 0.3s ease;
            display: inline-block;

            &.is-expanded {
                transform: rotate(-90deg);
            }
        }
    }

    // 表单内容区域
    .form-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;

        &.is-expanded {
            max-height: 800rpx;  /* 高度可进一步减小 */
        }

        :deep(.uni-forms) {
            padding: 0 20rpx 0rpx;  /* 减少底部内边距 */
        }

        :deep(.uni-forms-item) {
            margin-bottom: 0rpx !important;  /* 关键：行间距缩小 */
            padding: 0rpx 0 !important;       /* 减少项内边距 */

            .uni-forms-item__label {
            color: #8c8c8c;
            padding-bottom: 0rpx !important;  /* 标签与内容间距 */
            line-height: 2.8; // 保持原有的行高
            }

            .form-view {
            color: #262626;
            font-size: 28rpx;
            line-height: 2.8 !important;  /* 减小文本行高 */
            }
        }
    }
}
</style>
