<style lang="scss">
@import '@/styles/index.scss'; //导入样式
$bg: #1f2e3d;
$light_gray: #fff;
$cursor: #fff;

.register {
    position: relative; //子div垂直居中
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    background-color: $bg;
    background-size: cover;

    &__area {
        position: absolute; //该div在上级div中垂直居中
        top: 50%; //该div在上级div中垂直居中
        left: 50%; //该div在上级div中垂直居中
        transform: translate(-50%, -50%); //该div在上级div中垂直居中
        width: 600px;
        //height: 480px;
        margin: auto;
        //margin-top: (calc(100vh) - 200)/2;
        padding: 2px;

        //修改el样式
        .el-input {
            display: inline-block;
            height: 40px;
            width: 96%;

            input {
                background: transparent;
                border: 0px;
                -webkit-appearance: none;
                border-radius: 0px;
                padding: 10px 5px;
                height: 40px;
                font-size: 13px;
                //font-weight: bold;
                color: #fff;
                caret-color: $cursor;

                &:-webkit-autofill {
                    box-shadow: 0 0 0px 1000px $bg inset !important;
                    -webkit-text-fill-color: $cursor !important;
                }
            }
        }

        .el-input::placeholder {
            color: #ffffff;
        }

        .el-form-item {
            border: 1px solid rgba(255, 255, 255, 0.1);
            //background: $color-form-item-bg;
            border-radius: 5px;
            color: rgba(255, 255, 255, 0.1);
        }

        .loginBtn {
            background: $color-button-bg;
            height: 64px;
            line-height: 32px;
            font-size: $font-size-large;
        }

        &-title {
            font-size: 36px;
            color: $light_gray;
            margin: 0px auto 10px auto;
            text-align: center;
            font-weight: bold;
        }

        &-bottom {
            width: 100%;
            box-sizing: border-box;
            padding: 25px 30px;

            &-item {
                width: 100%;
                display: flex;
                justify-items: center;

                &-left {
                    flex: none;
                    width: 90px;
                    height: 40px;
                    line-height: 40px;
                    vertical-align: middle;
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                }

                &-right {
                    flex: 1;
                }
            }
        }

        &-right {
            width: 100%;
            box-sizing: border-box;
            padding: 25px 30px;

            &-regbtn {
                width: 80px;
                color: #FFFFFF;
                background-color: rgb(55, 140, 196);
            }

            &-backbtn {
                width: 80px;
                background-color: #FFFFFF;
            }
        }
    }
}


.el-form-item {
    border-radius: 5px;

    .el-form-item__label {
        font-size: 16px;
        color: #fff;
    }
}
</style>

<template>
    <div class="register">
        <div class="register__area">
            <div class="register__area-title">系统管理员注册</div>
            <div class="register__area-bottom">
                <el-form ref="dataForm" :model="dialogData.editData.data" status-icon :rules="dialogData.editData.rules"
                    label-position="left">
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">公司名称：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="name">
                                <el-input v-model="dialogData.editData.data.name" placeholder="请输入公司名称，注册后公司名称无法修改，必填"
                                    clearable></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">公司地址：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="address">
                                <el-input v-model="dialogData.editData.data.address"
                                    placeholder="请输入公司地址，必填"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">联系人：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="contact_person">
                                <el-input v-model="dialogData.editData.data.contact_person"
                                    placeholder="请输入联系人姓名，必填"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">联系电话：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="contact_tel">
                                <el-input v-model="dialogData.editData.data.contact_tel"
                                    placeholder="请输入联系人电话，必填"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">登录账号：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="user_name">
                                <el-input v-model="dialogData.editData.data.user_name"
                                    placeholder="请输入系统管理员登录账户，必填"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">账号昵称：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="nickname">
                                <el-input v-model="dialogData.editData.data.nickname"
                                    placeholder="请输入系统管理员登录账户昵称，必填"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="register__area-bottom-item">
                        <div class="register__area-bottom-item-left">登录密码：</div>
                        <div class="register__area-bottom-item-right">
                            <el-form-item prop="password">
                                <el-input v-model="dialogData.editData.data.password"
                                    placeholder="请输入登录密码,最少4位,最多16位，必填"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <div style="padding-top: 10px;text-align:right">
                    <el-button type="success" @click="companyRegister">注册</el-button>
                    <el-button type="warning" @click="goLogin">返回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { companyRegister } from "@/api/company"

export default {
    name: 'register',
    data: function () {
        return {
            dialogData: {
                editData: {
                    data: {
                        name: '', //公司名称
                        user_name: '', //用户名
                        nickname: '',//用户昵称
                        password: '', //用户密码
                        address: '',
                        contact_person: '',
                        contact_tel: ''
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入公司名称', trigger: 'blur' },
                            { min: 2, max: 32, message: '公司名称字符长度2-32', trigger: 'blur' }
                        ],
                        user_name: [
                            { required: true, message: '请输入登录账户', trigger: 'blur' },
                            { min: 2, max: 32, message: '登录账户字符长度2-32', trigger: 'blur' }
                        ],
                        nickname: [
                            { required: true, message: '请输入登录账户的昵称', trigger: 'blur' },
                            { min: 2, max: 32, message: '字符长度2-32', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入登录密码', trigger: 'blur' },
                            { min: 4, max: 32, message: '登录密码字符长度4-32', trigger: 'blur' }
                        ],
                        address: [
                            { required: true, message: '请输入公司地址', trigger: 'blur' },
                            { min: 2, max: 128, message: '公司地址字符长度2-128', trigger: 'blur' }
                        ],
                        contact_person: [
                            { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                            { min: 2, max: 32, message: '联系人姓名字符长度2-32', trigger: 'blur' }
                        ],
                        contact_tel: [
                            { required: true, message: '请输入联系人电话', trigger: 'blur' },
                            { min: 6, max: 128, message: '联系人电话字符长度6-32', trigger: 'blur' }
                        ]
                    }
                }
            }
        }
    },
    computed: {
        controlSize() {
            return this.$store.getters.controlSize
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {
        init() { },
        companyRegister() {//注册
            //数据合法性检查
            const flag = this.checkDataValid(this.dialogData.editData.data)
            if (!flag) {
                this.$message({
                    message: '请正确输入注册数据',
                    type: 'error',
                    duration: 3 * 1000
                })

                return
            }

            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('注册后公司名称无法修改，请确认公司名称是否正确', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定'
                    }).then(() => {
                        var data = this.dialogData.editData.data
                        companyRegister(data).then(() => {
                            this.$message({
                                message: '公司注册成功，请登录',
                                type: 'success',
                                duration: 3 * 1000
                            })
                            this.$router.push("login") //返回登录页面
                        }).catch((err) => {
                            this.$message({
                                message: err,
                                type: 'error',
                                duration: 3 * 1000
                            })
                        })
                    }).catch(() => { })
                }
            })
        },
        checkDataValid(formData) {
            if (formData.name.length <= 0 || formData.user_name.length <= 0 || formData.nickname.length <= 0 || formData.password.length <= 0 || formData.address.length <= 0 || formData.contact_person.length <= 0 || formData.contact_tel.length <= 0) {
                return 0
            }

            return 1
        },
        goLogin() {//返回登录页面
            this.$router.push("login") //返回登录页面
        }
    }
}
</script>
