<template>
    <!-- 编码出库-->
    <view class="page-container">
        <!-- 表单信息区域 -->
        <scroll-view scroll-y style="height: 100vh">
            <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">{{ queryParams.leaseUnit }}</span>
                        </uni-forms-item>
                        <uni-forms-item label="领料工程：" name="leaseProject">
                            <span class="form-view">{{ queryParams.leaseProject }}</span>
                        </uni-forms-item>
                        <uni-forms-item label="物资类型：" name="maTypeName">
                            <span class="form-view">{{ queryParams.maTypeName }}</span>
                        </uni-forms-item>
                        <uni-forms-item label="规格型号：" name="typeName">
                            <span class="form-view">{{ queryParams.typeName }}</span>
                        </uni-forms-item>
                        <uni-forms-item label="预领数量：" name="preNum">
                            <span class="form-view">{{ queryParams.preNum }}</span>
                        </uni-forms-item>
                        <uni-forms-item label="待出库数量：" name="maxNum">
                            <span class="form-view">{{ maxNum }}</span>
                        </uni-forms-item>
                    </uni-forms>
                </view>
            </view>

            <view class="table-list-item">
                <uni-row :gutter="24" style="display: flex; align-items: center">
                    <uni-col :span="6">出库方式：</uni-col>
                    <uni-col :span="6">
                        <view class="coding-btn" @tap="onCodeIdentify">OCR识别</view>
                    </uni-col>
                    <uni-col :span="6">
                        <view class="coding-btn" @tap="scanStart">二维码出库</view>
                    </uni-col>
                    <uni-col :span="6">
                        <view class="coding-btn" @tap="boxScan">标准箱出库</view>
                    </uni-col>
                </uni-row>
            </view>
            <ScanQrCode
                ref="scanQrCodeRef"
                @scanSuccess="handleScanSuccess"
                @scanError="handleScanError"
            />
            <ScanQrCodeBox
                ref="scanQrCodeRefBox"
                @scanSuccessBox="handleScanSuccessBox"
                @scanErrorBox="handleScanErrorBox"
            />
            <view class="table-list-item">
                <uni-row :gutter="24" style="display: flex; align-items: center">
                    <uni-col :span="6">
                        <view> 设备编码 </view>
                    </uni-col>
                    <uni-col :span="12">
                        <view>
                            <uni-easyinput
                                v-model="queryCodeParams.maCode"
                                placeholder="请输入内容"
                            />
                        </view>
                    </uni-col>
                    <uni-col :span="6">
                        <view class="coding-btn search-btn" @tap="onCodeSearch">编码检索</view>
                    </uni-col>
                </uni-row>
            </view>
            <scroll-view
                scroll-y
                @scrolltolower="onScrollTolower"
                style="padding-bottom: 90rpx; height: 70vh"
            >
                <view class="table-list-item" v-for="item in codeDeviceList" :key="item.maId">
                    <uni-row :gutter="24">
                        <uni-col :span="8">物资类型：</uni-col>
                        <uni-col :span="12">
                            <view class="cont">{{ item.materialName }}</view>
                        </uni-col>
                        <uni-col :span="4">
                            <checkbox-group @change="onChangeChecked(item)">
                                <label>
                                    <checkbox
                                        color="#409eff"
                                        borderColor="#409eff"
                                        activeBorderColor="#409eff"
                                        :checked="item.checked"
                                        :disabled="
                                            (maxNum === isSelectNum && !item.checked) ||
                                            (isWithinOneMonth(item.nextCheckTime) && item.jiJuType == 2 && item.isCheck == '1')
                                        "
                                        style="transform: scale(0.7)"
                                    />
                                </label>
                            </checkbox-group>
                        </uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">规格型号：</uni-col>
                        <uni-col :span="14">
                            <view class="cont">{{ item.materialModel }}</view>
                        </uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">设备编码：</uni-col>
                        <uni-col :span="14">
                            <view class="cont">{{ item.maCode }}</view>
                        </uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">设备状态：</uni-col>
                        <uni-col :span="14">
                            <view class="cont">{{ item.statusName }}</view>
                        </uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">设备数量：</uni-col>
                        <uni-col :span="14">
                            <view class="cont">1</view>
                        </uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">本次检验时间：</uni-col>
                        <uni-col :span="14">
                            <view class="cont">{{ item.thisCheckTime || '暂无' }}</view>
                        </uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">下次检验时间：</uni-col>
                        <uni-col :span="14">
                            <view
                                class="cont"
                                :style="{
                                    color: isWithinOneMonth(item.nextCheckTime) ? 'red' : '',
                                }"
                                >{{ item.nextCheckTime || '暂无' }}</view
                            >
                        </uni-col>
                    </uni-row>
                </view>

                <view class="loading-text">
                    {{ finish ? '没有更多数据了~' : '正在加载...' }}
                </view>
            </scroll-view>
        </scroll-view>
        <view class="outbound-btn" @tap="onHandleOutbound"> 出库 </view>
    </view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {
    getCodeDetailAPI,
    getCodeDeviceListAPI,
    setOutboundNumAPI,
    getCodeScanAPI,
} from '@/services/picking/outbound.js'
import { getBoxBindByCode } from '@/services/standard.js'
import { debounce } from 'lodash-es'
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
import ScanQrCodeBox from '@/pages/devicesSearch/ScanQrCodeBox.vue'
// const query = defineProps() // 获取上级页面传递的路由参数
// const queryParams = JSON.parse(query.queryParams)
const loading = ref(false)
const scanQrCodeRef = ref(null)
const scanQrCodeRefBox = ref(null)
const queryParams = ref({})
const formData = ref({})
const codeDeviceList = ref([])
const maxNum = ref(0)
const total = ref(0)
const boxCode = ref('')
const boxInfo = ref({})
const checkedIds = ref([])
// 编码设备列表查询参数
const queryCodeParams = ref({
    pageNum: 1,
    pageSize: 10,
    typeId: '',
    maStatus: 1,
    maCode: '',
})
const qrCodeScan = ref('')
const codeData = ref({})

