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

            <div style="display: flex; margin-top: -30px" v-if="hiddenAdd === true && hiddenAdd2 !== true">
                <el-button  style="margin: 0 20px 0 auto"type="primary" size="small" @click.native="updateAuditStatus(1)">通过</el-button>
                <el-button  style="margin: 0 20px 0 0"type="primary" size="small" @click.native="updateAuditStatus(2)">不通过</el-button>
                <el-button style="margin: 0 20px 0 0" @click="centerDialogVisible = false">取消</el-button>
            </div>

            <el-card>
                <el-button-group style="display: flex" v-if="hiddenAdd !== true">
                    <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="10">
                        <el-form-item label="姓名:" label-width="150px" prop="name">
                            <el-input v-model="formData.name" auto-complete="off" :disabled="hiddenAdd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="电话:" label-width="150px" prop="tel">
                            <el-input v-model="formData.tel" auto-complete="off" :disabled="hiddenAdd">></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="手机:" label-width="150px" prop="phone">
                            <el-input v-model="formData.phone" auto-complete="off" :disabled="hiddenAdd">></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="邮箱:" label-width="150px" prop="email">
                            <el-input v-model="formData.email" auto-complete="off" :disabled="hiddenAdd">></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="10" class="el-col">
                        <el-form-item label="证件类型:" label-width="150px" prop="certType">
                            <el-select
                                size="small"
                                v-model="formData.certType"
                                placeholder="证件类型"
                                style="width: 100%;"
                                :disabled="hiddenAdd">
                            >
                                <el-option label="身份证" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="证件号码:" label-width="150px" prop="certCode">
                            <el-input v-model="formData.certCode" auto-complete="off" :disabled="hiddenAdd">></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="10" class="el-col">
                        <el-form-item label="证件电子档:" label-width="150px">
                            <el-upload
                                v-if="hiddenAdd !== true"
                                class="upload-demo"
                                ref="upload"
                                :action="this.uploadUrl"
                                :limit="1"
                                :on-exceed="uploadHandleExceed"
                                accept=".jpg,.png"
                                :on-change="uploadOnchange"
                                :on-success="uploadHandleSuccess"
                                :file-list="fileList"
                                :data="{type:'image5'}"
                                :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <div>只能上传 .jpg,.png 文件，且不超过 2 MB</div>
                            </el-upload>
                            <el-button
                                v-if="hiddenAdd === true"
                                :disabled="formData.filePath === null"
                                type="primary"
                                @click.native="openFile(formData.filePath)"
                                style="margin: 0 60px 10px auto; height: 35px"
                                :loading="loading"
                            >查看
                            </el-button
                            >
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <el-form-item label="授权书电子档:" label-width="150px">
                            <el-upload
                                v-if="hiddenAdd !== true"
                                class="upload-demo2"
                                ref="upload2"
                                :action="this.uploadUrl"
                                :limit="1"
                                :on-exceed="uploadHandleExceed"
                                accept=".jpg,.png"
                                :on-change="uploadOnchange"
                                :on-success="uploadHandleSuccess2"
                                :file-list="fileList2"
                                :data="{type:'image5'}"
                                :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <div>只能上传 .jpg,.png 文件，且不超过 2 MB</div>
                            </el-upload>
                            <el-button
                                v-if="hiddenAdd === true"
                                :disabled="formData.filePath2 === null"
                                type="primary"
                                @click.native="openFile(formData.filePath2)"
                                style="margin: 0 60px 10px auto; height: 35px"
                                :loading="loading"
                            >查看
                            </el-button
                            >
                        </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 {insertCompanySalesman, updateCompanySalesman} from "../../api/warehouse/companySalesman";

export default {
    name: "idQuery",
    props: {
        closeDialog: {
            type: Function,
            required: true,
        },
        idQuery: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            code: "",
            formData: {
                certType: "1"
            },
            formRules: {
                name: [
                    {required: true, message: "请输入姓名", trigger: "blur"}
                ],
                tel: [
                    {required: true, message: "请输入电话", trigger: "blur"}
                ],
                certType: [
                    {required: true, message: "请选择证件类型", trigger: "blur"}
                ],
                certCode: [
                    {required: true, message: "请输入证件号码", trigger: "blur"}
                ],
            },
            loading: false,
            uploadUrl: "",
            fileList: [],
            fileList2: [],
            hiddenAdd: false,
            hiddenAdd2: false,
        };
    },
    components: {
        draggable,
    },
    methods: {
        submitUpload() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    if (this.$refs.upload.uploadFiles.length > 0) {
                        this.$refs.upload.submit();
                    } else if (this.$refs.upload2.uploadFiles.length > 0) {
                        this.$refs.upload2.submit();
                    } else if (this.$isBlank(this.idQuery)) {
                        this.$message.warning(`请选择文件`);
                    } else {
                        this.onSubmit();
                    }
                }
            });
        },
        openFile(filePath) {
            window.open(BASE_URL + "/udiwms/image/register/file/getImage?type=image5&name=" + filePath)
        },
        updateAuditStatus(num) {
            this.formData.auditStatus = num;
            updateCompanySalesman(this.formData).then(response => {
                this.loading = false;
                if (response.code === 20000) {
                    this.$message.success("成功");
                    this.closeDialog(true);
                } else {
                    this.$message.error(response.message);
                }
            });
        },
        onSubmit() {
            this.loading = true;
            if (this.$isBlank(this.idQuery)) {
                this.formData.customerId = store.getters.customerId;
                insertCompanySalesman(this.formData).then(response => {
                    this.loading = false;
                    if (response.code === 20000) {
                        this.$message.success("添加成功");
                        this.closeDialog(true);
                    } else {
                        this.$message.error(response.message);
                    }
                });
            } else {
                updateCompanySalesman(this.formData).then(response => {
                    this.loading = false;
                    if (response.code === 20000) {
                        this.$message.success("修改成功");
                        this.closeDialog(true);
                    } else {
                        this.$message.error(response.message);
                    }
                });
            }
        },
        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) {
                if (this.$isBlank(this.idQuery)) {
                    this.formData.filePath = response.data.name;
                } else {
                    this.formData.newFilePath = response.data.name;
                }
                if(this.$refs.upload2.uploadFiles.length > 0) {
                    this.$refs.upload2.submit();
                } else {
                    this.onSubmit();
                }
            } else {
                this.$message.error("文件上传失败：" + response.message);
            }
        },
        uploadHandleSuccess2(response, file, fileList) {
            if (response.code === 20000) {
                if (this.$isBlank(this.idQuery)) {
                    this.formData.filePath2 = response.data.name;
                } else {
                    this.formData.newFilePath2 = response.data.name;
                }
                this.onSubmit();
            } else {
                this.$message.error("文件上传失败：" + response.message);
            }
        },
    },
    filters: {},
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
    created() {
        this.uploadUrl = BASE_URL + "/udiwms/upload/register/file";
        if (this.$isNotBlank(this.idQuery)) {
            this.formData = this.idQuery.formData;
           if (this.$isNotBlank(this.idQuery.toView)) {
               this.hiddenAdd = true;
               if (this.$isNotBlank(this.idQuery.toView2)) {
                   this.hiddenAdd2 = true;
               }
           } else {
               this.hiddenAdd = false;
           }
        }
    },
};
</script>
<style>

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

</style>



