<template>
<div class="register">
    <div class="registerCon">
        <el-row>
            <el-col :span="8" class="title">
                <div class="titcon">
                    <img src="../assets/logo1.png" alt width="100px" />
                    <h1>欢迎访问危化品企业监管平台！</h1>
                    <h2>Wellcom to The Hazardous Chemicals Supervision System.</h2>
                </div>
            </el-col>
            <el-col :span="16" class="pageCon">
                <h3>企业注册</h3>
                <el-steps :active="stepActive" simple finish-status="success">
                    <el-step title="第一步 登记企业注册信息" icon="el-icon-edit"></el-step>
                    <el-step title="第二步 授权企业管理员" icon="el-icon-edit"></el-step>
                </el-steps>
                <div class="registerForm">
                    <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="10em" v-show="stepActive == 0">
                        <el-form-item label="单位名称" prop="unitName">
                            <el-input v-model="registerForm.unitName"></el-input>
                        </el-form-item>
                        <el-form-item label="统一社会信用代码" prop="orgCode">
                            <el-input v-model="registerForm.orgCode" placeholder="请填写正确格式的代码" @blur="blurFun('orgCode')"></el-input>
                            <span class="colorM" v-show="checkRule.orgCode == 'pass'">
                                <i class="el-icon el-icon-success"></i> 验证通过！
                            </span>
                            <span class="colorR" v-show="checkRule.orgCode && checkRule.orgCode != 'pass'">
                                <i class="el-icon el-icon-error"></i>
                                {{checkRule.orgTxt}}
                            </span>
                        </el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="法人代表姓名" prop="legalPerson">
                                    <el-input v-model="registerForm.legalPerson" placeholder="请填写中文姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="法人邮箱" prop="legalPersonEmail">
                                    <el-input v-model="registerForm.legalPersonEmail"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="所在区域" prop="a">
                            <City @changeFun="changeFun" :valueqv="cityval"></City>
                        </el-form-item>
                        <el-form-item label="所属街道" prop="streetName">
                            <el-input v-model="registerForm.streetName"></el-input>
                        </el-form-item>
                        <el-form-item label="单位注册地址" prop="regAddress">
                            <el-input v-model="registerForm.regAddress"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="生产经营地址" prop="runAddress">
                                    <el-input v-model="registerForm.runAddress"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="法人手机" prop="legalPersonPhone">
                                    <el-input v-model="registerForm.legalPersonPhone"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="单位营业执照" prop="orgFilePath">
                                    <el-upload ref="uploaderA" class="uploader" :limit="1" :action="actionUrl" :on-success="(a,b,c) => onSuccess(a,b,c,'orgFileList')" :on-error="onError" :on-remove="handleRemove" :before-remove="(a,b,c) => beforeRemove(a,b,c,'orgFileList')" :on-exceed="onExceed" :multiple="false" list-type="picture" :file-list="fileList">
                                        <i class="el-icon-plus"></i>
                                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="授权书上传" prop="authorizeFile">
                                    <el-upload ref="uploaderB" class="uploader" :limit="1" :action="actionUrl" :on-success="(a,b,c) => onSuccess(a,b,c,'cerFileList')" :on-error="onError" :on-remove="handleRemove" :before-remove="(a,b,c) => beforeRemove(a,b,c,'cerFileList')" :on-exceed="onExceed" :multiple="false" list-type="picture" :file-list="fileListTwo">
                                        <i class="el-icon-plus"></i>
                                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item class="cent">
                            <el-button type="primary" @click="nextStep">下一步</el-button>
                            <el-button @click="restForm">重置表单</el-button>
                            <el-button @click="$router.push('/login')">返回登录页</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 第二步 表单 -->
                    <el-form ref="registerFormTwo" :model="registerFormTwo" :rules="rulesTwo" label-width="9em" v-show="stepActive == 1">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="身份证号" prop="idCard">
                                    <el-input v-model="registerFormTwo.idCard" placeholder="请填写正确格式的身份证号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="userName">
                                    <el-input v-model="registerFormTwo.userName" placeholder="请填写中文姓名"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="手机号" prop="mobliePhone">
                                    <el-input v-model="registerFormTwo.mobliePhone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="登录账号" prop="account">
                                    <el-input v-model="registerFormTwo.account" @blur="blurFun('account')"></el-input>
                                    <span class="colorM" v-show="checkRule.account == 'pass'">
                                        <i class="el-icon el-icon-success"></i> 验证通过！
                                    </span>
                                    <span class="colorR" v-show="checkRule.account && checkRule.account != 'pass'">
                                        <i class="el-icon el-icon-error"></i>
                                        {{checkRule.accountTxt}}
                                    </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="登录密码" prop="accountPwd">
                                    <el-input type="password" v-model="registerFormTwo.accountPwd"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="登录密码确认" prop="qrmm">
                                    <el-input type="password" v-model="registerFormTwo.qrmm"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="registerFormTwo.email"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item class="cent">
                            <el-button @click="preStep">上一步</el-button>
                            <el-button type="primary" @click="submit()">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="bckg">
        <img src="../assets/bg.jpeg" alt />
    </div>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide,
    Watch
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
@Component({
    components: {
        City
    },
})
export default class Register extends Vue {
    @Provide() stepActive = 0;
    @Provide() uploaderA = "uploaderA";
    @Provide() registerForm: any = {
        unitName: "",
        orgCode: "",
        legalPerson: "",
        legalPersonEmail: "",
        streetName: "",
        regAddress: "",
        runAddress: "",
        legalPersonPhone: "",
        orgFilePath: "",
        authorizeFile: "",
    };
    @Provide() rules: any = {
        unitName: [{
            required: true,
            message: "此项为必填项！",
            trigger: "blur"
        }],
        legalPersonEmail: [{
            type: "email",
            message: "请填写正确的邮箱格式！",
            trigger: "blur"
        }, ],
        orgCode: [{
                required: true,
                message: "此项为必填项！",
                trigger: "blur"
            },
            {
                pattern: /[0-9A-Z]{18}/,
                message: "填写正确的组织机构代码"
            },
        ],
        legalPerson: [{
                required: true,
                message: "此项为必填项！",
                trigger: "blur"
            },
            {
                pattern: /^[\u4e00-\u9fa5]+$/,
                message: "填写中文姓名"
            },
        ],
    };
    @Provide() fileList: any = [];
    @Provide() fileListTwo: any = [];
    @Provide() registerFormTwo: any = {
        idCard: "",
        userName: "",
        mobliePhone: "",
        account: "",
        accountPwd: "",
        email: "",
    };
    @Provide() rulesTwo: any = {
        email: [{
            type: "email",
            message: "请填写正确的邮箱格式！",
            trigger: "blur"
        }, ],
        qrmm: [{
            required: true,
            validator: this.validatePass,
            trigger: "change"
        }],
        account: [{
            required: true,
            message: "此项为必填项！",
            trigger: "blur"
        }],
        userName: [{
            required: true,
            message: "此项为必填项！",
            trigger: "blur"
        }],
        accountPwd: [{
            required: true,
            message: "此项为必填项！",
            trigger: "blur",
        }, ],
        idCard: [{
                required: true,
                message: "此项为必填项！",
                trigger: "blur"
            },
            {
                pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                message: "填写正确格式的身份证号",
            },
        ],
    };
    @Provide() qrmm: string = "";
    @Provide() checkRule: any = {
        orgCode: "",
        orgTxt: "",
        account: "",
        accountTxt: "",
    };
    @Provide() actionUrl: any = "";
    @Provide() cerFileList: any = [];
    @Provide() orgFileList: any = [];
    @Provide() cityval: any = [];