// 控制表单展开收起
const isExpanded = ref(false)

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

// 页面加载完毕
onLoad((options) => {
    queryParams.value = JSON.parse(options.queryParams)
    console.log('🚀 ~ queryParams.value:', queryParams.value)
    getCodeDetailData(queryParams.value.id, queryParams.value.publishTask, queryParams.value.typeId) //获取详情
})

onShow(() => {
    uni.$once('paramsReceived', (data) => {
        console.log('🚀 ~ onShow ~ data:', data)
        // 如果data.maId 不在 checkedIds 中 就往里面添加
        if (!checkedIds.value.some(item => item.maId === data.maId)) {
            checkedIds.value.push(data)
            getCodeDeviceListData()
        }
    })
    console.log(queryParams.value)
    // getCodeDetailData(queryParams.value.id, queryParams.value.publishTask, queryParams.value.typeId) //获取详情
})

const isWithinOneMonth = (dateStr) => {
    if (!dateStr) return false

    const inputDate = new Date(dateStr)
    const today = new Date()
    today.setHours(0, 0, 0, 0) // 清除时分秒

    const diffTime = inputDate.getTime() - today.getTime()
    const diffDays = diffTime / (1000 * 60 * 60 * 24)

    return diffDays <= 90
}

// 获取编码列表
const getCodeDetailData = async (id, publishTask, typeId) => {
    console.log('yyyyyyyyyy', id, publishTask, typeId)
    const res = await getCodeDetailAPI({ id: id, publishTask: publishTask, typeId: typeId })
    console.log('zzzzzzzzz', res)
    formData.value = res.data
    console.log('xxxxxxxxxxxxxx', formData.value, maxNum.value)
    maxNum.value = formData.value.preNum - formData.value.alNum

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

// 获取编码列表
const getCodeDeviceListData = async () => {
    const ids = checkedIds.value.map((item) => item.maId)
    const checkedIdSet = new Set(ids)
    const res = await getCodeDeviceListAPI(queryCodeParams.value)
    console.log('🚀 ~ getCodeDeviceListData ~ res:', res)
    const newRows = res.rows || []
    const map = new Map()

    // 先放入旧数据（保留滚动加载场景）
    codeDeviceList.value.forEach((item) => {
        map.set(item.maId, item)
    })

    // 再放入新数据，设置 checked 状态
    newRows.forEach((item) => {
        map.set(item.maId, {
            ...item,
            checked: checkedIdSet.has(item.maId),
        })
    })

    // 更新最终列表：已勾选的排在最前面
    const allItems = Array.from(map.values())
    codeDeviceList.value = [
        ...allItems.filter(item => item.checked), // 勾选的
        ...allItems.filter(item => !item.checked) // 未勾选的
    ]
    total.value = res.total || 0
}

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

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

// 判断数��是否加载完毕
const finish = computed(() => {
    if (total.value === codeDeviceList.value.length) return true
})

// 复选框事件
const onChangeChecked = (item) => {
    item.checked = !item.checked
    if (item.checked) {
        checkedIds.value.push(item)
    } else {
        checkedIds.value = checkedIds.value.filter((check) => check.maId !== item.maId)
    }
}

// 计算已选择数量
const isSelectNum = computed(() => {
    const isSelectList = codeDeviceList.value.filter((e) => e.checked === true)
    if (maxNum.value === isSelectList.length) {
        uni.showToast({
            title: '勾选设备已达到最大待出库数量！',
            icon: 'none',
        })
    }
    return isSelectList.length
})

// 出库按钮
const onHandleOutbound = async () => {
    const isSelect = checkedIds.value.length > 0
    if (!isSelect) {
        uni.showToast({
            title: '请勾选需要出库的设备',
            icon: 'none',
        })
        return
    }
    if (loading.value) {
        uni.showToast({
            title: '请勿重复提交!',
            icon: 'none',
        })
        return
    }
    uni.showLoading()
    loading.value = true
    // 解构所需要的数据
    const { typeId, parentId, publishTask } = queryParams.value
    // 组装出库参数
    const paramsList = []
    checkedIds.value.map((e) => {
        paramsList.push({
            leaseType: 0,
            maId: e.maId,
            maCode: e.maCode,
            manageType: 0,
            outNum: 1,
            parentId,
            typeId,
            publishTask,
            jiJuType: e.jiJuType,
            publishTask: queryParams.value.publishTask,
            leaseProject: queryParams.value.leaseProject,
            leaseProjectId: queryParams.value.leaseProjectId,
            leaseUnit: queryParams.value.leaseUnit,
            leaseUnitId: queryParams.value.leaseUnitId,
            taskId: queryParams.value.taskId,
        })
    })
    console.log('mmmmmmmmmmmmmmmm', paramsList)
    try {
        const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList })
        loading.value = false
        uni.hideLoading()
        if (res.code === 200) {
            uni.showToast({
                title: '出库成功！',
                icon: 'none',
            })
            // getCodeDetailData(
            //     queryParams.value.id,
            //     queryParams.value.publishTask,
            //     queryParams.value.typeId,
            // ) //获取详情
            uni.navigateBack()
        }
    } catch (error) {
        console.log('🚀 ~ onHandleOutbound ~ error:', error)
        loading.value = false
    }
}

