<template>
    <!-- 1. 配置中文语言包 -->
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
        <div class="page-container">
            <!-- 顶部装饰背景 -->
            <div class="bg-decoration"></div>

            <n-card class="main-card" :bordered="false">
                <!-- 头部 -->
                <template #header>
                    <div class="header-content">
                        <div class="header-title">
                            <div class="title-icon-wrapper">
                                <n-icon size="24" color="#fff">
                                    <AnalyticsOutline />
                                </n-icon>
                            </div>
                            <div>
                                <h2>材料提报中心</h2>
                                <p class="sub-title">请如实填写客户成交信息并上传相关凭证</p>
                            </div>
                        </div>
                        <n-button class="logout-btn" secondary type="error" round @click="logout">
                            <template #icon>
                                <n-icon>
                                    <LogOutOutline />
                                </n-icon>
                            </template>
                            退出系统
                        </n-button>
                    </div>
                </template>

                <n-form ref="formRef" :model="formData" :rules="rules" label-placement="top"
                    require-mark-placement="right-hanging">

                    <n-space vertical :size="32">

                        <!-- 模块 1: 客户及成交信息 -->
                        <div class="section">
                            <div class="section-header">
                                <n-icon class="section-icon" size="20">
                                    <IdCardOutline />
                                </n-icon>
                                <span>1. 客户及成交信息录入</span>
                            </div>
                            <div class="section-body">
                                <n-grid :x-gap="24" :y-gap="8" cols="1 s:2 m:3" responsive="screen">
                                    <n-grid-item>
                                        <n-form-item label="分析师主管" path="analystSupervisor">
                                            <n-input v-model:value="formData.analystSupervisor" placeholder="请输入主管姓名"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="分析师部门" path="analystDepartment">
                                            <n-input v-model:value="formData.analystDepartment" placeholder="例如: 市场一部"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="分析师姓名" path="analystName">
                                            <n-input v-model:value="formData.analystName" placeholder="请输入分析师姓名"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="家长姓名" path="parentName">
                                            <n-input v-model:value="formData.parentName" placeholder="请输入家长姓名"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="家长电话" path="parentPhone">
                                            <n-input v-model:value="formData.parentPhone" placeholder="请输入联系电话"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="家长身份证号码" path="parentIdCard">
                                            <n-input v-model:value="formData.parentIdCard" placeholder="请输入18位身份证号"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="成交日期" path="transactionDate">
                                            <n-date-picker v-model:value="formData.transactionDate" type="date"
                                                clearable style="width: 100%" />
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="成交金额" path="transactionAmount">
                                            <n-input-number v-model:value="formData.transactionAmount"
                                                placeholder="0.00" clearable style="width: 100%">
                                                <template #prefix>¥</template>
                                            </n-input-number>
                                        </n-form-item>
                                    </n-grid-item>
                                    <n-grid-item>
                                        <n-form-item label="指导周期" path="guidancePeriod">
                                            <n-input v-model:value="formData.guidancePeriod" placeholder="例如: 3个月"
                                                clearable />
                                        </n-form-item>
                                    </n-grid-item>
                                </n-grid>

                                <div style="margin-top: 8px;">
                                    <n-form-item label="分析师备注">
                                        <n-input v-model:value="formData.analystNotes" type="textarea"
                                            placeholder="请填写额外备注说明（选填）..." :autosize="{ minRows: 3, maxRows: 5 }" />
                                    </n-form-item>
                                </div>
                            </div>
                        </div>

                        <!-- 模块 2: 附件文档 (仅限1份) -->
                        <div class="section">
                            <div class="section-header">
                                <n-icon class="section-icon" size="20">
                                    <DocumentAttachOutline />
                                </n-icon>
                                <span>2. 附件文档 (限1份)</span>
                            </div>
                            <div class="section-body">
                                <n-upload :max="1" directory-dnd v-model:file-list="documentFileListLast"
                                    @preview="handlePreview"
                                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'documentFileList')">
                                    <n-upload-dragger class="custom-dragger">
                                        <div class="dragger-icon">
                                            <n-icon size="48" :depth="3">
                                                <CloudUploadOutline />
                                            </n-icon>
                                        </div>
                                        <n-text style="font-size: 16px; font-weight: 500;">点击或者拖动单份文件到该区域来上传</n-text>
                                        <n-p depth="3" style="margin: 8px 0 0 0; font-size: 13px;">
                                            支持 PDF, DOCX, XLSX 等格式，单文件不超过 50MB
                                        </n-p>
                                    </n-upload-dragger>
                                </n-upload>
                            </div>
                        </div>

                        <!-- 模块 3: 付款截图 (可上传多张) -->
                        <div class="section">
                            <div class="section-header">
                                <n-icon class="section-icon" size="20">
                                    <ImagesOutline />
                                </n-icon>
                                <span>3. 付款截图 (可上传多张)</span>
                            </div>
                            <div class="section-body">
                                <n-upload class="custom-multi-upload" accept="image/*" multiple list-type="image-card"
                                    v-model:file-list="paymentFileListLast" @preview="handlePreview"
                                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'paymentFileList')">
                                    <div class="upload-placeholder">
                                        <div class="icon-bg">
                                            <n-icon size="28" color="#666">
                                                <CameraOutline />
                                            </n-icon>
                                        </div>
                                        <span class="placeholder-text">上传凭证</span>
                                    </div>
                                </n-upload>
                            </div>
                        </div>

                        <!-- 模块 4: 电子签名 (仅限1张) -->
                        <div class="section">
                            <div class="section-header">
                                <n-icon class="section-icon" size="20">
                                    <BrushOutline />
                                </n-icon>
                                <span>4. 电子签名 (限1张)</span>
                            </div>
                            <div class="section-body">
                                <n-upload class="signature-upload-container" accept="image/*" :max="1"
                                    list-type="image-card" v-model:file-list="signatureFileListLast"
                                    @preview="handlePreview"
                                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'signatureFileList')">
                                    <div class="upload-placeholder signature-placeholder">
                                        <n-icon size="32" depth="3">
                                            <CreateOutline />
                                        </n-icon>
                                        <n-text depth="3" style="font-size: 14px; margin-top: 8px;">点击上传手写签名</n-text>
                                    </div>
                                </n-upload>
                            </div>
                        </div>
                    </n-space>
                </n-form>

                <!-- 底部操作 -->
                <template #footer>
                    <div class="footer-actions">
                        <n-button size="large" class="action-btn" @click="handleCancel">
                            <template #icon>
                                <n-icon>
                                    <CloseOutline />
                                </n-icon>
                            </template>
                            取消录入
                        </n-button>
                        <n-button size="large" type="primary" class="action-btn submit-btn" @click="handleSubmit">
                            <template #icon>
                                <n-icon>
                                    <CheckmarkCircleOutline />
                                </n-icon>
                            </template>
                            提交资料
                        </n-button>
                    </div>
                </template>
            </n-card>
        </div>
    </n-config-provider>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    useMessage, zhCN, dateZhCN, NConfigProvider, NCard, NSpace, NGrid, NGridItem,
    NForm, NFormItem, NInput, NInputNumber, NDatePicker, NUpload, NUploadDragger,
    NButton, NIcon, NText, NP
} from 'naive-ui'

