<template>
    <!-- 自定义表单 -->
    <el-divider content-position="left" >模板表格文件下载</el-divider>
    <div style="padding-left: 40px;">
        <el-button slot="trigger" type="primary" @click="downexcel">下载模板</el-button>
    </div>
    <el-divider content-position="left">上传表格文件</el-divider>
    <el-form ref="importFormRef" >
        <el-form-item label="上传文件:">
            <el-upload class="upload-demo" ref="upload" action :http-request="httpRequest" :before-upload="beforeUpload"
                :on-exceed="handleExceed" :limit="1" accept=".xls, .xlsx">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传excel文件且不超过500M</div>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitImportForm">开始导入</el-button>
            <el-button type="info" @click="dialogVisible">关闭窗口</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts" name="uploadFile" setup>
import { reactive, defineProps, watchEffect } from 'vue'
import { } from './projectPlan.data';
import { submitplaninfoUploadFile, modifyPlaninfo } from './projectPlan.api';
import { ElMessage } from 'element-plus'
import { downloadFile } from "@/api/common/api"


let fileList = reactive<Array<any>>([]);
let dataTo = defineProps(["projectid", "type"])
const emit = defineEmits(['close']);
//加载项目数据
watchEffect(async () => {
    console.log("dataTo", dataTo, dataTo.projectid)
})


function downexcel() {
    let param = {
        path: "Resources/项目计划模板.xlsx",
        fileName: "项目计划模板.xlsx"
    }
    downloadFile("/huzhouUploadfileinfo/downloadfile", "项目计划模板.xlsx", param)


}





function httpRequest(option) {
    fileList.pop()
    fileList.push(option)
}
// 上传前处理
function beforeUpload(file) {
    let fileSize = file.size
    const FIVE_M = 500 * 1024 * 1024;
    //大于5M，不允许上传
    if (fileSize > FIVE_M) {
        ElMessage.error("最大上传500M")
        return false
    }
    //判断文件类型，必须是xlsx格式

    const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

    let whiteList = ["xls", "xlsx"];

    if (whiteList.indexOf(fileSuffix) === -1) {
        ElMessage.error('上传文件只能是xls、xlsx格式');
        return false;
    }
    // let fileName = file.name
    // let reg = /^.+(\.xlsx)$/
    // if(!reg.test(fileName)){
    //   ElMessage.error("只能上传xlsx!")
    //   return false
    // }
    return true
}
// 文件数量过多时提醒
function handleExceed() {
    ElMessage.warning("最多只能上传一个文件")
}
//导入Excel病种信息数据
async function submitImportForm() {
    // console.log("datadatadatadatadatadata", data)
    // if (data.stage != 2) {
    //     ElMessage({
    //         message: "当前阶段无法上传文件",
    //         type: "error"
    //     })
    //     return
    // }
    // // 使用form表单的数据格式
    const params = new FormData()
    // 将上传文件数组依次添加到参数paramsData中
    // fileList.forEach((x) => {
    //     console.log("xxxxxxxxxx", x, x.file)

    // });
    params.append('file', fileList[0].file)
    params.append("projectid", dataTo.projectid)
    //1是新增，2 是修改
    if (dataTo.type == "1") {
        //这里根据自己封装的axios来进行调用后端接口
        submitplaninfoUploadFile(params).then(() => {
            emit("close")
        })
    } else {
        modifyPlaninfo(params).then(() => {
            emit("close")
        })
    }

}
function dialogVisible() {
    emit("close")
}
</script>
<style></style>