// 标准箱识别
const boxScan = async () => {
    if (maxNum.value == 0) {
        uni.showToast({
            title: '待出库数量已为0！',
            icon: 'none',
        })
    } else {
        boxCode.value = ''
        // var mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
        // mpaasScanModule.mpaasScan(
        //     {
        //         // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        //         scanType: ['qrCode', 'barCode'],
        //         // 是否隐藏相册，默认false不隐藏
        //         hideAlbum: false,
        //         //ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
        //         language: 'en',
        //         //相册选择照片识别错误提示(ios)
        //         failedMsg: '未识别到二维码，请重试',
        //         //Android支持全屏需要设置此参数
        //         screenType: 'full',
        //     },
        //     (ret) => {
        //         if (ret.resp_code == 10) {
        //             uni.showToast({ title: '用户取消', icon: 'none' })
        //         }
        //         if (ret.resp_code == 11) {
        //             uni.showToast({ title: '扫码失败', icon: 'none' })
        //         }
        //         if (ret.resp_code == 1000) {
        //             boxCode.value = ret.resp_result
        //             if (boxCode.value == '') {
        //                 uni.showToast({ title: '扫码识别失败', icon: 'none' })
        //             } else {
        //                 boxOut()
        //             }
        //         }
        //     },
        // )
        if (scanQrCodeRefBox.value) {
            scanQrCodeRefBox.value.scanQrCode()
        }
    }
}

