<template>
  <div class="container">
    <div class="weiquanlist">
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div class="nameleft">姓名</div>
          <div class="nameitem nameitemk">
           
            <input type="text" placeholder="输入姓名" v-model="name"/>
          </div>
        </div>
      </div>
      <div class="weiquanitem flextwo" @click="choseregion">
        <div class="weiguitou flexone">
          <div class="nameleft">籍贯</div>
          <div class="nameitem nameitemk">
            {{regionname}}
            <!-- <input type="text" placeholder="输入籍贯" v-model="jiguan"/> -->
          </div>
        </div>
         <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
      </div>
      <div class="weiquanitem flextwo" @click="chosesex">
        <div class="weiguitou flexone">
          <div class="nameleft">性别</div>
          <div class="nameitem nameitemk">{{sexname}}</div>
        </div>
        <img src="../../../assets/youjiantou.png" alt="" class="youjian" />
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div class="nameleft">联系方式</div>
          <div class="nameitem nameitemk">
            <input type="number" placeholder="输入联系方式" v-model="mobile"/>
          </div>
        </div>
      </div>
      <div class="weiquanitem flextwo">
        <div class="weiguitou flexone">
          <div class="nameleft">身份证号</div>
          <div class="nameitem nameitemk">
            <input type="text" placeholder="输入身份证号" v-model="card"/>
          </div>
        </div>
      </div>
      <div class="weiquanitem">
 <div class="nameleft upheadimg">上传头像</div>
 <!-- 上传图片 -->
      <div class="addpicox flexone">
        <!-- <div class="addpic" v-for="(item, index) in images" :key="index">
          <image :src="item" mode=""></image>
          <div class="delimg" @click="deleteimg(index)" :data-url="item">
            <image src="../../../assets/close.png" mode=""></image>
          </div>
        </div> -->
        <div class="flexone">
          <van-uploader
            v-model="fileList"
            multiple="true"
            :after-read="afterRead"
            :max-count="1"
            style="margin-right: 0.2rem"
          />
          <!-- <img src="../../../assets/add.png" alt="" /> -->
        </div>
      </div>
      </div>
    </div>
    <div class="baocun" @click="save">保存</div>
    <!-- 选择男女 -->
    <van-picker
      title=""
      show-toolbar
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showsex"
/>
    <!-- 选择省市区 -->
    <van-area title="" :area-list="areaList" :columns-num="2" @confirm="selectregion" @cancel="cancelregion" v-if="showregion"/>
     <!-- 图片上传中 -->
    <van-loading type="spinner" color="#1989fa" v-if="cardzheng" />
  </div>
</template>

<script>
import Vue from 'vue';
import { Picker,Area, Toast } from 'vant';
import area from "../../../utils/region.js"
Vue.use(Area);
Vue.use(Picker);
export default {
  data(){
    return{
      columns:["男","女"],
      showsex:false,
      sexname:'请选择性别',
      name:"",
      jiguan:'',
      card:'',
      mobile:"",
      id:"",//考试类型
      image:'',
      chuanimg:'',
      fileList:[],
      examinee_gender:'',//性别
      examinee_province_name:'',
      examinee_city_name:'',
      areaList:area,
      showregion:false,
      regionname:'请选择籍贯',
      cardzheng:false,//图片上传中
    }
  },
  created(){
    document.body.style.backgroundColor = "#fff";
    this.id= this.$route.query.id
  },
  methods:{
    save(){
      let that = this;
      if(that.name==''){
        Toast("请输入姓名");
        return false
      }
       if(that.examinee_province_name==''){
        Toast("请选择籍贯");
        return false
      }
       if(that.examinee_gender==''){
        Toast("请选择性别");
        return false
      }
       if(that.mobile==''){
        Toast("请输入联系方式");
        return false
      }
      if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
           Toast("请输入正确的联系方式");
          return false;
        }

       if(that.card==''){
        Toast("请输入身份证号");
        return false
      }
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
      if(!reg.test(that.card)){
          Toast("请输入正确的身份证号");
        return false
      }
      if(that.chuanimg==''){
        Toast("请选择头像");
        return false
      }
    
      var url = '/api/member/update_user';
      var params = {
        examinee_name:that.name,
        examinee_province_name:that.examinee_province_name,
        examinee_city_name:that.examinee_city_name,
        examinee_gender:that.examinee_gender,
        examinee_mobile:that.mobile,
        examinee_card_number:that.card,
        examinee_image:that.chuanimg
      }
      console.log('7766554', params)
      that.$axios.post(url, params).then((res) => {
        console.log(res);
        Toast('提交成功')
        that.$router.push({
            path: '/examinetext',
            query: { id: that.id }
         })
        
      }).catch((err) => {
        console.log(err)

      })
    },
     // 上传图片
    afterRead(file) {
      let that = this;
      console.log(file);
      console.log(file.length);
      that.cardzheng = true;
      if (file.length == undefined) {
        var formdata = new FormData();
        formdata.append("file", file.file);
       
        var url = "/api/common/upload";
        that.$uploadFile
          .post(url, formdata)
          .then(function (res) {
            console.log(res);
             let url = "https://app.chinesenooddles.com" + res.data.url;
             that.image=url;
             that.chuanimg=res.data.url;
             that.cardzheng=false
          })
          .catch(err => {
            console.log(err);
          });
      } 
    },
    // 选择性别
    chosesex(){
      this.showsex=true
    },
    // 确定选择性别
    onConfirm(value, index){
      if(value=="男"){
        this.examinee_gender=1
      }else{
         this.examinee_gender=2
      }
      this.sexname=value;
      this.showsex=false
    },
    // 取消性别选择
    onCancel(){
      this.showsex=false
    },
    choseregion(){
      this.showregion=true
    },
    // 确定选择省市区
    selectregion(value,index){
      console.log(value)
      if(value[0].name=='北京市'){
         this.regionname=value[0].name
      }else if(value[0].name=='天津市'){
          this.regionname=value[0].name
      }else if(value[0].name=='上海市'){
          this.regionname=value[0].name
      }else if(value[0].name=='重庆市'){
          this.regionname=value[0].name
      }else{
        this.regionname=value[0].name+value[1].name
      }
      this.examinee_province_name=value[0].name;
      this.examinee_city_name=value[1].name;
      this.showregion=false
      
    },
    // 取消选择地区
    cancelregion(){
      this.showregion=false
    }
  }

};
</script>

<style scoped>
@import "../../style/homepage.css";
.baocun {
    width: 6.35rem;
    height: 0.97rem;
    background: #c68c3e;
    border-radius: 0.31rem;
    color: #fff;
    font-size: 0.32rem;
    text-align: center;
    line-height: 0.97rem;
    margin:2rem auto 0
}
.nameleft{
     color: #333;
    font-size: 0.28rem;
}
.upheadimg{
  margin-bottom:0.2rem
}
/* 选择性别弹层 */
.van-picker{
  position:fixed;
  left:0;
  bottom:0;
  width:100%
}
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
</style>