<template>
    <div>
        <!-- <h2>学生注册 <div class="back" @click="toLogin">返回登录</div></h2> -->
        <h2>学生注册</h2>
        
        <el-form class="register" :model="regForm" :rules="regRules" ref="reg" label-width="0px">
            <div class="line">
                <el-form-item prop="userName">
                    <p class="label">*学生姓名</p>
                    <el-input v-model="regForm.userName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item prop="workNumber" style="margin-right: 5%">
                    <p class="label">*学生学号</p>
                    <el-input v-model="regForm.workNumber" placeholder="学生学号" @change="worknumberChange"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <p class="label">*手机号</p>
                    <el-input v-model="regForm.phone" placeholder="手机号" maxlength="11" @change="phoneChange"></el-input>
                </el-form-item>
            </div>

            <p class="label">*学校</p>
            <div class="line">
                <el-form-item prop="provinceId">
                    <p class="prop">省份</p>
                    <el-select v-model="regForm.provinceId" placeholder="省份" @change="getCity">
                        <el-option
                        v-for="item in provinceList"
                        :key="item.value"
                        :label="item.provinceName"
                        :value="item.provinceId"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="cityId" style="margin-right: 5%">
                    <p class="prop">城市</p>
                    <el-select v-model="regForm.cityId" placeholder="城市" @change="getSchoolData">
                        <el-option
                        v-for="item in cityList"
                        :key="item.value"
                        :label="item.cityName"
                        :value="item.cityId"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="schoolAppellationId">
                    <p class="prop">学校</p>
                    <el-select v-model="regForm.schoolAppellationId" placeholder="学校名称" filterable @change="worknumberChange">
                        <el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <!-- <div class="line">
                <el-form-item prop="phone">
                    <p class="label">手机号</p>
                    <el-input v-model="regForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item style="margin-right: 5%">
                    <button type="button" class="code-btn">发送验证码</button>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="regForm.code" placeholder="输入验证码"></el-input>
                </el-form-item>
            </div> -->
            <div class="line">
                <el-form-item prop="password">
                    <p class="label">*密码设置</p>
                    <el-input type="password" v-model="regForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input type="password" v-model="regForm.rePassword" placeholder="请再次输入密码"></el-input>
                </el-form-item>
            </div>
            <div class="line">
                <el-form-item>
                    <p class="label">*验证码</p>
                    <el-input  v-model="regForm.validateCode" placeholder="请输入验证码"  @keyup.enter.native="registerForm"></el-input>
                </el-form-item>
                <el-form-item>
                     <img  :src="verifyCode" style="cursor: pointer;" @click="getVerificationCode"  title="看不清？换一张" />
                </el-form-item>
            </div>
            <el-button class="submit" type="primary" @click="registerForm">注册</el-button>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data: function() {
        return {
            verifyCode:'',
            regForm: {
                userName: '',
                workNumber: '',
                provinceId: '',
                cityId: '',
                schoolAppellationId: '',
                phone: '',
                password: '',
                rePassword: '',
                roleId: 4,
                schoolId: 2105,
                validateCode:''
            },
            regRules: {
                userName: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
                workNumber: [{ required: true, message: '请输入学生学号', trigger: 'blur' }],
                provinceId: [{ required: true, message: '请选择省份', trigger: 'change' }],
                cityId: [{ required: true, message: '请选择城市', trigger: 'change' }],
                schoolAppellationId: [{ required: true, message: '请选择学校', trigger: 'change' }],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^.{6,}$/, message: '请输入6位数以上的密码', trigger: 'blur' }
                ],
                rePassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { pattern: /^.{6,}$/, message: '请输入6位数以上的密码', trigger: 'blur' }
                ]
            },
            provinceList: this.$store.state.provinceList, //省份
            cityList: [], //城市
            schoolList: [],
            phoneRepeat: false,
            workNumberReapeat: false
        };
    },
    mounted() {
        this.getProvince()
        this.getSchoolData()
        this.getVerificationCode()
    },
    methods: {
        //获取图形验证码
        getVerificationCode(){
            // this.$get(this.api.getValidateCode)
            axios({
                url:this.api.getValidateCode,
                methods:'get',
                headers: {
                    "Content-Type": "application/json",
                    "EngineCode": "j371gy1q1ioeveq2y05l4gjz3",
                    "EngineSecret": "IgMlZo+KOs8FthII3KnobUoynILH5ELJVqcHNZcs1G2mwrkofR1THw=="
                },
                responseType: 'arraybuffer',
            })
            .then(res => {
                const bufferUrl = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
                this.verifyCode = 'data:image/png;base64,' + bufferUrl;
            }).catch(res => {});
        },
        getProvince(){
            this.$get(this.api.queryProvince).then(res => {
                this.provinceList = res.message
                this.$store.commit("provinceData", { provinceList : this.provinceList});
            }).catch(res => {});
        },
        // 获取城市
        getCity(){
            this.regForm.cityId = ''
            this.$get(this.api.queryCity,{provinceId: this.regForm.provinceId}).then(res => {
                this.cityList = res.message
                this.getSchoolData()
            }).catch(res => {})
        },
        // 获取学校名称
        getSchoolData(){
            this.regForm.schoolAppellationId = ''
            this.$get(this.api.querySchoolData,{provinceId: this.regForm.provinceId,cityId: this.regForm.cityId,schoolName: ''}).then(res => {
                this.schoolList = res.message
            }).catch(res => {});
        },
        registerForm() {
            this.$refs.reg.validate(valid => {
                if (valid) {
                    if(this.phoneRepeat) return this.$message.warning('该手机号已存在')
                    if(this.workNumberReapeat) return this.$message.warning('该学生学号已存在')
                    if(this.regForm.password !== this.regForm.rePassword) return this.$message.warning('两次输入的密码不一致，请重新输入')

                    let data = this.regForm
                    data.account = data.phone
                    data.uniqueIdentificationAccount = new Date().getTime()
                    this.$post(`${this.api.save}?workNumber=${this.regForm.workNumber}&validateCode=${this.regForm.validateCode}`,data).then(res => {
                        this.$message.success('注册成功')
                        this.$emit('update:isReg',false)
                        this.$emit('updateInfo',{username: this.regForm.phone,password: this.regForm.password})
                        this.$refs.reg.resetFields()
                    }).catch(res => {
                        // this.$message.error(res)
                    });
                } else {
                    // this.$message.error('请输入账号和密码');
                    return false;
                }
            });
        },
        async phoneChange(){
            let res = await this.$get(this.api.queryPhone, { phone: this.regForm.phone });
            if(res.message.length != 0){
                this.$message.warning('该手机号已存在');
                this.phoneRepeat = true
            }else{
                this.phoneRepeat = false
            }
        },
        async worknumberChange(){
            let res = await this.$get(this.api.queryWorkNumberIsExist, { 
                workNumber: this.regForm.workNumber,
                schoolAppellationId: this.regForm.schoolAppellationId
            });
            if(res.status != 200){
                this.$message.warning('该学生学号已存在');
                this.workNumberReapeat = true
            }else{
                this.workNumberReapeat = false
            }
        },
        toLogin() {
            this.$emit('update:isReg',false)
        }
    },
};
</script>