// 处理扫描成功事件
const handleScanSuccessBox = (result) => {
    boxCode.value = result?.data || ''
    if (boxCode.value === '') {
        uni.showToast({ title: '扫码识别失败', icon: 'none' })
    } else {
        boxOut()
    }
}

// 处理扫描失败事件
const handleScanErrorBox = (error) => {
    console.error('扫描出错:', error.message)
    uni.showToast({ title: error.message, icon: 'none' })
}

// 标准箱出库确认
const boxOut = async () => {
    console.log(queryParams)
    if (boxCode.value == '') {
        uni.showToast({ title: '扫码识别失败', icon: 'none' })
    } else {
        let param = {
            boxCode: boxCode.value,
            maTypeId: queryParams.value.typeId,
        }
        console.log(param)
        const res = await getBoxBindByCode(param)
        console.log(res)
        if (res.code == 200) {
            boxInfo.value = res.data
            if (boxInfo.value.recordList && boxInfo.value.recordList.length > 0) {
                if (boxInfo.value.recordList.length > maxNum.value) {
                    uni.showToast({ title: '标准箱绑定设备数量多于待出库数量！', icon: 'none' })
                } else {
                    uni.showModal({
                        title: '提示',
                        content: boxInfo.value.msg,
                        confirmText: '确定',
                        cancelText: '取消',
                        success: async (res) => {
                            if (res.confirm) {
                                boxOutBound()
                            }
                        },
                    })
                }
            } else {
                uni.showToast({ title: '标准箱未绑定设备！', icon: 'none' })
            }
        } else {
            uni.showToast({ title: '扫码识别失败', icon: 'none' })
        }
    }
}
// 标准箱出库确认
const boxOutBound = async () => {
    // 解构所需要的数据
    const { typeId, parentId, publishTask } = queryParams.value
    // 组装出库参数
    const paramsList = []
    boxInfo.value.recordList.map((e) => {
        paramsList.push({
            leaseType: 0,
            boxId: e.boxId,
            maId: e.maId,
            maCode: e.maCode,
            manageType: 0,
            outType: 3, // 出库方式 0数量，1编码，2二维码，3标准箱
            outNum: 1,
            parentId,
            typeId,
            publishTask,
        })
    })
    console.log(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,
        ) //获取详情
    }
}

// 编码识别按钮
const onCodeIdentify = () => {
    console.log('编码识别--')
    if (maxNum.value == 0) {
        uni.showToast({
            title: '待出库数量已为0！',
            icon: 'none',
        })
    } else {
        uni.navigateTo({
            url: `/pages/picking/outbound/codeOutScan?params=${JSON.stringify(
                queryParams.value,
            )}`,
        })
    }
}

// 扫码识别按钮
const scanStart = () => {
    // qrCodeScan.value = '202401-00006'
    // getMaInfoScan()
    if (maxNum.value == 0) {
        uni.showToast({
            title: '待出库数量已为0！',
            icon: 'none',
        })
    } else {
        // var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
        // mpaasScanModule.mpaasScan({
        // 	// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        // 	'scanType':  ['qrCode','barCode'],
        // 	// 是否隐藏相册，默认false不隐藏
        // 	'hideAlbum': false,
        // 	//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
        // 	'language' : 'en',
        // 	//相册选择照片识别错误提示(ios)
        // 	'failedMsg': '未识别到二维码，请重试',
        // 	//Android支持全屏需要设置此参数
        // 	'screenType': 'full'
        // },(ret) => {
        // 	if(ret.resp_code==10){
        // 		uni.showToast({ title: '用户取消', icon: 'none' })
        // 	}
        // 	if(ret.resp_code==11){
        // 		uni.showToast({ title: '扫码失败', icon: 'none' })
        // 	}
        // 	if(ret.resp_code==1000){
        // 		// uni.showToast({ title: '成功', icon: 'none' })
        //         console.log('444444444444444',ret)
        // 		qrCodeScan.value = ret.resp_result
        // 		if (qrCodeScan.value=="") {
        // 			uni.showToast({ title: '扫码识别失败', icon: 'none'})
        // 		}else{
        // 			getMaInfoScan()
        // 		}
        // 	}
        // })
        if (scanQrCodeRef.value) {
            scanQrCodeRef.value.scanQrCode()
        }
    }
}

