<template>
    <div>
        <el-dialog
            :title="importCaseDialog.title"
            :visible="true"
            width="480px"
            append-to-body
            :close-on-click-modal="false"
            @close="handleClose"
        >
        
            <div class="dialog-content">
              <upload-import :file-list="fileList" :max-count="1"
                            :show-file-name="true"
                            accept=".xls,.xlsx"
                            @handleUploadFile="handleUploadFile"
                            @handleImport="handleImport">
              </upload-import>
            </div>
        
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取消</el-button>
            <el-button @click="handleDownload()">下载</el-button>
            <el-button type="primary" @click="handleSubmit()">确认</el-button>
        </span>
        </el-dialog>
        
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
            uploadImport:() => import('@/components/uploadImport.vue'),//导入上传
        },
        props: {
            importCaseDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
            
                fileList:[],

            };
        },
        mounted () {
            
        },
        methods: {
            handleUploadFile(fileList){
                console.log('获取上传文件信息',fileList)
                fileList = JSON.parse(JSON.stringify(fileList))
                this.fileList = fileList.map((item,i) => {
                    let time = this.$util.getTimestamp()
                    let fileType = this.$util.getFileExtension(item.url)
                    let fileName = `${time}.${fileType}`
                    return {
                        url: item.url,
                        fileName:fileName,
                    }
                })
            },
            handleImport(file){
                let formdata = new FormData();
                formdata.append("file", file)
                console.log(formdata)
                api.getImportCase(formdata).then(res => {
                    this.$parent.getCaseInfoList(1)
                    this.$message.success("导入成功");    
                })   
          
            },
            handleSubmit(){  
                if(!this.$clickThrottle()) { return }//防止重复点击
                this.handleClose()  
            },
            // 下载
            handleDownload(){
                if(!this.$clickThrottle()) { return }//防止重复点击        
                api.getExportTemplate({}).then(res => {
                    this.$util.downloadFileByBlob(res.data, '案件.xlsx')
                })
            },
            handleClose() {
                this.$emit('update:importCaseDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-content{
    padding: 16px 64px;
    max-height:500px
}

</style>