<style scoped lang="scss">
    .wrap {
        .right{
            h2{
                position: relative;
                padding-bottom: 10px;
                font-size: 24px;
                font-weight: 400;
                color: #303d4c;
                text-align: center;
                border-bottom: 1px solid #E5E5E5;
                .back{
                    position: absolute;
                    top: 5px;
                    right: 0;
                    font-size: 12px;
                    color: #ccc;
                    cursor: pointer;
                }
            }
            .el-form{
                margin-top: 30px;
                .label{
                    margin-bottom: 10px;
                    color: #105CB2;
                    font-size: 14px;
                }
                /deep/.el-input__inner{
                    height: 46px;
                    padding: 0 23px;
                    line-height: 46px;
                    border: 1px solid #AFB5BB;
                    border-radius: 23px !important;
                }
                /deep/.el-form-item__error{
                    top: 105%;
                    left: auto;
                    right: 0;
                    color: #FFA94E;
                }
                .submit{
                    width: 100%;
                    height: 48px;
                    margin-top: 60px;
                    line-height: 48px;
                    padding: 0;
                    font-size: 20px;
                    background-color: #105cb2;
                    border-radius: 23px;
                    border: 0;
                }
                .links{
                    margin: 20px 0 20px;
                }
                .ques{
                    color: #105cb2;
                    font-size: 14px;
                }
                .forget{
                    color: #ffa94e;
                    font-size: 14px;
                }
                .login-tips{
                    margin-bottom: 20px;
                    font-size: 16px;
                    color: #105CB2;
                    text-align: center;
                }
                .thirdParty{
                    .item{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 20px;
                        padding: 10px 0;
                        color: #AFB5BB;
                        font-size: 16px;
                        background-color: #eff0f1;
                        border-radius: 36px;
                        cursor: pointer;
                        img{
                            width: 40px;
                            margin-right: 10px;
                        }
                    }
                }
            }

            .register{
                .line{
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                }
                .el-form-item{
                    &:first-child{
                        margin-right: 5%;
                    }
                }
                .label{
                    margin-bottom: 0;
                }
                .code-btn{
                    min-width: 120px;
                    height: 46px;
                    padding: 0 10px;
                    line-height: 46px;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 23px;
                    border: 0;
                    background-color: #105cb2;
                }
                .submit{
                    margin-bottom: 20px;
                }
            }
        }
    }
</style>