<template>
   <div class="card" style="margin-bottom: 20px">
       <h3><strong>个人资料</strong></h3>
       <p>昵称</p>
       <van-cell-group>
           <van-field
                   placeholder=" "
                   v-model="personName"
                   :error="personError"
                   @click="personError=false"
                   required
                   maxlength="10"
           />
       </van-cell-group>
       <p>性别</p>
       <van-radio-group v-model="radio1">
           <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
           <van-radio name="1" checked-color="#fd6740">女</van-radio>
       </van-radio-group>
       <p>微信号</p>
       <van-cell-group>
           <van-field
                   placeholder=" "
                   v-model="weixinName"
                   :error="weixinError"
                   @click="weixinError=false"
                   required
                   maxlength="20"
           />
       </van-cell-group>
       <p>宿舍区</p>
       <van-radio-group v-model="radio2">
           <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px">南区</van-radio>
           <van-radio name="1" checked-color="#fd6740"  style="float: left; margin-right: 20px">西南</van-radio>
           <van-radio name="2" checked-color="#fd6740" style="float: left; margin-right: 20px">斋区</van-radio>
           <van-radio name="3" checked-color="#fd6740">西丽</van-radio>

       </van-radio-group>



   </div>
</template>

<script>
    import {
        CellGroup, Field,
        RadioGroup, Radio,
    } from 'vant';
    export default {
        name: "schoolidCard",
        components: {

            [CellGroup.name]: CellGroup, [Field.name]: Field,
            [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
        },
        data() {
            return {
                radio1: '0',
                radio2: '1',
                personName: '',
                personError: false,
                weixinName: '',
                weixinError: false,
            }
        },
        methods: {
            publishPresent() {
                // 检验输入
                if (this.personName.length === 0) {
                    this.personError = true;
                    return;
                } else if (this.weixinName.length >= 20) {
                    this.weixinError = true;
                    Toast.fail('最多输入20个字符');
                    return;
                }
                // post_present()
                let present = {
                    name: this.personName,
                    gender: parseInt(this.radio1),
                    weixinID: this.weixinName,
                    dormDistrict: parseInt(this.radio2)
                };
                console.log(present);
                BasicFunction.get_data("ajaxpostpresent", function (response) {
                    console.log("------ Data Rcvd in PresentReg --------");
                    console.log(response);
                    if(response.ret === "10000"){
                        // 不需要 设置 SessionID， 已经自动保存在jSessionID中
                        this.$router.push('index');
                    } else {
                        // 注册失败的处理
                        Toast.fail("上传失败，请检查网络");
                    }
                }, {});
                // this.$router.push('index');
            },

        },
        created: function () {
            if(this.$route.query.present) {
                let present = this.$route.query.present;
                console.log(present);
                this.radio1 = present.gender.toString();
                this.radio2 = present.dormDistrict.toString();
                this.personName = present.name;
                this.weixinName = present.weixinID;
            }
        }
    }
</script>

<style scoped>
    p, h3 {
        color: #fd6740;
    }
    h3 {
        padding: 5px;
        border-bottom: solid 1px #e4e4e4;
    }
    p {
        padding-top:  3px ;
    }
    .card {
        background-color: white;
        margin: 20px 20px;
        border: solid 1px #e4e4e4;
        padding: 15px;
        text-align: left;
    }
</style>