<template>
    <div style="overflow: auto; height: 100%; margin: 0 auto">
        <el-card
            class="el-card"
            style="
        width: 60%;
        margin-top: 35px;
        margin-left:20%;
        margin-bottom: 35px;
        text-align: center;
      "
        >
            <div slot="header" style="font-weight: bold">
                <div style="text-align: center">
                    <img
                        alt="element-logo"
                        style="width: 10%"
                        src="../../assets/logo.png"
                    />
                </div>
                <h3 class="title">医疗器械UDI系统用户注册</h3>
            </div>
            <el-form
                :model="inputQuery"
                :rules="rules"
                ref="inputQuery"
                style="margin-left: 20%;"
            >
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>用户名称:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="nickName">
                            <el-input
                                size="small"
                                placeholder="请输入用户名称"
                                v-model="inputQuery.nickName"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>用户密码:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="password">
                            <el-input
                                size="small"
                                placeholder="请输入密码"
                                type="password"
                                v-model="inputQuery.password"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>确认密码:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="confirmPassword">
                            <el-input
                                size="small"
                                type="password"
                                placeholder="请确认密码"
                                v-model="inputQuery.confirmPassword"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>负责人:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="realName">
                            <el-input
                                size="small"
                                placeholder="请输入负责人姓名"
                                v-model="inputQuery.realName"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>联系电话:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="tel">
                            <el-input
                                size="small"
                                placeholder="请输入联系电话"
                                v-model="inputQuery.tel"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>邮箱:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="email">
                            <el-input
                                size="small"
                                placeholder="请输入邮箱"
                                v-model="inputQuery.email"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>企业类型:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="bussinessStatus">
                            <el-select
                                size="small"
                                style="width: 100%"
                                v-model="inputQuery.bussinessStatus"
                                placeholder="企业类型"
                            >
                                <el-option label="生产企业" value="1"></el-option>
                                <el-option label="流通企业" value="2"></el-option>
                                <el-option label="医疗机构" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>企业名称:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col v-if="!manualEntry" :span="10">
                        <el-form-item prop="fromCorp">
                            <el-select
                                v-model="inputQuery.companyName"
                                filterable
                                remote
                                clearable="true"
                                reserve-keyword
                                placeholder="请输入企业名称"
                                :remote-method="findMethod"
                                size="small"
                                style="width: 100%"
                                @change="selectOne"
                                :loading="loading"
                            >
                                <el-option
                                    v-for="item in fromOptions"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item"
                                >
                                    <span style="float: left">{{ item.name }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col v-if="manualEntry" :span="10">
                        <el-form-item prop="fromCorp">
                            <el-input v-model="inputQuery.companyName" placeholder="请输入企业名称"
                                      style="width: 100%"
                            >
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="3">
                        <el-checkbox v-model="manualEntry">
                            手动输入
                        </el-checkbox>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>统一社会信用号:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="creditNum">
                            <el-input
                                size="small"
                                placeholder="请输入统一社会信用号"
                                v-model="inputQuery.creditNum"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>所属地区:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="area">
                            <el-cascader
                                size="small"
                                :options="options"
                                v-model="selectedOptions"
                                placeholder="请选择所属地区"
                                style="width: 100%"
                                @change="handleChange"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>详细地址:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="detailAddr">
                            <el-input
                                size="small"
                                placeholder="请输入详细地址"
                                v-model="inputQuery.detailAddr"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>手机号:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="mobile">
                            <el-input
                                size="small"
                                placeholder="请输入手机号"
                                v-model="inputQuery.mobile"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-button
                            type="primary"
                            size="small"
                            icon="search"
                            :disabled="isTimer"
                            style="margin-top: 0.5px"
                            @click="getCheckCode"
                        >
                            <span>{{ btnTitle }}</span>
                        </el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="register-text">
                            <span>手机验证码:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="checkCode">
                            <el-input
                                size="small"
                                placeholder="请输入手机验证码"
                                v-model="inputQuery.checkCode"
                                @input="change()"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="18">
                        <el-form-item label="营业执照电子档案:" label-width="195px">
                            <el-upload
                                class="upload-demo"
                                ref="upload"
                                :action="this.uploadUrl"
                                :on-preview="uploadHandlePreview"
                                :on-remove="uploadHandleRemove"
                                :headers="headers"
                                :limit="1"
                                :on-exceed="uploadHandleExceed"
                                accept=".jpg,.png"
                                :on-change="uploadOnchange"
                                :on-success="uploadHandleSuccess"
                                :on-error="uploadHandleError"
                                :file-list="fileList"
                                :data="{type:'image1'}"
                                :auto-upload="true"
                                :show-file-list="true"
                            >
                                <div>
                                    <el-button slot="trigger" size="small" type="primary"
                                               :disabled="companyEditDisabled">选取文件
                                    </el-button>
                                    <el-button
                                        :disabled="inputQuery.licenseUrl === null || inputQuery.licenseUrl === ''"
                                        @click.native="openFile(inputQuery.licenseUrl)"
                                        size="small" type="primary">查看文件
                                    </el-button>
                                </div>
                                <!--                                <div slot="tip" class="el-upload__tip">只能上传 .jpg,.png 文件，且不超过 2 MB</div>-->
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="width: 100%; margin-left: -100px">
                    <el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            icon="search"
                            style="margin-top: 20px; width: 200px"
                            @click="onSubmit('inputQuery')"
                        >提交
                        </el-button
                        >
                    </el-form-item>
                </div>
            </el-form>
        </el-card>
        <div style="color: #2d3a4b; text-align: center">
            <a href="http://www.xmglxp.com" style="color: #000000; font-size: 12px"
            >厦门高立新鹏软件科技有限公司 &nbsp;13459286066</a
            >
        </div>
        <div style="color: #2d3a4b; text-align: center">
            <a
                href="http://www.beian.gov.cn/portal/registerSystemInfo"
                style="color: #000000; font-size: 12px"
            >
                闽公网安备35020302034269号&nbsp;&nbsp;
            </a>
            <a
                href="http://beian.miit.gov.cn"
                style="color: #000000; font-size: 12px"
            >
                备案号:闽ICP备17019234号
            </a>
        </div>


        <el-dialog
            title="注册成功"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="formVisible"
            :before-close="formDefine"
            width="50%"
            top="5vh"
        >
            <el-form :model="formData" ref="dataForm">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="20" class="el-col" type="flex">
                        <div class="text item">
                            <span>您的注册信息已提交，等待审核，请牢记您的账号密码，方便登录系统。</span>
                        </div>
                    </el-col>

                </el-row>
                <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 20px">

                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <span>{{ this.acoountInfo }}</span>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col" type="flex">

                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="tag-read" type="primary" size="mini"
                           v-clipboard:copy="acoountInfo"
                >复制
                </el-button>

            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getCompany,
    modifyCompany,
    getRefid, checkCompany, getRegisterConfig
} from "../../api/warehouse/company";
import {getCheckcode, register} from "../../api/auth/register";
import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
} from "element-china-area-data";
import Clipboard from "clipboard";
import {BASE_URL} from "../../config/app";
import {getCorps} from "@/api/thrsys/thrCorps";
import {getCandidateCompanyName} from "../../api/udidl/udid";


