<template>
    <el-dialog
        draggable
        class="cn-operate-dialog"
        v-model="eventDataUploadVisible"
        :title="title"
        style="width: 415px"
        top="25vh"
    >
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" ref="formRef">
                <el-form-item label="用户数据文件">
                    <el-upload
                        v-model:file-list="fileList"
                        ref="uploadEventData"
                        action=""
                        :limit="1"
                        :on-exceed="handleExceed"
                        :auto-upload="false"
                        :on-change="choose"
                    >
                        <template #trigger>
                            <el-button type="primary">选择数据文件</el-button>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="eventDataUploadVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
import { genFileId } from 'element-plus'
import { importSensitiveUserData, importSensitiveReportData } from '@/api/supervision-boot/userReport/form'

const fileList = ref<UploadUserFile[]>([])

const formRef = ref()
const tableStore = inject('tableStore') as TableStore
const eventDataUploadVisible = ref(false)
const title = ref('')
const uploadEventData = ref<UploadInstance>()

// 注意不要和表单ref的命名冲突
const form = reactive({
    file: null
})

//弹出界面，默认选择用户的第一个生产线的第一条进线进行数据导入
const open = async (text: string) => {
    title.value = text
    resetForm()
    form.file = null
    fileList.value = []
    eventDataUploadVisible.value = true
}

//重置表单内容
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

/**
 * 选择待上传文件
 */
const choose = (e: any) => {
    form.file = e.raw
}
const handleExceed: UploadProps['onExceed'] = files => {
    uploadEventData.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadEventData.value!.handleStart(file)
    fileList.value = [{ name: file.name, url: '' }]
}

/**
 * 提交用户表单数据
 */
// const submit = async () => {
//     if (form.file) {
//         formRef.value.validate(async (valid: any) => {
//             if (valid) {
//                 let data = new FormData()
//                 data.append('file', form.file)
//                 console.log(title.value)
//                 if (title.value === '导入干扰源用户') {
//                     await importSensitiveReportData(data)
//                         .then(res => handleImportResponse(title.value, res))
//                         .finally(() => {
//                             tableStore.index()
//                             eventDataUploadVisible.value = false
//                         })
//                 } else {
//                     await importSensitiveUserData(data)
//                         .then(res => handleImportResponse(title.value, res))
//                         .finally(() => {
//                             tableStore.index()
//                             eventDataUploadVisible.value = false
//                         })
//                 }
//                 // if (title.value == '导入干扰源用户') {
//                 //     await importSensitiveReportData(data)
//                 //         .then((res: any) => {
//                 //             if (res.type === 'application/json') {
//                 //                 // 说明是普通对象数据，读取信息
//                 //                 const fileReader = new FileReader()
//                 //                 fileReader.onloadend = () => {
//                 //                     try {
//                 //                         const jsonData = JSON.parse(fileReader.result)
//                 //                         // 后台信息
//                 //                         if (jsonData.code === 'A0000') {
//                 //                             ElMessage.success('导入成功')
//                 //                         } else {
//                 //                             ElMessage.error('导入失败，请查看下载附件！')
//                 //                         }
//                 //                     } catch (err) {
//                 //                         console.log(err)
//                 //                     }
//                 //                 }
//                 //                 fileReader.readAsText(res)
//                 //             } else {
//                 //                 ElMessage.error('导入失败，请查看下载附件！')
//                 //                 let blob = new Blob([res], {
//                 //                     type: 'application/vnd.ms-excel'
//                 //                 })
//                 //                 const url = window.URL.createObjectURL(blob)
//                 //                 const link = document.createElement('a')
//                 //                 link.href = url
//                 //                 link.download = '干扰源用户失败列表'
//                 //                 document.body.appendChild(link)
//                 //                 link.click()
//                 //                 link.remove()
//                 //             }
//                 //         })
//                 //         .finally(() => {
//                 //             tableStore.index()
//                 //             eventDataUploadVisible.value = false
//                 //         })
//                 // } else {
//                 //     await importSensitiveUserData(data)
//                 //         .then((res: any) => {
//                 //             if (res.type === 'application/json') {
//                 //                 // 说明是普通对象数据，读取信息
//                 //                 const fileReader = new FileReader()
//                 //                 fileReader.onloadend = () => {
//                 //                     try {
//                 //                         const jsonData = JSON.parse(fileReader.result)
//                 //                         // 后台信息
//                 //                         if (jsonData.code === 'A0000') {
//                 //                             ElMessage.success('导入成功')
//                 //                         } else {
//                 //                             ElMessage.error('导入失败，请查看下载附件！')
//                 //                         }
//                 //                     } catch (err) {
//                 //                         console.log(err)
//                 //                     }
//                 //                 }
//                 //                 fileReader.readAsText(res)
//                 //             } else {
//                 //                 ElMessage.error('导入失败，请查看下载附件！')
//                 //                 let blob = new Blob([res], {
//                 //                     type: 'application/vnd.ms-excel'
//                 //                 })
//                 //                 const url = window.URL.createObjectURL(blob)
//                 //                 const link = document.createElement('a')
//                 //                 link.href = url
//                 //                 link.download = '敏感及重要用户失败列表'
//                 //                 document.body.appendChild(link)
//                 //                 link.click()
//                 //                 link.remove()
//                 //             }
//                 //         })
//                 //         .finally(() => {
//                 //             tableStore.index()
//                 //             eventDataUploadVisible.value = false
//                 //         })
//                 // }
//             }
//         })
//     } else {
//         ElMessage.error('请选择数据文件')
//     }
// }
const submit = async () => {
    if (form.file) {
        formRef.value.validate(async (valid: any) => {
            if (valid) {
                let data = new FormData()
                data.append('file', form.file)

                try {
                    if (title.value === '导入干扰源用户') {
                        await importSensitiveReportData(data)
                            .then(res => handleImportResponse(title.value, res))
                            .catch(() => {
                                // 处理请求失败的情况
                                ElMessage.error('导入失败，请查看下载附件！')
                            })
                    } else {
                        await importSensitiveUserData(data)
                            .then(res => handleImportResponse(title.value, res))
                            .catch(() => {
                                // 处理请求失败的情况
                                ElMessage.error('导入失败，请查看下载附件！')
                            })
                    }
                } finally {
                    // 无论成功失败都重新启用按钮并关闭窗口
                    tableStore.index()
                    eventDataUploadVisible.value = false
                }
            } 
        })
    } else {
        ElMessage.error('请选择数据文件')
    }
}

async function handleImportResponse(title: any, res: any) {
    if (res.type === 'application/json') {
        const fileReader = new FileReader()
        fileReader.onloadend = () => {
            try {
                const jsonData = JSON.parse(fileReader.result)
                if (jsonData.code === 'A0000') {
                    ElMessage.success('导入成功')
                } else {
                    ElMessage.error('导入失败，请查看下载附件！')
                }
            } catch (err) {
                console.log(err)
            }
        }
        fileReader.readAsText(res)
    } else {
        ElMessage.error('导入失败，请查看下载附件！')
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = title.includes('干扰源用户') ? '干扰源用户失败列表' : '敏感及重要用户失败列表'
        document.body.appendChild(link)
        link.click()
        link.remove()
    }
}

defineExpose({ open })
</script>

<style scoped>
.el-form-item__content div {
    width: 100% !important;
}
</style>
