<!-- 出入证申请 -->
<template>
    <view class="MainBox">
        <view class="FormBox">
            <view class="FormItem">
                <view class="FormLableBox">项目名称</view>
                <view class="FormValueBox">
                    <u-input v-model="allData.BasicsInfo.ProjectName" placeholder="请输入项目名称" readonly></u-input>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox">作业地点</view>
                <view class="FormValueBox">
                    <u-input v-model="allData.BasicsInfo.SpecificAddress" placeholder="请输入作业地点" readonly></u-input>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox">作业班成员</view>
                <view class="FormValueBox">
                    <view class="MemberBox">
                        <u-tag v-for="(member, index) in memberList" :key="member.id" shape="circle">
                            {{ member.name }}
                        </u-tag>
                        <view v-if="!memberList || memberList.length === 0" class="empty-tip">暂无作业班成员</view>
                    </view>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox mustBox">出入证有效日期</view>
                <view class="FormValueBox">
                    <view class="date-range-box">
                        <view class="date-item">
                            <u-input v-model="startValidTimeText" placeholder="开始日期" readonly>
                                <template #suffix>
                                    <u-button type="primary" size="small"
                                        @click="showStartValidTimePicker = true">选择日期</u-button>
                                </template>
                            </u-input>
                            <up-datetime-picker :show="showStartValidTimePicker" v-model="startValidTime" mode="date"
                                :minDate="minTimestamp" @confirm="HandleStartValidTimeConfirm"
                                @cancel="showStartValidTimePicker = false" format="YYYY-MM-DD"></up-datetime-picker>
                        </view>
                        <view class="date-separator">至</view>
                        <view class="date-item">
                            <u-input v-model="endValidTimeText" placeholder="结束日期" readonly>
                                <template #suffix>
                                    <u-button type="primary" size="small"
                                        @click="showEndValidTimePicker = true">选择日期</u-button>
                                </template>
                            </u-input>
                            <up-datetime-picker :show="showEndValidTimePicker" v-model="endValidTime" mode="date"
                                :minDate="endValidTimeMinTimestamp" @confirm="HandleEndValidTimeConfirm"
                                @cancel="showEndValidTimePicker = false" format="YYYY-MM-DD"></up-datetime-picker>
                        </view>
                    </view>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox FlexBox">
                    <view class="mustBox">随行车辆信息</view>
                    <view class="addBtn" @click="showCarInputPopup = true">添加</view>
                </view>
                <view class="FormValueBox">
                    <view class="CarListBox">
                        <view v-for="item in formData.CarList" :key="item.id" class="CarItem">
                            <view class="CarInfoBox">
                                <view class="CarTitleBox">{{ item.code }}</view>
                                <view class="CartypeBox">{{ item.type }}</view>
                            </view>
                            <view>
                                <u-button text="删除" type="primary" size="small"
                                    @click="HandleDeleteCar(item.id)"></u-button>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 车辆信息输入弹窗 -->
                <u-popup :show="showCarInputPopup" mode="center" :round="10" @close="showCarInputPopup = false">
                    <view class="car-input-popup">
                        <view class="popup-title">添加车辆信息</view>
                        <view class="popup-form">
                            <view class="form-item">
                                <view class="form-label">车辆类型</view>
                                <u-input v-model="carInputForm.type" placeholder="请输入车辆类型" :maxlength="50"></u-input>
                            </view>
                            <view class="form-item">
                                <view class="form-label">车牌号</view>
                                <u-input v-model="carInputForm.code" placeholder="请输入车牌号" :maxlength="20"></u-input>
                            </view>
                        </view>
                        <view class="popup-buttons">
                            <u-button text="取消" type="info" @click="showCarInputPopup = false"></u-button>
                            <u-button text="确定" type="primary" @click="HandleCarInputConfirm"></u-button>
                        </view>
                    </view>
                </u-popup>
            </view>
            <view class="FormItem">
                <view class="FormLableBox">附件上传</view>
                <view class="FormValueBox">
                    <up-upload width="100%" @afterRead="afterRead" multiple accept="image/*,application/pdf">
                        <view class="UploadBox">
                            <view class="UpIcon">
                                <img src="@/static/icon/upload-icon.png" alt="">
                            </view>
                            <view class="UpTitle">点击上传</view>
                            <view class="UpDesc">支持JPG,PNG,PDF格式上传，单个文件大小不超过10MB</view>
                        </view>
                    </up-upload>
                </view>
                <view class="UpFileListBox">
                    <view v-for="item in fileList1" :key="item.fid || item.url" class="UpFileItem">
                        <view>
                            <view class="UpFileName">{{ item.name }}</view>
                            <view class="UpFileSize">{{ item.size }}</view>
                            <view v-if="item.uploading" class="UpFileStatus">上传中...</view>
                        </view>

                        <u-button text="删除" type="primary" size="small" :disabled="item.uploading"
                            @click="deletePic(item.fid)">
                        </u-button>
                    </view>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox">备注</view>
                <view class="FormValueBox">
                    <u-input v-model="formData.remark" type="textarea" :maxlength="500" placeholder="请输入备注信息"
                        :autoHeight="true"></u-input>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { generateGuid } from '@/utils/index.js';
