<template>
    <div class="registBox">
        <el-form :model="ruleFormReg" class="regist"  ref="ruleFormReg" :rules="rules" label-width="80px" style="width: 20%">
            <h1>神州餐厅管理系统-NavReg</h1>
            <br><br>
<!--账号-->
            <el-form-item label="账号" prop="us">
                <el-input v-model="ruleFormReg.us"
                          placeholder="请输入账号名"
                          maxlength="18"
                          show-word-limit></el-input>
            </el-form-item>
<!--密码-->
            <el-form-item label="密码" prop="ps">
                <el-input  v-model="ruleFormReg.ps"
                           placeholder="请输入密码"
                           maxlength="24"
                           show-word-limit
                           show-password></el-input>
            </el-form-item>
<!--身份证-->
            <el-form-item label="身份证" prop="idCard">
                <el-input  v-model="ruleFormReg.idCard"
                           placeholder="请输入您的身份证号"
                           maxlength="18"
                           show-word-limit></el-input>
            </el-form-item>
<!--邮箱-->
            <el-form-item label="邮箱" prop="emailAddress">
                <el-input v-model="ruleFormReg.emailAddress"
                          placeholder="用于用户找回密码"
                          show-word-limit></el-input>
            </el-form-item>
<!--年龄-->
            <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleFormReg.age"
                          placeholder="请输入年龄"
                          style="width: 60%;float: left"></el-input>
            </el-form-item>
<!--性别-->
            <el-form-item label="性别"
                          prop="sex"
                          style="text-align: left" >
                <el-radio-group v-model="ruleFormReg.sex">
                    <el-radio label="未选择" value="未选择"></el-radio>
                    <el-radio label="男"    value="男"></el-radio>
                    <el-radio label="女"    value="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleFormReg')" round>立即注册</el-button>
                <el-button type="warning" @click="cancelBtnClick" round>取&nbsp&nbsp消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';
    //邮箱验证  正则匹配QQ邮箱
    const checkEmail = (rule, value, cb) => {
        const regEmail = /^([0-9_-]{5,12})+@([q]{2}|[Q]{2})+(\.com|\.COM)+/
        if (regEmail.test(value)) {
            return cb()
        }
        cb(new Error('请输入正确的邮箱'))
    }

    //手机号验证  以后估计会用到
    const checkMobile = (rule, value, cb) => {
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if (regMobile.test(value)) {
            return cb()
        }
        cb(new Error('请输入正确的手机号'))
    }

    //-----------------------------------------------------------------

    export default {
        data(){
            return {
                ruleFormReg: {
                    us:'',
                    ps:'',
                    idCard:'',
                    age:null,
                    sex:'',
                    emailAddress:''
                },
                rules: {//触发方式，blur失去焦点，change数据改变;在<el-form-item>中添加prop属性，对应rules中的规则
                    us: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 6, max: 18, message: '长度在 6-18 个字符', trigger: 'blur'}
                    ],
                    ps: [
                        {min: 6, max: 28,required: true, message: '长度在 6-24 个字符', trigger: 'blur'}
                    ],
                    idCard:[
                        {min: 15, max: 18,required: true, message: '长度在 15/18 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {min: 0, max: 150,required: true, message: '范围：0-150', trigger: 'blur'}
                    ],
                    emailAddress: [
                        {required:true,message:'请输入邮箱名',trigger:'blur'},
                        {//通过validator 进行自定义校验规则
                            validator:checkEmail,
                            trigger: 'blur'}
                    ],
                }
                }
            },
        methods:{
            create(){
                console.log(this.ruleFormReg.sex,'性别！！！！！！！')
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('https://mz.tshe.cn/restauantCH/user/reg', {
                            us: this.ruleFormReg.us,
                            ps: this.ruleFormReg.ps,
                            idCard:this.ruleFormReg.idCard,
                            age:this.ruleFormReg.age,
                            sex:this.ruleFormReg.sex,
                            emailAddress:this.ruleFormReg.emailAddress
                        })
                            .then((res) => {
                                console.log(res, '注册的res');
                                if (res.data.code==0){
                                    this.$message.success(res.data.msg);
                                    Cookies.remove('username',0);
                                    Cookies.remove('passWord',0);
                                    this.$router.push('/');
                                }
                                else if(res.data.code==-1){
                                    this.$message.error(res.data.msg);
                                }
                            })
                    }
                    else {
                        this.$message.error('格式错误，请重新输入！');
                        return false;
                    }
                });
            },
            cancelBtnClick(){
            this.$router.go(-1);
                }
        }
    }
</script>

<style>
    .regist {
        margin: 250px auto 0  ;
    }
    .registBox {
        text-align: center;
    }
</style>
