<template>
    <el-form-item label="入网设计方案审查报告">
        <el-upload
            v-model:file-list="form.NetReport"
            ref="NetReportRef"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'NetReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="治理工程验收报告">
        <el-upload
            v-model:file-list="form.governReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'governReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="信息安全检测报告">
        <el-upload
            v-model:file-list="form.informationSecurityTestReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'informationSecurityTestReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="验收检验报告单">
        <el-upload
            v-model:file-list="form.acceptanceInspectionReportSingle"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'acceptanceInspectionReportSingle')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="验收检验报告">
        <el-upload
            v-model:file-list="form.acceptanceInspectionReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'acceptanceInspectionReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="型式实验报告">
        <el-upload
            v-model:file-list="form.typeExperimentReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'typeExperimentReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="出厂检验报告">
        <el-upload
            v-model:file-list="form.factoryInspectionReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'factoryInspectionReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="性能检测报告">
        <el-upload
            v-model:file-list="form.performanceTestReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'performanceTestReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="主接线图">
        <el-upload
            v-model:file-list="form.mainWiringDiagram"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'mainWiringDiagram')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="试运行报告">
        <el-upload
            v-model:file-list="form.runTheReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'runTheReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { uploadFile } from '@/api/system-boot/file'
import { genFileId, ElMessage } from 'element-plus'
import type { UploadProps, UploadRawFile } from 'element-plus'

const form = ref({
    NetReport: [], //入网设计方案审查报告：
    governReport: [], //治理工程验收报告
    informationSecurityTestReport: [], //信息安全检测报告
    acceptanceInspectionReportSingle: [], //信息安全检测报告
    acceptanceInspectionReport: [], //验收检验报告：
    typeExperimentReport: [], //型式实验报告
    factoryInspectionReport: [], //出厂检验报告：
    performanceTestReport: [], //性能检测报告
    mainWiringDiagram: [], //主接线图：
    runTheReport: [], //试运行报告
})

const formName = ref({
    NetReport: '',
    governReport: '',
    informationSecurityTestReport: '',
    acceptanceInspectionReportSingle: '',
    acceptanceInspectionReport: '',
    typeExperimentReport: '',
    factoryInspectionReport: '',
    performanceTestReport: '',
    mainWiringDiagram: '',
    runTheReport: '',
})

const choose = (e: any, name: string) => {
    console.log('🚀 ~ choose ~ name:', name)
    uploadFile(e.raw, '/supervision/').then(res => {
        formName.value[name] = res.data.name
    })
}
const submitForm = () => {
    console.log(formName.value)
}
defineExpose({ submitForm })
</script>
<style lang="scss" scoped>
.el-form-item__content > div:first-child {
    display: flex;
}
:deep(.el-upload-list) {
    margin: 0;
    .el-upload-list__item {
        height: 25px;
    }
    .el-upload-list__item-file-name {
        width: 150px !important;
        height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