import dayjs from "dayjs";
import { ref, computed, onMounted, watch, defineExpose } from "vue";
import { uploadFileApi } from '@/api/modules/workTicket';

const props = defineProps({
    allData: {
        type: Object,
        default: () => { },
    }
})

const showStartValidTimePicker = ref(false); // 出入证开始有效日期选择器是否显示
const showEndValidTimePicker = ref(false); // 出入证结束有效日期选择器是否显示
const startValidTime = ref(null); // 开始有效日期时间戳
const endValidTime = ref(null); // 结束有效日期时间戳
const startValidTimeText = ref(''); // 开始有效日期显示文本
const endValidTimeText = ref(''); // 结束有效日期显示文本
const minTimestamp = ref(dayjs('2020-01-01').valueOf()); // 最小可选日期时间戳
const showCarInputPopup = ref(false); // 车辆信息输入弹窗是否显示

// 结束有效日期的最小时间戳（不能小于开始日期）
const endValidTimeMinTimestamp = computed(() => {
    if (startValidTime.value) {
        return startValidTime.value;
    }
    return minTimestamp.value;
});

// 车辆信息输入表单
const carInputForm = ref({
    type: '', // 车辆类型
    code: '', // 车牌号
});

// 组件数据
const formData = ref({
    validTime: '', // 出入证有效日期（格式：YYYY-MM-DD 或 YYYY-MM-DD 至 YYYY-MM-DD）
    CarList: [], // 随行车辆数组
    remark: '', // 备注
})

const fileList1 = ref([]); // 上传的文件列表

// 从基础信息中获取作业班成员列表
const memberList = computed(() => {
    return props.allData?.BasicsInfo?.MemberList || [];
});