import {
    AnalyticsOutline, LogOutOutline, IdCardOutline, DocumentAttachOutline,
    ImagesOutline, BrushOutline, CloudUploadOutline, CameraOutline,
    CreateOutline, CloseOutline, CheckmarkCircleOutline
} from '@vicons/ionicons5'

import http from '@/utils/request'

const message = useMessage()
const route = useRoute()
const router = useRouter()
const formRef = ref(null)

// 从路由中获取 wecom_id，后续提交时需要
const wecomId = route.query.wecom_id || 'wmcr-ECwAAzKclEfIKNcVgOdxD-TcqLg'

// 响应式表单数据
const formData = reactive({
    analystSupervisor: '',
    analystDepartment: '',
    analystName: '',
    parentName: '',
    parentPhone: '',
    parentIdCard: '',
    transactionDate: null,
    transactionAmount: null,
    guidancePeriod: '',
    analystNotes: '',
    // 存储 UI 显示用的文件列表
    documentFileList: [],
    paymentFileList: [],
    signatureFileList: []
})

// 临时文件列表，用于上传前预览
const documentFileListLast = ref([])
const paymentFileListLast = ref([])
const signatureFileListLast = ref([])

// 定义校验规则
const rules = {
    analystSupervisor: { required: true, message: '请输入主管姓名', trigger: 'blur' },
    parentName: { required: true, message: '请输入家长姓名', trigger: 'blur' },
    transactionDate: { required: true, type: 'number', message: '请选择日期', trigger: ['blur', 'change'] }
}