// 处理扫描成功事件
const handleScanSuccess = (result) => {
    console.log('🚀 ~ handleScanSuccess ~ result:', result)
    qrCodeScan.value = result?.data?.split('?qrcode=')[1] || result?.data
    console.log('🚀 ~ handleScanSuccess ~ qrCodeScan.value:', qrCodeScan.value)
    if (qrCodeScan.value === '') {
        uni.showToast({ title: '扫码识别失败', icon: 'none' })
    } else {
        getMaInfoScan()
    }
}

// 处理扫描失败事件
const handleScanError = (error) => {
    console.error('扫描出错:', error.message)
    uni.showToast({ title: error.message, icon: 'none' })
}

//查看是否是该规格型号
const getMaInfoScan = async () => {
    let param = {
        qrCode: qrCodeScan.value,
    }
    const res = await getCodeScanAPI(param)
    console.log(res)
    if (res.code == 200) {
        if (res.data && res.data.recordList.length > 0) {
            if (res.data.recordList[0].typeModelName != queryParams.value.typeName) {
                uni.showModal({
                    title: '提示',
                    content: '当前扫描到的物资规格与当前任务规格不一致, 请仔细检查核对',
                    confirmText: '关闭',
                    confirmColor: '#FF0000',
                    showCancel: false,
                })
                return
            }
            codeData.value = res.data.recordList[0]
            // confirmCodeOutBound()
            uni.showModal({
                title: '确认出库',
                content: `物资类型：${res.data.recordList[0].typeName}\n规格型号：${res.data.recordList[0].typeModelName}\n设备编码：${res.data.recordList[0].maCode}`,
                confirmText: '确定',
                cancelText: '取消',
                success: async (res) => {
                    if (res.confirm) {
                        confirmCodeOutBound()
                    }
                },
            })
        } else {
            uni.showToast({ title: res.data.msg, icon: 'none' })
        }
    } else {
        uni.showToast({ title: res.data.msg, icon: 'none' })
    }
}
// 二维码出库确认
const confirmCodeOutBound = async () => {
    // 解构所需要的数据
    const { typeId, parentId, publishTask } = queryParams.value
    // 组装出库参数
    const paramsList = []
    paramsList.push({
        leaseType: 0,
        maId: codeData.value.maId,
        maCode: codeData.value.maCode,
        manageType: 0,
        // 出库方式 0数量，1编码，2二维码，3标准箱
        outType: 2,
        outNum: 1,
        parentId,
        typeId,
        typeName: codeData.value.typeName,
        typeModelName: codeData.value.typeModelName,
        publishTask,
    })
    const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList })
    console.log('333333333333', res)
    if (res.code === 200) {
        uni.showToast({
            title: '出库成功！',
            icon: 'none',
        })
        getCodeDetailData(
            queryParams.value.id,
            queryParams.value.publishTask,
            queryParams.value.typeId,
        ) //获取详情
        setTimeout(() => {
            scanStart()
        }, 800)
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 24rpx;

    .table-list-item {
        background: #fff;
        padding: 15rpx 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: #ff9800;
                border: 2rpx solid rgba(255, 152, 0, 0.5);
                background: linear-gradient(
                    to bottom,
                    rgba(255, 152, 0, 0.05),
                    rgba(255, 152, 0, 0.1)
                );
                box-shadow: none;
                font-weight: 600;
                letter-spacing: 1rpx;

                &:active {
                    background: rgba(255, 152, 0, 0.15);
                    border-color: rgba(255, 152, 0, 0.6);
                    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: 1000rpx; // 根据实际内容调整
        }

        :deep(.uni-forms) {
            padding: 0 32rpx 32rpx;
        }

        :deep(.uni-forms-item) {
            margin-bottom: 24rpx;
            display: flex;
            align-items: center;

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

            .uni-forms-item__label {
                color: #8c8c8c;
            }

            .form-view {
                color: #262626;
                font-size: 28rpx;
            }
        }
    }
}
</style>