// 处理上传文件事件
const afterRead = async (e) => {
    console.log('上传的文件：', e);
    let fileInfo = e.file[0];
    // 判断文件大小
    if (fileInfo.size > 10 * 1024 * 1024) {
        uni.showToast({
            title: '文件大小不能超过10MB',
            icon: 'none'
        });
        return;
    }
    // 判断文件类型
    if (!fileInfo.name.match(/\.(jpg|png|pdf)$/i)) {
        uni.showToast({
            title: '请上传JPG,PNG,PDF格式的文件',
            icon: 'none'
        });
        return;
    }

    // 生成临时文件ID，用于标识上传中的文件
    const tempFid = generateGuid();
    const tempFile = {
        fid: tempFid,
        name: fileInfo.name,
        size: (fileInfo.size / 1024 / 1024).toFixed(2) + 'MB',
        url: fileInfo.url,
        uploading: true // 标记为上传中
    };

    // 先添加到列表，显示上传状态
    fileList1.value.push(tempFile);

    try {
        // 调用上传接口
        const uploadResult = await uploadFileApi(
            fileInfo.url, // 文件路径
            'file', // 文件字段名
            {}, // 额外的表单数据
            { loading: true, loadingText: '上传中...' }
        );

        // 上传成功，更新文件信息
        // 接口返回的数据结构: { name: "文件名", url: "文件URL" }
        const serverUrl = uploadResult?.url || fileInfo.url;
        const serverFileName = uploadResult?.name || fileInfo.name;
        // 使用服务器返回的文件名作为唯一标识，如果没有则使用临时ID
        const fileId = uploadResult?.name || tempFid;

        // 更新文件列表中的对应项
        const fileIndex = fileList1.value.findIndex(item => item.fid === tempFid);
        if (fileIndex !== -1) {
            fileList1.value[fileIndex] = {
                fid: fileId,
                name: serverFileName, // 使用服务器返回的文件名
                size: (fileInfo.size / 1024 / 1024).toFixed(2) + 'MB',
                url: serverUrl, // 使用服务器返回的URL
                uploading: false
            };
        }

        uni.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 1500
        });
    } catch (error) {
        console.error('文件上传失败：', error);
        // 上传失败，从列表中移除
        fileList1.value = fileList1.value.filter(item => item.fid !== tempFid);
        uni.showToast({
            title: '上传失败，请重试',
            icon: 'none',
            duration: 2000
        });
    }
}

// 删除上传的文件
const deletePic = (fid) => {
    console.log('删除文件：', fid);
    let arr = [...fileList1.value];
    arr = arr.filter(item => item.fid !== fid);
    fileList1.value = arr;
}

// 从 allData 中恢复之前填写的数据
const restoreFormData = (data) => {
    if (!data || Object.keys(data).length === 0) return;

    if (data.validTime) {
        formData.value.validTime = data.validTime;
        // 解析有效日期，恢复开始和结束日期
        const timeStr = data.validTime.trim();
        if (timeStr.includes('至')) {
            const parts = timeStr.split('至').map(s => s.trim());
            if (parts[0]) {
                startValidTimeText.value = parts[0];
                startValidTime.value = dayjs(parts[0]).valueOf();
            }
            if (parts[1]) {
                endValidTimeText.value = parts[1];
                endValidTime.value = dayjs(parts[1]).valueOf();
            }
        } else {
            startValidTimeText.value = timeStr;
            startValidTime.value = dayjs(timeStr).valueOf();
        }
    }
    if (data.CarList && Array.isArray(data.CarList)) {
        formData.value.CarList = [...data.CarList];
    }
    if (data.remark) formData.value.remark = data.remark;
    // 恢复文件列表（如果需要的话，可以从 data 中恢复）
    // if (data.fileList && Array.isArray(data.fileList)) {
    //     fileList1.value = [...data.fileList];
    // }
};

// 监听 allData.GatePassInfo 的变化，恢复表单数据
watch(() => props.allData?.GatePassInfo, (newData) => {
    if (newData && Object.keys(newData).length > 0) {
        restoreFormData(newData);
    }
}, { immediate: true, deep: true });

