<template>
    <div style="overflow: auto; height: 100%; margin: 0 auto">
        <div slot="header" style="font-weight: bold">
            <span>用户注册</span>
        </div>
        <el-form
            :model="inputQuery"
            :rules="rules"
            ref="inputQuery"
            style="margin-left: 10%"
        >
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="用户名称" prop="nickName">
                        <el-input
                            size="small"
                            placeholder="请输入用户名称"
                            v-model="inputQuery.nickName"
                            style="width: 60%"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="用户密码" prop="password">
                        <el-input
                            size="small"
                            placeholder="请输入密码"
                            type="password"
                            style="width: 60%"
                            v-model="inputQuery.password"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input
                            size="small"
                            type="password"
                            placeholder="请确认密码"
                            style="width: 60%"
                            v-model="inputQuery.confirmPassword"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input
                            size="small"
                            style="width: 60%"
                            placeholder="请输入真实姓名"
                            v-model="inputQuery.realName"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="联系电话" prop="tel">
                        <el-input
                            size="small"
                            placeholder="请输入联系电话"
                            v-model="inputQuery.tel"
                            style="width: 60%"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="邮箱" prop="email">
                        <el-input
                            size="small"
                            placeholder="请输入邮箱"
                            style="width: 60%"
                            v-model="inputQuery.email"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input
                            size="small"
                            placeholder="请输入手机号"
                            v-model="inputQuery.mobile"
                            style="width: 50%"
                            @input="change()"
                        ></el-input>
                        <el-button
                            type="primary"
                            size="small"
                            icon="search"
                            :disabled="isTimer"
                            style="margin-left: 5px"
                            @click="getCheckCode"
                        >
                            <span>{{ btnTitle }}</span>
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="手机验证码" prop="checkCode">
                        <el-input
                            size="small"
                            placeholder="请输入手机验证码"
                            style="width: 55%"
                            v-model="inputQuery.checkCode"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="企业名称" prop="companyName">
                        <el-input
                            size="small"
                            placeholder="请输入企业名称"
                            style="width: 70%"
                            v-model="inputQuery.companyName"
                            @input="change()"
                        ></el-input>
                        <div style="width: 80%; float: right">
                            <el-button
                                type="primary"
                                size="small"
                                icon="search"
                                style="margin-left: 50%; margin-top: 10px"

                                @click="checkCompany"
                            >
                                校验企业名称
                            </el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="统一社会信用号" prop="creditNum">
                        <el-input
                            size="small"
                            placeholder="请输入统一社会信用号"
                            v-model="inputQuery.creditNum"
                            style="width: 60%"
                            @input="change()"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="企业类型" prop="bussinessStatus">
                        <el-select
                            size="small"
                            style="width: 60%"
                            v-model="inputQuery.bussinessStatus"
                            placeholder="企业类型"
                        >
                            <!--                            <el-option label="医院" value="1"></el-option>-->
                            <el-option label="经营企业" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item prop="area" label="所属地区">
                        <el-cascader
                            size="small"
                            :options="options"
                            v-model="selectedOptions"
                            placeholder="请选择所属地区"
                            style="width: 60%"
                            @change="handleChange"
                        >
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item prop="detailAddr" label="详细地址">
                        <el-input
                            size="small"
                            placeholder="请输入详细地址"
                            v-model="inputQuery.detailAddr"
                            @input="change()"
                            style="width: 60%"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div style="width: 100%">
                <el-form-item>
                    <el-button
                        type="primary"
                        size="small"
                        icon="search"
                        style="margin-top: 20px; width: 200px;margin-left:15%"
                        @click="onSubmit('inputQuery')"
                    >提交
                    </el-button
                    >
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import {
    getCompany,
    modifyCompany,
    getRefid,
} from "../../api/warehouse/company";
import {getCheckcode, register} from "../../api/auth/register";
import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode,
} from "element-china-area-data";

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: "",
                companyName: "",
                creditNum: "",
                area: "",
                areaCode: "",
                detailAddr: "",
                bussinessStatus: "",
            },
            isTimer: false,
            btnTitle: "获取验证码",
            options: regionDataPlus,
            selectedOptions: [],

            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"}],
                mobile: [{required: true, 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"},
                ],
            },
        };
    },
    created() {
        this.getData();
    },
    methods: {
        onSubmit(formName) {
            // window.smtApp.finishAvt();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    register(this.inputQuery).then((response) => {
                        if (response.code === 20000) {
                            this.loading = false;
                            this.$alert(
                                "您的注册信息已提交，等待审核，请牢记您的注册ID：" + response.data + ",方便登录系统！",
                                "注册成功",
                                {
                                    confirmButtonText: "确定",
                                    callback: (action) => {
                                        // this.$router.push({ path: "../login" });
                                        window.smtApp.finishAvt();
                                    },
                                }
                            );
                        } else {
                            this.$message.error(response.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },

        getData() {
            this.loading = true;
            getCompany().then((response) => {
                this.loading = false;
                this.inputQuery = response.data;
                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);
                }
            });
        },

        checkCompany() {
            let tquery = {
                companyName: this.inputQuery.companyName,
            };
            getRefid(tquery).then((response) => {
                if (response.code === 20000) {
                    this.$message.success("校验成功！");
                } else {
                    this.$message.error(response.message);
                }
            });
        },

        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]] + CodeToText[value[1]] + CodeToText[value[2]];
            this.inputQuery.areaCode = value.toString();
        },
    },
};
</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>
