<template>
  <div id="personalInfo_index_scoped">
    
    <el-tabs value="first" v-show="curStep==1">
      <el-tab-pane label="考生注册 验证基本信息" name="first">

        <el-form ref="StdReg" :rules="rules" :model="StdReg" label-width="140px">
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="18">
              <div>
                <blockquote>
                  <p>确认考生生源地（文化高考所在省份）</p>
                  <small>高考所在省份为考生参加普通高考的所在省份，如该信息有误，将可能导致无法录取</small><br>
                  <small>高考报名号，大多数省份编码规则为17开头14位数字。广东、湖南、陕西按往年的情况考生号为10位。此项信息非常重要，如果填写错误，将直接影响专业成绩报送以及后续录取。</small><br>

                  <small class="red" style="font-weight:bold;">以下信息非常重要，注册后不可修改，请仔细输入</small><br>
                </blockquote>
              </div>
            </el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="生源省份" prop="std_province">
                  <el-select v-model="StdReg.std_province" placeholder="请选择" @change="changeProvince()">
                    <el-option
                      v-for="item in provinceList"
                      :key="item.province_id"
                      :label="item.province_name"
                      :value="item.province_id">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考生姓名" prop="std_name">
                <el-input v-model="StdReg.std_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="证件类型" prop="cert_type">
                <el-select v-model="StdReg.cert_type" placeholder="请选择" :disabled="StdReg.std_province!='81' && StdReg.std_province!='82' && 
                StdReg.std_province!='83'">
                  <el-option
                    v-for="item in certTypeList"
                    :key="item.dict_value"
                    :label="item.dict_text"
                    :value="item.dict_value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码" prop="cert_no">
                <el-input v-model="StdReg.cert_no"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="考生手机号码" prop="std_mobile1">
                <el-input v-model="StdReg.std_mobile1"></el-input>
              </el-form-item>
              <center>
                <p class="red" style="font-size:10px;color:#ff0000">请谨记此手机号码，该号码为本报名系统登录密码</p>
              </center>

            </el-col>
            <el-col :span="8">
              <el-form-item label="高考报名号" prop="exam_no">
                <el-input v-model="StdReg.exam_no"></el-input>
              </el-form-item>            
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row>
            <el-col :span="6">&nbsp;</el-col>
            <el-col :span="10">
              <div>
                <el-form-item>
                  <el-button type="primary" @click="goUrl('/index')">返回登录</el-button>
                  <el-button type="primary" @click="goDetail">验证考生信息</el-button>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

        </el-form>
      </el-tab-pane>

    </el-tabs>

    <el-tabs value="secend" v-show="curStep==2">
      <el-tab-pane label="考生注册 完善个人信息" name="secend">

        <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="18">
              <div>
                <blockquote>
                  <p>请完善个人其他信息</p>
                  <!-- <small>高考报名号，大多数省份编码规则为17开头14位数字。广东、湖南、陕西按往年的情况考生号为10位。此项信息非常重要，如果填写错误，将直接影响专业成绩报送以及后续录取。</small> -->
                </blockquote>
              </div>
            </el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>
        <el-form ref="StdRegDetail" :rules="rulesDetail" :model="StdReg" label-width="140px">
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="生源省份" prop="std_province">
                  <el-select v-model="StdReg.std_province" placeholder="请选择" disabled>
                    <el-option
                      v-for="item in provinceList"
                      :key="item.province_id"
                      :label="item.province_name"
                      :value="item.province_id">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考生姓名" prop="std_name">
                <el-input v-model="StdReg.std_name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="证件类型" prop="cert_type">
                <el-select v-model="StdReg.cert_type" placeholder="请选择" disabled>
                  <el-option
                    v-for="item in certTypeList"
                    :key="item.dict_value"
                    :label="item.dict_text"
                    :value="item.dict_value">
                  </el-option>
                </el-select>              
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码" prop="cert_no">
                <el-input v-model="StdReg.cert_no" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="考生手机号码" prop="std_mobile1">
                <el-input v-model="StdReg.std_mobile1" disabled></el-input>
              </el-form-item>
              <center>
                <p class="red" style="font-size:10px;color:#ff0000">请谨记此手机号码，该号码为本报名系统登录密码</p>
              </center>
            </el-col>
            <el-col :span="8">
                <el-form-item label="高考报名号" prop="exam_no">
                <el-input v-model="StdReg.exam_no" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="考生性别" prop="std_sex">
                  <el-select v-model="StdReg.std_sex" placeholder="请选择">
                    <el-option
                      v-for="item in stdSexList"
                      :key="item.dict_value"
                      :label="item.dict_value"
                      :value="item.dict_value">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="高考类型（文理）" prop="art_type">
                <el-select v-model="StdReg.art_type" placeholder="请选择">
                  <el-option
                    v-for="item in examTypeList"
                    :key="item.dict_value"
                    :label="item.dict_value"
                    :value="item.dict_value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>
          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="考生民族">
                <el-select v-model="StdReg.std_nation" placeholder="请选择">
                  <el-option
                    v-for="item in nationList"
                    :key="item.nation_name"
                    :label="item.nation_name"
                    :value="item.nation_name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="毕业高中">
                <el-input v-model="StdReg.std_school"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row> 
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-form-item label="家人联系电话" prop="std_mobile2">
                <el-input v-model="StdReg.std_mobile2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮寄地址">
                <el-input v-model="StdReg.link_addr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">&nbsp;</el-col>
          </el-row>

          <el-row>
            <el-col :span="4">&nbsp;</el-col>
            <el-col :span="16">
              <el-form-item>
                <el-button type="primary" @click="curStep = 1">证件信息有误，返回修改</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>

        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curStep: 1,
      nationList: [],
      examTypeList: [],
      certTypeList: [],
      stdSexList: [],
      provinceList: [],

      StdReg: {},
      rules: {
        std_province: [
          { required: true, message: "请输入生源省份", trigger: "change" }
        ],
        std_name: [
          { required: true, message: "请输入考生姓名", trigger: "blur" }
        ],
        cert_type: [
          { required: true, message: "请输入证件类型", trigger: "change" }
        ],
        cert_no: [
          { required: true, message: "请输入证件号", trigger: "blur" }
        ],
        exam_no: [
          { required: true, message: "请输入高考报名号", trigger: "blur" }
        ],
        std_mobile1: [
          { required: true, message: "请输入考生手机号码", trigger: "blur" },
          { required: true, validator : this.$validator.phoneNo() ,trigger:'blur'}
        ],
        std_mobile2: [
          { validator : this.$validator.phoneNo() ,trigger:'blur'}
        ]
        //, {type: 'email', message: '请输入正确的考生手机号码', trigger: 'blur'}
      },
      rulesDetail:{
        std_sex: [
          { required: true, message: "请输入性别", trigger: "change" }
        ],
        art_type: [
          { required: true, message: "请输入考生类型", trigger: "change" },
        ],
      }
    };
  },
  async mounted() {
    const res = await this.$http.get("/enrol/reg/init.htm");
    let resMap = res.data.map;

    this.nationList = resMap.NationArray;
    this.certTypeList = resMap.CertTypeArray;
    this.examTypeList = resMap.ExamTypeArray;
    this.stdSexList = resMap.StdSexArray;
    this.provinceList = resMap.ProvinceArray;
  },
  methods: {
    changeProvince() {
      if (
        this.StdReg.std_province == "81" ||
        this.StdReg.std_province == "82" ||
        this.StdReg.std_province == "83"
      )
        this.StdReg.cert_type = "HongKong";
      else this.StdReg.cert_type = "IdCard";

    },
    goDetail(){
      this.$refs.StdReg.validate(valid => {
        if (valid) {
          this.curStep = 2
        }
      })
    },
    async save() {
      this.$refs.StdReg.validate(valid => {
        console.log(valid);
        if (!valid) return;
          // this.showLoading("保存中...");
           this.$refs.StdRegDetail.validate(valid => {
             if(!valid) return
              this.$http
              .post(
                "/enrol/reg/save.htm",
                this.Qs.stringify(this.StdReg),
                this.$http.headers.FORM
              )
              .then((res) => {
                if (res.data.errorMsg) {
                  // this.hideLoading();
                  this.alert(res.data.errorMsg);
                  return false;
                }
                // this.updateStdReg(res.data.entity);
                // this.hideLoading();
                this.initData();
                this.alert("考生信息更新成功");
              });
           })

      });
    },
    checkProvince() {}
  }
};
</script>

<style lang="scss">
#personalInfo_index_scoped {
  .el-card__body {
    padding: 5px 5px !important;
  }
  .el-card__header {
    padding: 11px 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* margin: 10px 10px ; */
    background-color: #d5d5d5 !important;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #0a0a0a;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .green {
    color: green;
  }
  .red {
    color: red;
  }
  .yellow {
    color: sandybrown;
  }
}

#reupload {
  .el-upload {
    width: 100% !important;
  }
}
</style>