// 组件暴露方法
defineExpose({
    getFormData() {
        // 解析有效日期，支持 "YYYY-MM-DD" 或 "YYYY-MM-DD 至 YYYY-MM-DD" 格式
        let validityStartTime = '';
        let validityEndTime = '';

        if (formData.value.validTime) {
            const timeStr = formData.value.validTime.trim();
            if (timeStr.includes('至')) {
                // 包含"至"的情况，拆分开始和结束日期
                const parts = timeStr.split('至').map(s => s.trim());
                validityStartTime = parts[0] ? `${parts[0]} 08:00:00` : '';
                validityEndTime = parts[1] ? `${parts[1]} 18:00:00` : '';
            } else {
                // 单个日期，作为开始日期，结束日期设为同一天
                validityStartTime = `${timeStr} 08:00:00`;
                validityEndTime = `${timeStr} 18:00:00`;
            }
        }

        // 转换车辆列表格式
        const vehicleList = formData.value.CarList.map(car => ({
            licensePlate: car.code || '',
            vehicleType: car.type || ''
        }));

        // 提取附件URL列表（只返回已上传成功的文件，排除上传中的文件）
        const attachmentList = fileList1.value
            .filter(file => !file.uploading && file.url) // 过滤掉上传中的文件和没有URL的文件
            .map(file => file.url || '')
            .filter(url => url);

        // 从基础信息中获取项目ID和作业地点
        const projectId = props.allData?.BasicsInfo?.projectId || null;
        const workLocation = props.allData?.BasicsInfo?.SpecificAddress || '';

        // 调试信息：打印 projectId 的值
        console.log('GatePassInfo getFormData - projectId:', projectId);
        console.log('GatePassInfo getFormData - allData.BasicsInfo:', props.allData?.BasicsInfo);

        // 从基础信息中获取成员ID列表
        const memberList = props.allData?.BasicsInfo?.MemberList || [];
        const sysUserIds = memberList.map(member => {
            // 如果成员ID是字符串，尝试转换为数字
            const id = member.id;
            return typeof id === 'string' ? parseInt(id) || id : id;
        });

        return {
            projectId,
            workLocation,
            sysUserIds,
            validityStartTime,
            validityEndTime,
            vehicleList,
            attachmentList,
            remark: formData.value.remark || ''
        };
    }
})

// 生命周期钩子函数
onMounted(() => {
    // 组件挂载后，从 allData 中恢复数据
    if (props.allData?.GatePassInfo && Object.keys(props.allData.GatePassInfo).length > 0) {
        restoreFormData(props.allData.GatePassInfo);
    }
});



// 处理出入证开始有效日期选择器确认事件
const HandleStartValidTimeConfirm = (e) => {
    const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
    startValidTimeText.value = dayjs(selectedDate).format('YYYY-MM-DD');
    startValidTime.value = selectedDate;
    endValidTimeText.value = '';
    endValidTime.value = null;
    showStartValidTimePicker.value = false;
    updateValidTime();
}

// 处理出入证结束有效日期选择器确认事件
const HandleEndValidTimeConfirm = (e) => {
    const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;

    // 检查是否选择了开始日期
    if (startValidTime.value && dayjs(selectedDate).isBefore(dayjs(startValidTime.value))) {
        uni.showToast({
            title: '结束日期不能小于开始日期',
            icon: 'none',
            duration: 2000
        });
        return;
    }

    endValidTimeText.value = dayjs(selectedDate).format('YYYY-MM-DD');
    endValidTime.value = selectedDate;
    showEndValidTimePicker.value = false;
    updateValidTime();
}

// 更新出入证有效日期
const updateValidTime = () => {
    if (startValidTimeText.value && endValidTimeText.value) {
        formData.value.validTime = `${startValidTimeText.value} 至 ${endValidTimeText.value}`;
    } else if (startValidTimeText.value) {
        formData.value.validTime = startValidTimeText.value;
    } else {
        formData.value.validTime = '';
    }
}

