<!--
 * @Title: 
 * @Description: 
 * @Author: 893699165@qq.com
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <div>
        <basic-container>
            <!-- <avue-form :option="option" v-model="form1"  :upload-before="uploadBefore" :upload-after="uploadAfter"  ></avue-form> -->



            <el-row>
                <el-col :span="24">
                    <div>
                        <label>项目名称:</label>
                        <label style="margin-left: 20px;">{{projectName}}</label>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-upload ref="upload" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"
                        :before-upload="beforeUpload" :on-error="onError" :on-success="onSuccess" :file-list="fileList"
                        :auto-upload="false" :multiple="false" limit="1" accept=".xlsx" :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">只能上传XLSX 工作表</div>
                    </el-upload>
                </el-col>
            </el-row>

        </basic-container>
    </div>
</template>

<script>
// import { getList, getDetail, add, update } from "@/api/workbench/monitoring";
// import { mapGetters } from "vuex";
import { getToken } from "@/util/auth";
// import { submit } from "../../api/base/region";



export default {
    data() {
        return {
            fileList: [
            ]
            , fileName: '',
            editForm: {},
            editDialog: false,
            form: {},
            selectionList: [],
            query: {},
            loading: true,

            form1: {
                fileList: [
                    // { "label": "avue@226d5c1a_image.png", "value": "/images/logo-bg.jpg" },
                    // {"label": "avue@226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'}
                ],

            },
            // option: {
            //   labelWidth: 120,
            //   submitText: '开始导入',

            //   column: [

            //     {
            //       label: '拖拽上传',
            //       prop: 'fileList',
            //       type: 'upload',
            //       span: 24,
            //       limit: 1,
            //       dragFile: true,
            //       propsHttp: {
            //         url: 'value',
            //         name: 'label',
            //         res: 'data'
            //       },
            //       tip: '只能上传XLSX 工作表',
            //       action: this.uploadUrl(),
            //     }
            //   ]
            // },


            // page: {
            //   pageSize: 5,
            //   currentPage: 1,
            //   total: 0,
            // },

            // option: {
            //   labelWidth: 120,
            //   viewLabelWidth: 100,
            //   searchlabelWidth: 100,
            //   height: "auto",
            //   calcHeight: 30,
            //   align: "center",
            //   headerAlign: "center",

            //   tip: false,
            //   simplePage: true,
            //   searchShow: true,
            //   searchMenuSpan: 6,
            //   addBtn: false,

            //   border: true,
            //   index: true,
            //   height: 300,
            //   editBtn: false,
            //   delBtn: false,
            //   menuWidth: 220,
            //   dialogType: "drawer",
            //   menu: false,
            //   dialogClickModal: false,
            //   column: [
            //     {
            //       label: "预警信息",
            //       prop: "rtuName",
            //       search: true,
            //       span: 12,
            //     },
            //     {
            //       label: "预警时间",
            //       prop: "rtuCode",
            //       span: 12,
            //       search: true,
            //     },
            //     {
            //       label: "恢复时间",
            //       prop: "orgId",
            //       span: 12,
            //     },
            //   ],
            // },
            postData: {},
            uploadUrl: '',

        };
    },

    props: {
        id: {
            type: [Number],
            required: true
        },
        projectName: {
            type: [String],
            required: true
        },
        visible: {
            tyep: [Boolean],
            default: false,
        },
        importLoading: {
            tyep: [Boolean],
            default: false,
        }
    },
    name: 'rtuImportProcess',
    // onload(){
    //   this.postData['projectId']=this.id;
    //   this.postData['projectName']=this.projectName;
    // },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.postData['projectId'] = this.id;
            this.uploadUrl = this.getUploadUrl();
        },
        submitUpload() {

            this.$refs.upload.submit();
            this.$message.success('submitUpload')


        },
        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;
        },
        onProgress(event, file, fileList) {
            this.$emit("update:importLoading", true);
        },
        onError(err, file, fileList) {
            this.$message.warning("onError");
        },
        onSuccess(response, file, fileList) {
            this.$message.warning("提交成功");

            this.$refs.upload.clearFiles();
            this.$emit("update:importLoading", false);
            this.$emit("update:visible", false);
        },
        // submit(form) {

        //   console.log(form)
        //   this.$message.warning("onSubmit");
        // },
        getUploadUrl: function () {
            //  this.$message.success('getUploadUrl')
            return `/api/galaxy-test/data/manage/import/rtu?${this.website.tokenHeader
                }=${getToken()}`;
        },
        // takeFile() {

        // },

        // uploadBefore(file, done, loading, column) {
        //   console.log(file, column)
        //   //如果你想修改file文件,由于上传的file是只读文件，必须复制新的file才可以修改名字，完后赋值到done函数里,如果不修改的话直接写done()即可
        //   // var newFile = new File([file], '1234', { type: file.type });
        //   done()
        //   this.$message.success('上传前的方法')
        // },
        // uploadAfter(res, done, loading, column) {
        //   console.log(res, column)
        //   done()
        //   this.$message.success('上传后的方法')
        // }
    },
};
</script>
<style>
.mb0 {
    margin-top: 10;

}
</style>
