<!--
 * @Title: 
 * @Description: 
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <div>
        <el-row>
            <el-col :span="24">
                <basic-container>
                    <avue-form :option="debugOption" v-model="debugForm" />
                    <div style="color:gray;margin-top: 0px;">*数据导入操作任务在后台运行，请在提交数据文件后打开导入历史页面查看导入状态</div>
                </basic-container>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
                <basic-container>
                    <el-upload ref="upload" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"
                        :before-upload="beforeUpload" :on-error="onError" :on-success="onSuccess" :file-list="fileList"
                        :on-progress="onProgress" :auto-upload="false" :multiple="false" limit="1" accept=".geojson"
                        :data="postData">
                        <el-button slot="trigger" size="small" type="primary">选择危险区数据文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始导入
                        </el-button>
                        <div slot="tip" class="el-upload__tip">只能上传图层数据集文件</div>
                    </el-upload>
                </basic-container>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { getToken } from "@/util/auth";


export default {
    data() {
        return {
            fileName: '',
            editForm: {},
            editDialog: false,
            form: {},
            selectionList: [],
            query: {},
            loading: true,
            postData: {},
            uploadUrl: '',
            debugForm: {},
            debugOption: {
                labelWidth: 150,
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '导入备注',
                        prop: 'remark',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "危险区数据导入是重要的操作，为了记录必要的信息，请务必录入相关操作信息",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '导入操作类型',
                        prop: 'saveType',
                        type: 'radio',
                        span: 24,
                        value: 0,
                        dicData: [
                            {
                                label: '只新增',
                                value: 0,
                            },
                            {
                                label: '只更新',
                                value: 1,
                            },
                            {
                                label: '新增或更新',
                                value: 2,
                            }
                        ],
                        rules: [{
                            required: true,
                        }],
                    },
                ]
            }
        };
    },
    props: {
        visible: {
            tyep: [Boolean],
            default: false,
        },
        importLoading: {
            tyep: [Boolean],
            default: false,
        }
    },
    name: 'dangerAreaImportProcess',
    created() {
        this.init();
    },
    methods: {
        init() {
            this.uploadUrl = this.getUploadUrl();
        },
        submitUpload() {
            this.postData['remark'] = this.debugForm.remark;
            this.postData['saveType'] = this.debugForm.saveType;
            this.$refs.upload.submit();

        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            // this.$message.success('handleRemove')
        },
        handlePreview(file) {
            console.log(file);
            //  this.$message.success('handlePreview')
        },
        beforeUpload(file) {
            console.log(file);
            // this.$message.success('beforeUpload')
            return true;
        },
        getUploadUrl: function () {
            return `/api/galaxy-business/map/manage/danger/import/json?${this.website.tokenHeader
                }=${getToken()}`;
        },
        onProgress(event, file, fileList) {
            console.log(fileList);
            this.$emit("update:importLoading", true);
        },
        onError(err, file, fileList) {
            console.log(fileList);
            this.$message.warning(err);
        },
        onSuccess(response, file, fileList) {
            console.log(fileList);
            this.$message.success('已成功提交导入任务!')
            this.$refs.upload.clearFiles();
            this.$emit("update:importLoading", false);
            this.$emit("update:visible", false);
        },
    },
};
</script>
<style>
.mb0 {
    margin-top: 10;

}
</style>
