<!--上传负荷谐波电流数据-->
<template>
    <el-dialog
        draggable
        class='cn-operate-dialog'
        v-model='eventDataUploadVisible'
        :title='title'
        style='width: 415px; height: 380px'
        top='25vh'
    >
        <el-scrollbar>
            <el-form :inline='false' :model='form' label-width='120px' ref='formRef' :rules='rules'>
                <el-form-item label='数据名称' prop='dataName'>
                    <el-input v-model='form.dataName' />
                </el-form-item>
                <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, inject, reactive } 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 { importEventData } from '@/api/advance-boot/sgGroven/sgEvent'

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

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

const rules = {
    dataName: [
        { required: true, message: '数据名不能为空', trigger: 'blur' },
    ],

}

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

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

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


/**
 * 选择待上传文件
 */
const choose = (e: any) => {
    form.dataName = e.name.substring(0,e.name.lastIndexOf('.'))
    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)
                data.append('name', form.dataName)
                await importEventData(data).then((res: any) => {
                    if (res.code == 'A0000') {
                        ElMessage.success('导入成功')
                        tableStore.index()
                        eventDataUploadVisible.value = false
                    } else {
                        ElMessage.error('导入失败，请检查表格文件')
                    }
                })
            }
        })
    } else {
        ElMessage.error('请选择数据文件')
    }
}

defineExpose({ open })
</script>

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