// 处理车辆信息输入确认事件
const HandleCarInputConfirm = () => {
    // 验证输入
    if (!carInputForm.value.type || carInputForm.value.type.trim() === '') {
        uni.showToast({
            title: '请输入车辆类型',
            icon: 'none',
            duration: 2000
        });
        return;
    }
    if (!carInputForm.value.code || carInputForm.value.code.trim() === '') {
        uni.showToast({
            title: '请输入车牌号',
            icon: 'none',
            duration: 2000
        });
        return;
    }

    // 检查车牌号是否已存在
    const isExist = formData.value.CarList.some(item => item.code === carInputForm.value.code.trim());
    if (isExist) {
        uni.showToast({
            title: '该车牌号已存在',
            icon: 'none',
            duration: 2000
        });
        return;
    }

    // 添加车辆信息
    const newCar = {
        id: generateGuid(), // 使用生成唯一ID
        type: carInputForm.value.type.trim(),
        code: carInputForm.value.code.trim()
    };

    formData.value.CarList.push(newCar);
    console.log('添加车辆成功：', newCar);

    // 清空表单并关闭弹窗
    carInputForm.value.type = '';
    carInputForm.value.code = '';
    showCarInputPopup.value = false;

    uni.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 1500
    });
};

// 删除车辆
const HandleDeleteCar = (carId) => {
    const index = formData.value.CarList.findIndex(item => item.id === carId);
    if (index !== -1) {
        formData.value.CarList.splice(index, 1);
        console.log('删除车辆成功');
    }
};


</script>
<style lang="scss" scoped>
.UploadBox {
    width: 100%;
    height: 300rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    padding: 20rpx;
    border: 1rpx dashed #e4e7ed;
    border-radius: 10rpx;

    .UpTitle {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
    }

    .UpDesc {
        font-size: 24rpx;
        color: #666;
    }
}

.UpFileListBox {
    margin-top: 20rpx;
    height: auto;

    .UpFileItem {
        border: 1rpx solid #e4e7ed;
        padding: 20rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;

        .UpFileName {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
        }

        .UpFileSize {
            font-size: 24rpx;
            color: #666;
        }

        .UpFileStatus {
            font-size: 24rpx;
            color: #2979ff;
            margin-top: 10rpx;
        }
    }
}

.FlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
}

.addBtn {
    font-size: 30rpx;
    color: #2979ff;
    font-weight: bold;
}

.MainBox {
    padding: 20rpx;
    background-color: #fff;
    height: 100%;
    overflow: auto;
}

.mustBox::after {
    content: "*";
    color: red;
    font-size: 30rpx;
    margin-left: 10rpx;
}


.CarListBox {
    border: 1rpx solid #e4e7ed;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .CarItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20rpx;
        flex-wrap: wrap;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
        padding: 20rpx;
        border-radius: 10rpx;

        .CarInfoBox {
            .CarTitleBox {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
            }

            .CartypeBox {
                font-size: 24rpx;
                color: #666;
            }
        }

    }
}

.FormBox {
    // background-color: #f5f5f5;
    height: 100%;

    .FormItem {
        padding: 20rpx;
        background-color: #fff;

        .FormLableBox {
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .FormValueBox {
            font-size: 30rpx;
            margin-top: 20rpx;

            .MemberBox {
                min-height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 20rpx;
                flex-wrap: wrap;
                border: 1rpx solid #e4e7ed;
                padding: 20rpx;
                border-radius: 10rpx;

                .empty-tip {
                    color: #999;
                    font-size: 28rpx;
                }
            }

            .date-range-box {
                display: flex;
                align-items: center;
                gap: 20rpx;
                flex: 1;

                .date-item {
                    flex: 1;
                }

                .date-separator {
                    color: #999;
                    font-size: 28rpx;
                }
            }
        }
    }
}

// 车辆信息输入弹窗样式
.car-input-popup {
    width: 600rpx;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .popup-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        text-align: center;
        margin-bottom: 40rpx;
    }

    .popup-form {
        display: flex;
        flex-direction: column;
        gap: 30rpx;
        margin-bottom: 40rpx;

        .form-item {
            display: flex;
            flex-direction: column;
            gap: 20rpx;

            .form-label {
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
            }
        }
    }

    .popup-buttons {
        display: flex;
        gap: 20rpx;
        justify-content: space-between;
    }
}
</style>