/**
 * 格式化日期：将时间戳转换为 YYYY-MM-DD 格式
 * @param {number} timestamp - The date timestamp.
 * @returns {string|null} - Formatted date string or null.
 */
const formatDate = (timestamp) => {
    if (!timestamp) return null;
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
};


/**
 * 核心：通用文件上传逻辑
 * 直接把后端返回的数据挂载到文件对象的 rawResponse 字段，完全隔离前端生成的 id/fullPath
 */
const handleCustomUpload = async ({ file, onFinish, onError, onProgress }, type) => {
    try {
        const uploadData = new FormData()
        uploadData.append('file', file.file)

        // 注意：这里的上传接口地址可能需要根据您的实际情况修改
        const response = await http.post('/v1/material/upload', uploadData, {
            headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: (p) => onProgress({ percent: Math.ceil((p.loaded / p.total) * 100) })
        })

        if (response.success && response) {
            file.rawResponse = response
            file.object_name = response.object_name
            file.url = response.url
            file.status = 'finished'
            if (type === 'paymentFileList') {
                formData.paymentFileList.push(file)
            } else if (type === 'documentFileList') {
                formData.documentFileList.push(file)
            } else if (type === 'signatureFileList') {
                formData.signatureFileList.push(file)
            }
            message.success('上传成功')
            onFinish()
        } else {
            message.error(response.message || '上传失败')
            onError()
        }
    } catch (error) {
        message.error('网络错误，上传失败')
        onError()
    }
}

/**
 * 核心：初始化数据回显
 */
const initData = async () => {
    try {
        // 注意：这里的获取信息接口地址可能需要根据您的实际情况修改
        const res = await http.get('/v1/customer/get_customers_info', { wecom_id: wecomId })

        // 1. 回显基础字段
        formData.analystName = res.analystName
        formData.parentName = res.customerName
        formData.parentPhone = res.customerPhone
        formData.analystNotes = res.notes
        formData.analystSupervisor = res.analystDepartmentLeader?.[0] || ''
        formData.analystDepartment = res.analystDepartmentName?.[0] || ''
        if (res.dealAmount) formData.transactionAmount = Number(res.dealAmount)
        if (res.dealDate) formData.transactionDate = new Date(res.dealDate).getTime()

        // 2. 回显付款截图
        if (res.proofOfPayment && res.proofOfPayment_urls) {
            const paymentFiles = res.proofOfPayment.map((objName, index) => ({
                id: objName,
                name: `凭证-${index + 1}`,
                status: 'finished',
                url: res.proofOfPayment_urls[index],
                rawResponse: {
                    object_name: objName,
                    url: res.proofOfPayment_urls[index],
                    success: true
                }
            }))
            formData.paymentFileList = paymentFiles
            paymentFileListLast.value = paymentFiles
        }
        message.success('数据加载成功')
    } catch (error) {
        console.error('加载错误:', error)
        message.error('客户信息加载失败')
    }
}

onMounted(() => {
    initData()
})

// 预览
const handlePreview = (file) => {
    const url = file.url || file.thumbnailUrl
    if (url) window.open(url)
}

