<template>
    <div>
        <el-form :model="formData" :rules="formRules" ref="dataForm">

            <el-card style="margin-top: -30px">
                <el-button-group style="display: flex">
                    <el-button
                        type="primary"
                        @click.native="submitUpload()"
                        style="margin: 0 60px 10px auto; height: 35px"
                        :loading="loading"
                    >提交
                    </el-button
                    >
                </el-button-group>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="ao-text">
                            <span>电子档名称：</span>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item prop="name">
                            <el-input v-model="formData.name" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="ao-text">
                            <span>备注：</span>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item prop="remark">
                            <el-input type="textarea" v-model="formData.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                    </el-col>
                    <el-col :span="16">
                        <div style="color: red">
                            需要上传档案为：营业执照电子档案，经营许可证电子档案，经营备案证电子档案，开户行电子档案。
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="ao-text">
                            <span>文件：</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-upload
                                class="upload-demo"
                                ref="upload"
                                :action="this.uploadUrl"
                                :on-preview="uploadHandlePreview"
                                :on-remove="uploadHandleRemove"
                                :limit="1"
                                :headers="headers"
                                :on-exceed="uploadHandleExceed"
                                accept=".jpg,.png"
                                :on-change="uploadOnchange"
                                :on-success="uploadHandleSuccess"
                                :on-error="uploadHandleError"
                                :file-list="fileList"
                                :data="{type:'image3'}"
                                :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <div>只能上传 .jpg,.png 文件，且不超过 2 MB</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
    </div>
</template>

<script>
import draggable from "vuedraggable";
import {saveAs} from "file-saver";
import {parseTime} from "../../filtres/index";
import store from "../../store";
import {BASE_URL} from "../../config/app";
import {insertCompanyCert} from "../../api/warehouse/suppliersEnterpriseBasicCert";

export default {
    name: "idQuery",
    props: {
        closeDialog: {
            type: Function,
            required: true,
        },
        idQuery: {
            type: Object,
            required: true,
        },
        enterpriseId: "",
    },
    data() {
        return {
            code: "",
            formData: {},
            formRules: {
                name: [
                    {required: true, message: "电子档名称", trigger: "blur"}
                ],
            },
            loading: false,
            uploadUrl: "",
            fileList: [],
            headers: {},
        };
    },
    components: {
        draggable,
    },
    methods: {
        submitUpload() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    if (this.$refs.upload.uploadFiles.length > 0) {
                        this.$refs.upload.submit();
                    } else {
                        this.$message.warning(`请选择文件`);
                    }
                }
            });
        },
        onSubmit() {
            this.loading = true;
            this.formData.enterpriseId = this.enterpriseId;
            insertCompanyCert(this.formData).then(response => {
                this.loading = false;
                if (response.code === 20000) {
                    this.$message.success("添加成功");
                    this.closeDialog(true);
                } else {
                    this.$message.error(response.message);
                }
            });
        },
        uploadHandleRemove(file, fileList) {
        },
        uploadHandlePreview(file) {
        },
        uploadHandleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        uploadOnchange(file, fileList) {
            let fileName = file.name;
            let uid = file.uid
            let pos = fileName.lastIndexOf(".");
            let lastName = fileName.substring(pos, fileName.length);
            if (lastName.toLowerCase() !== ".jpg" && lastName.toLowerCase() !== ".png") {
                this.$message.error("上传文件只能是 .jpg,.png 格式");
                for (let i = 0; i < fileList.length; i++) {//从list删除
                    if (fileList[i].uid === uid) {
                        fileList.splice(i, 1)
                    }
                }
                return;
            }
            // 限制上传文件的大小
            const isLt = file.size / 1024 / 1024 / 2 <= 1;
            if (!isLt) {
                this.$message.error("上传文件大小不能超过 2MB");
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].uid === uid) {
                        fileList.splice(i, 1)
                    }
                }
            }
            return isLt;
        },
        uploadHandleSuccess(response, file, fileList) {
            if (response.code === 20000) {
                this.formData.filePath = response.data.name;
                this.onSubmit();
            } else {
                this.$message.error("文件上传失败：" + response.message);
            }
        },
        uploadHandleError() {

        },
    },
    filters: {},
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
    created() {
        this.uploadUrl = BASE_URL + "/udiwms/upload/register/file";
        this.headers = {
            ADMIN_ID: store.getters.adminId,
            ADMIN_TOKEN: store.getters.token,
        };
    },
};
</script>
<style>

.ao-text {
    width: 100%;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    float: right;
    text-align: right;
    margin-top: 10px;
}

</style>