export default {
    data() {
        let validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.inputQuery.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            inputQuery: {
                nickName: null,
                password: "",
                realName: "",
                tel: "",
                mobile: "",
                userId: "",
                confirmPassword: "",
                checkCode: "",
                email: "",
                companyId: "",
                companyName: "",
                creditNum: "",
                area: "",
                areaCode: "",
                detailAddr: "",
                bussinessStatus: "1",
                checkCompanyNameStatus: false,
                licenseUrl: null
            },
            headers: {},
            uploadUrl: null,
            fileUrl: null,
            isTimer: false,
            btnTitle: "获取验证码",
            options: regionDataPlus,
            selectedOptions: [],
            fromOptions: [],
            fromUdplatOptions: [],
            acoountInfo: "账号：" + "------" + "\n密码：" + "-----",
            rules: {
                nickName: [
                    {required: true, message: "请输入用户名称", trigger: "blur"}
                ],
                password: [{required: true, message: "请输入密码", trigger: "blur"}],
                realName: [
                    {required: true, message: "请输入负责人姓名", trigger: "blur"}
                ],
                tel: [{required: true, message: "请输入联系电话", trigger: "blur"}
                    // { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入正确的电话号码", trigger: "blur" }
                ],
                mobile: [{required: true, message: "请输入手机号码", trigger: "blur"}
                    // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入正确的手机号", trigger: "blur" }
                ],
                confirmPassword: [
                    {required: true, message: "请确认密码", trigger: "blur"},
                    {validator: validatePass2, trigger: "blur"}
                ],
                checkCode: [
                    {required: true, message: "请输入手机验证码", trigger: "blur"}
                ],
                email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
                companyName: [
                    {required: true, message: "请输入企业名称", trigger: "blur"}
                ],
                creditNum: [
                    {required: true, message: "请输入统一社会信用号", trigger: "blur"}
                ],
                area: [{required: true, message: "请选择所属地区", trigger: "blur"}],
                detailAddr: [
                    {required: true, message: "请输入详细地址", trigger: "blur"}
                ],
                bussinessStatus: [
                    {required: true, message: "请选择企业类型", trigger: "blur"}
                ]
            },
            formVisible: false,
            formData: {
                account: "",
                password: ""
            },
            manualEntry: false
        };
    },
    created() {
        this.registerConfig();
        this.uploadUrl = BASE_URL + "/udiwms/upload/register/file";
        this.fileUrl = BASE_URL + "/udiwms/image/register/file/getImage?type=image1&name=";
        this.headers = {
            ADMIN_ID: store.getters.adminId,
            ADMIN_TOKEN: store.getters.token
        };
    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    register(this.inputQuery).then((response) => {
                        if (response.code === 20000) {
                            this.loading = false;
                            this.formData = {
                                account: response.data,
                                password: this.inputQuery.password
                            };
                            this.formVisible = true;

                            this.acoountInfo = "账号：" + this.formData.account + "\n密码：" + this.formData.password;

                        } else {
                            this.$message.error(response.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        formDefine() {
            this.formVisible = false;
            this.$router.push({path: "../login"});
        },
        getData() {
            this.loading = true;
            getCompany().then((response) => {
                this.loading = false;
                this.inputQuery = response.data;
                this.inputQuery.bussinessStatus = "2";
                this.selectedOptions = this.inputQuery.areaCode.split(",");
            });
        },
        getCheckCode(mobile) {
            let tquery = {
                phoneNum: this.inputQuery.mobile
            };
            getCheckcode(tquery).then((response) => {
                if (response.code === 20000) {
                    this.validateBtn();
                } else {
                    this.$message.error(response.message);
                }
            });
        },
        checkCompanyName() {
            if (this.$isBlank(this.inputQuery.companyName)) {
                this.$message.error("企业名称不能为空");
                return;
            }
            let tQuery = {
                companyName: this.inputQuery.companyName
            };
        },
        registerConfig() {
            getRegisterConfig().then((response) => {
                if (response.code === 20000) {
                    this.registerConfigMap = response.data;
                }
            });
        },
        validateBtn() {
            //倒计时
            let time = 60;
            let timer = setInterval(() => {
                if (time === 0) {
                    clearInterval(timer);
                    this.isTimer = false;
                    this.btnTitle = "获取验证码";
                } else {
                    this.btnTitle = time + "秒后重试";
                    this.isTimer = true;
                    time--;
                }
            }, 1000);
        },
        handleChange(value) {
            this.inputQuery.area = CodeToText[value[0]];
            if (CodeToText[value[1]] != null && CodeToText[value[1]] != ""
                && CodeToText[value[1]] != "undefined") {
                this.inputQuery.area += CodeToText[value[1]];
            }
            if (CodeToText[value[2]] != null && CodeToText[value[2]] != ""
                && CodeToText[value[2]] != "undefined") {
                this.inputQuery.area += CodeToText[value[2]];
            }
            this.inputQuery.areaCode = value.toString();
        },
        copy() {

            let sel = this;
            let clipboard = new Clipboard(".tag-read");

            clipboard.on("success", e => {
                //  释放内存
                clipboard.destroy();
            });
            clipboard.on("error", e => {
                // 不支持复制
                // 释放内存
                clipboard.destroy();
            });
            this.$confirm("账号已复制，请牢记自己的账号密码！是否跳转登录", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                // this.formVisible = false;
                // this.$router.push({path: "../login"});
                sel.formDefine();
            }).catch(() => {
            });
        },
        selectOne(event) {
            this.inputQuery.companyName = event.name;
            this.inputQuery.companyId = event.erpId;
        },
        findMethod(query) {
            this.fromOptions = [];
            let cQuery = {
                key: query,
                bussinessStatus: this.inputQuery.bussinessStatus
            };
            getCandidateCompanyName(cQuery).then((response) => {
                this.loading = false;
                this.fromOptions = response.data || [];
            }).catch((error) => {
            });
        },

        findUdplatMethod(query) {
            this.fromUdplatOptions = [];
            let cQuery = {
                name: query,
                thirdSysFk: null
            };
            getCorps(cQuery)
                .then((response) => {
                    this.loading = false;
                    this.fromUdplatOptions = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        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.inputQuery.licenseUrl = response.data.name;
            } else {
                this.$message.error("文件上传失败：" + response.message);
            }
        },
        uploadHandleError() {
        },
        openFile(path) {
            window.open(this.fileUrl + path);
        }
    }
};
</script>
<style>
.register-text {
    width: 100%;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    float: right;
    text-align: right;
    margin-top: 10px;
}

.el-card {
    margin-right: 20px;
    margin-top: 15px;
    /*transition: all .5s;*/
}

.el-row {
    display: flex;
    flex-wrap: wrap;
}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}
</style>