// ==============================================================================
//  核心改动: 更新提交逻辑以匹配新接口
// ==============================================================================
const handleSubmit = () => {
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            // 1. 构建完全符合后端接口要求的 payload
            const submitPayload = {
                wecom_id: wecomId,
                analyst_supervisor: formData.analystSupervisor,
                analyst_department: formData.analystDepartment,
                analyst_name: formData.analystName,
                parent_name: formData.parentName,
                parent_phone: formData.parentPhone,
                parent_id_card: formData.parentIdCard,
                // 格式化日期和金额
                transaction_date: formatDate(formData.transactionDate),
                transaction_amount: String(formData.transactionAmount || ''),
                guidance_period: formData.guidancePeriod,
                // 提取文件 object_name
                payment_object_names: formData.paymentFileList.map(f => f.object_name).filter(Boolean),
                signature_object_name: formData.signatureFileList[0]?.object_name || null,
                attachment_object_name: formData.documentFileList[0]?.object_name || null,
                // analystNotes 似乎不在接口中，如果需要提交请后端添加字段
                // assignee_name 和 assignee_phone 表单中未提供，暂不提交
            };

            console.log('--- 准备提交给后端的最终纯净数据 ---', submitPayload);

            try {
                // 2. 调用新的提交接口
                // 注意：请确保 http util 配置了正确的 baseURL, 例如 http://192.168.15.115:5636/api
                await http.post('/v1/material/submit', submitPayload);
                message.success('材料已正式提交成功！');
                // 可选：提交成功后跳转或重置表单
                // router.push('/success-page');
            } catch (err) {
                console.error('提交失败:', err);
                message.error('提交失败，请联系管理员');
            }
        } else {
            message.error('请完善必填信息');
        }
    });
};


const logout = () => router.push('/login')
const handleCancel = () => router.back()

</script>

<style scoped>
.page-container {
    min-height: 100vh;
    background-color: #f0f2f5;
    background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #f0f2f5 80%);
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
}

.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 240px;
    background: linear-gradient(135deg, #18a058 0%, #36ad6a 100%);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
    z-index: 0;
}

.main-card {
    max-width: 960px;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    z-index: 1;
    overflow: hidden;
}

.main-card :deep(.n-card-header) {
    padding: 24px 32px;
    border-bottom: 1px solid #f0f0f0;
}

.main-card :deep(.n-card__content) {
    padding: 32px;
}

.main-card :deep(.n-card__footer) {
    padding: 24px 32px;
    background-color: #fafafc;
    border-top: 1px solid #f0f0f0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #18a058 0%, #36ad6a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);
}

.header-title h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    color: #1f2225;
    font-weight: 600;
}

.sub-title {
    margin: 0;
    font-size: 13px;
    color: #8c929b;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    color: #1f2225;
}

.section-icon {
    color: #18a058;
    background-color: #e8f5ed;
    padding: 6px;
    border-radius: 8px;
}

.section-body {
    background-color: #fcfcfd;
    border: 1px solid #f0f0f5;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
}

.section-body:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    border-color: #e8e8ed;
}

.custom-dragger {
    background-color: #fafafc;
    border-radius: 8px;
    padding: 32px 0;
    transition: all 0.3s ease;
}

.custom-dragger:hover {
    background-color: #f3fcf6;
}

.dragger-icon {
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.custom-dragger:hover .dragger-icon {
    transform: translateY(-4px);
    color: #18a058;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fafafc;
    transition: all 0.3s ease;
}

.upload-placeholder:hover {
    background-color: #f3fcf6;
}

.custom-multi-upload :deep(.n-upload-trigger.n-upload-trigger--image-card) {
    width: 120px;
    height: 120px;
    border-radius: 8px;
}

.custom-multi-upload :deep(.n-upload-file.n-upload-file--image-card) {
    width: 120px;
    height: 120px;
    border-radius: 8px;
}

.icon-bg {
    width: 48px;
    height: 48px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 8px;
}

.placeholder-text {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.signature-upload-container :deep(.n-upload-trigger.n-upload-trigger--image-card) {
    width: 300px;
    height: 120px;
    border-radius: 8px;
    border: 2px dashed #d9d9d9;
}

.signature-upload-container :deep(.n-upload-file.n-upload-file--image-card) {
    width: 300px;
    height: 120px;
    border-radius: 8px;
}

.signature-placeholder {
    background-color: transparent;
}

.footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.action-btn {
    min-width: 120px;
    border-radius: 8px;
    font-weight: 500;
}

.submit-btn {
    box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);
}

@media (max-width: 768px) {
    .page-container {
        padding: 20px 12px;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .logout-btn {
        align-self: flex-end;
    }

    .main-card :deep(.n-card__content) {
        padding: 20px 16px;
    }

    .section-body {
        padding: 16px;
    }

    .signature-upload-container :deep(.n-upload-trigger.n-upload-trigger--image-card),
    .signature-upload-container :deep(.n-upload-file.n-upload-file--image-card) {
        width: 100%;
        height: 100px;
    }
}
</style>