    @Watch("orgFileList") changeto(newVal: any) {
        if (newVal.length > 0) {
            this.registerForm.orgFilePath = newVal[0].response.data.savePath;
            this.registerForm.orgFileName = newVal[0].response.data.originalName;
        } else {
            this.registerForm.orgFilePath = "";
            this.registerForm.orgFileName = "";
        }
    }
    @Watch("cerFileList") changetoB(newVal: any) {
        if (newVal.length > 0) {
            this.registerForm.authorizeFile = newVal[0].response.data.savePath;
            this.registerForm.authorizeFileOriginalName =
                newVal[0].response.data.originalName;
        } else {
            this.registerForm.authorizeFile = "";
            this.registerForm.authorizeFileOriginalName = "";
        }
    }
    validatePass(rule: any, value: any, callback: any) {
        if (value == "") {
            callback(new Error("请再次输入密码"));
        } else if (value !== this.registerFormTwo.accountPwd) {
            callback(new Error("两次输入密码不一致!"));
        } else {
            callback();
        }
    }
    blurFun(value: any) {
        let that = this;
        if (value == "orgCode") that.checkOrgCode();
        if (value == "account") that.checkOrgAccount();
    }
    checkOrgCode() {
        let that = this,
            pattern = /[0-9A-Z]{8}-[0-9A-Z]/;
        if (pattern.test(that.registerForm.orgCode)) {
            METHOD.axiosGet(
                that,
                `/reg/checkOrgCode/${that.registerForm.orgCode}`,
                function (res: any) {
                    if (res.code == 0) that.checkRule.orgCode = "pass";
                    else {
                        that.checkRule.orgCode = "notpass";
                        that.checkRule.orgTxt = res.msg;
                    }
                }
            );
        }
    }
    checkOrgAccount() {
        let that = this;
        if (that.registerFormTwo.account) {
            METHOD.axiosGet(
                that,
                `/reg/checkUserAccount/${that.registerFormTwo.account}`,
                function (res: any) {
                    if (res.code == 0) that.checkRule.account = "pass";
                    else {
                        that.checkRule.account = "notpass";
                        that.checkRule.accountTxt = res.msg;
                    }
                }
            );
        }
    }
    nextStep() {
        let that = this;
        (that as any).$refs["registerForm"].validate((valid: Boolean) => {
            if (valid) {
                that.stepActive++;
            }
        });
    }
    restForm() {
        let that = this;
        that.registerForm = {};
        that.fileList = [];
        that.fileListTwo = [];
        that.checkRule.orgCode = "";
        that.cityval = [];
    }
    preStep() {
        let that = this;
        that.stepActive--;
    }
    submit() {
        let that = this;
        (that as any).$refs["registerFormTwo"].validate((valid: Boolean) => {
            if (valid) {
                let param = Object.assign(that.registerForm, that.registerFormTwo);
                METHOD.axiosPost(that, `/reg/enterpriseReg`, param, function (
                    res: any
                ) {
                    if (res.code == 0) {
                        that.$message({
                            type: "success",
                            message: "企业注册成功！即将转到登录页。",
                            duration: 5000,
                            onClose() {
                                that.$router.push("/");
                            },
                        });
                    }
                });
            }
        });
    }
    /*
    上传
    */
    onSuccess(res: any, file: any, fileList: any, key: string) {
        this.$data[key] = fileList;
    }
    onError(err: any, file: any, fileList: any) {
        this.$message.error("上传失败!");
    }
    handleRemove(file: any, fileList: any, key: string) {
        this.$data[key] = fileList;
    }
    onExceed(file: any, fileList: any) {
        this.$message.warning("只允许上传一个文件，如需更改请先删除！");
    }
    beforeRemove(file: any, fileList: any) {
        let that = this,
            param = file.response.data.savePath.replace(/\\/g, "%");
        return that.$confirm(`确定移除 ${file.name}？`).then(() => {
            METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
                res: any
            ) {
                if (res.code == 0) that.$message.success("删除成功");
                else return false;
            });
        });
    }
    /*选择城市*/
    changeFun(v: any) {
        this.registerForm.provinceId = v[0];
        this.registerForm.cityId = v[1];
        this.registerForm.countyId = v[2];
    }
    created() {
        this.actionUrl = METHOD.URL + "/file/uploadFile";
        let sessionData = sessionStorage.getItem("enterCheckInfo");
        if (sessionData) {
            let formData = JSON.parse(sessionData);
            for (let key in formData) {
                if (this.registerForm[key] != undefined) {
                    this.registerForm[key] = formData[key];
                }
                if (this.registerFormTwo[key] != undefined) {
                    this.registerFormTwo[key] = formData[key];
                }
            }
            if (formData.provinceId) {
                this.cityval = [
                    formData.provinceId,
                    formData.cityId,
                    formData.countyId,
                ];
            }
            if (formData.orgFilePath) {
                this.fileList.push({
                    name: formData.orgFileName,
                    url: formData.orgFilePath,
                });
            }
            if (formData.authorizeFile) {
                this.fileListTwo.push({
                    name: formData.authorizeFileOriginalName,
                    url: formData.authorizeFile,
                });
            }
        }
    }
}
</script>

<style lang="scss">
@import "@/utils/public.scss";

.registerCon {
    width: 90%;
    margin: 0 auto;
    height: 80vh;
    position: relative;
    top: 10vh;
    box-sizing: content-box;
    position: relative;
    z-index: 1;

    .el-row {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .el-col {
            height: 100%;
            overflow: hidden;
        }
    }

    .title {
        background: $theme-color;
        opacity: 0.8;
        padding: 0 10px;
        color: white;
        text-align: center;
        display: flex;
        align-items: center;

        h1 {
            font-weight: normal;
            font-family: "黑体";
        }

        h2 {
            font-weight: normal;
            font-family: Helvetica, sans-serif;
        }
    }

    .pageCon {
        background: white;

        h3 {
            font-size: 1rem;
            text-align: center;
            font-weight: normal;
            margin: 10px;
        }
    }
}

.registerForm {
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
    height: calc(100% - 47px);
    overflow: auto;
}

.bckg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    img {
        width: 100%;
        height: 100vh;
        filter: blur(20px);
        -webkit-filter: blur(4px);
    }
}
</style>
