<template>
  <div class="m-right-block fr">
    <div class="right-block-bd">
      <div class="m-account">
        <div class="account-tit" style="height:30px">
          <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">基础资料</a>
          <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">实名认证</a>
          <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">额外信息</a>
          <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">密码修改</a>
        </div>

        <div v-if="show===1" class="lwh-ul-form">
          <form name="user">
            <div class="m-img tc"></div>

            <el-row :gutter="40" class="mt20">
              <el-col :span="6" class="col-normal tc">
                <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
                <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
              </el-col>

              <el-col :span="6" class="col-normal tc">
                <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.graduateImg)">
                <do-upload @onFinish="setGraduateImg" placeholder="上传毕业照"> </do-upload>
              </el-col>
            </el-row>

            <ul class="ul-form">
              <li class="txt-r">
                <span class="l-t"></span>注：<i></i>只有头像、性别、毕业照可以修改
              </li>

              <li>
                <span class="l-t">姓名：</span>
                <input type="text" v-model="userInfo.nickname" class="ipt ng-pristine ng-valid ng-valid-required"
                  required="" placeholder="请输入用户名" disabled="disabled">
              </li>
              <li class="ng-binding">
                <span class="l-t">证件号：</span>{{userInfo.cardId||'未知'}}</li>
              <li>
                <span class="l-t"><i></i>性别：</span>

                <span class="sex">
                  <a href="javascript:void(0)" @click="userInfo.gender='男'" :class="{'selected':userInfo.gender=='男'}">
                    <span class="p-ico2 ico-man"></span>男
                  </a>
                  <a href="javascript:void(0)" @click="userInfo.gender='女'" :class="{'selected':userInfo.gender=='女'}">
                    <span  class="p-ico2 ico-woman"></span>女
                  </a>
                </span>
              </li>
              <li>
                <span class="l-t"><i></i>手机号码：</span>
                <input type="text" v-model="userInfo.phone"  class="ipt" disabled placeholder="请输入手机号码">

                <span class="tips ng-scope" v-if="!isPhone()">
                  <span class="p-ico2"></span>手机格式不对
                </span>
              </li>
              <li class="mt20">
                <span class="l-t"></span>
                <el-button type="primary" class="confirm" @click="doSaveBaseInfo()">保 存</el-button>
              </li>
            </ul>

          </form>
        </div>


        <div v-if="show===2" class="lwh-ul-form ng-scope">
          <form name="user" class="ng-pristine ng-valid">
            <div class="m-img tc"></div>

            <el-row :gutter="40" class="mt20">
              <el-col :span="6" class="col-normal tc">
                 <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
                <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
              </el-col>

              <el-col :span="6" class="col-normal tc">
                <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardBackImg)">
                <do-upload @onFinish="setCardBackImg" placeholder="身份证背面"> </do-upload>
              </el-col>
            </el-row>

            <ul class="ul-form mt50 ng-scope">
              <li>
                <span class="l-t">身份证：</span>
                 <input v-model="userInfo.cardId" class="ipt1" disabled></input>
              </li>
              <li>
                <span class="l-t">姓名：</span>
                <input v-model="userInfo.nickname" class="ipt1" disabled></input>
              </li>
              <li>
                <span class="l-t">手机号：</span>
                <input v-model="userInfo.phone" class="ipt1" disabled></input>
              </li>

              <li class="mt30">
                <span class="l-t"></span>
                <el-button type="primary" class="confirm" @click="identify()" v-if="!userInfo.identify">实名认证</el-button>
                <el-button type="text" v-else >已经完成实名认证</el-button>
              </li>
            </ul>
          </form>
        </div>


        <div v-if="show===3" >
          <el-form ref="elForm" :inline="false"  class="mt50">
            <el-form-item label="工作单位" label-width='150px' class="mt30" prop="address" >
               <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item label="单位注册地址" label-width='150px' class="mt30" prop="postalCode" >
               <el-input placeholder="单位注册地址" v-model="userInfo.companyAddress " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item label="家庭住址" label-width='150px' class="mt30" prop="postalCode" >
               <el-input placeholder="家庭住址" v-model="userInfo.address" class="pass-input">
               </el-input>
            </el-form-item>


            <el-form-item label="邮件编号" label-width='150px' class="mt30" prop="years" >
               <el-input placeholder="邮件编号" v-model="userInfo.postalCode " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass" >
               <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
               <el-button type="primary"  class="confirm" @click="saveMoreInfo()">
                 确认修改
                </el-button>
            </el-form-item>
          </el-form>

        </div>


        <div v-if="show===4" class="ng-scope">
          <el-form ref="elForm" :inline="false" :model="passForm" :rules="passRules" class="mt50">
            <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass" >
               <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password"
               show-password auto-complete="new-password">

               </el-input>
            </el-form-item>

            <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass" >
               <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password"
               show-password auto-complete="new-password">
               </el-input>
            </el-form-item>

            <el-form-item   label="确认新密码" label-width='150px' class="mt30" prop="rePass">
               <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password"
               show-password auto-complete="new-password">
               </el-input>
            </el-form-item>

            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
               <el-button type="primary"  class="confirm" @click="doSavePassword()">
                 确认修改
                </el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>

    <el-dialog
        append-to-body
        close-on-click-modal
        :visible.sync="visible"
        :width="width">
        <img :src="imgUrl" @load="onLoad" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import { httpServer } from "@/components/httpServer/httpServer.js";
  import UploadImage from "@/components/upload/index.vue";
  import ImgView from '@/components/upload/imgView.vue';
  import DoUpload from '@/components/upload/index.vue'
  import rules from "@/utils/rules.js";
  import { mapGetters,mapActions } from "vuex";
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.passForm.newPass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };

      return {
        show: 1,
        width: "",
        visible: false,
        imgUrl:'',
        passForm:{
          oldPass:'',
          newPass:'',
          rePass:'',
        },
        passRules:{
          oldPass: rules.defaultFun("请输入密码"),
          newPass: rules.passwordItem,
          rePass: [
            { required: true, validator: validatePass2, trigger: "blur" },
          ],
        },
        errorImg: 'this.src="' + require('../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
      }
    },
    computed: {
    	...mapGetters("user", ["userInfo"])
    },
    components:{DoUpload,UploadImage,ImgView},
    methods: {
       ...mapActions("user", ["saveBaseInfo"]),
      isPhone( ){
        let phone = this.userInfo.phone;
        return !phone||/^1[0-9]{10}$/.test(phone)
      },
      showImg( url ){
        this.imgUrl = url;
        this.visible = true;
      },
      setHeadImg( imgUrl ){
        console.log( 'setHeadImg', imgUrl)
        this.userInfo.headImg = imgUrl;
      },
      setCardImg( url ){
        httpServer("User.addCardImg", {url}).then( res=>{
          if( res.code == 200){
            this.userInfo.cardImg = res.url;
            this.userInfo.nickname = res.nickanme
            this.userInfo.address = res.address;
            this.saveBaseInfo(this.userInfo)
          }
        })
      },
      setCardBackImg( url  ){
        httpServer("User.addCardBackImg", {url}).then( res=>{
          if( res.code == 200){
            this.userInfo.cardBackImg = url;
            this.saveBaseInfo(this.userInfo)
           }
        })
      },
      setGraduateImg( url  ){
        httpServer("User.addGraduateImg", {url}).then( res=>{
          if( res.code == 200){
            this.userInfo.graduateImg = url;
            this.saveBaseInfo(this.userInfo);
           }
        })
      },
      identify(){
        httpServer("User.identify", {}).then( res=>{
          if( res.code == 200){
            this.userInfo.identify = 1;
            this.saveBaseInfo(this.userInfo)
            this.$message.success( "实名认证成功")
           }
        })
      },
      doSaveBaseInfo(){
        let param = {
           headImg:this.userInfo.headImg,
           gender:this.userInfo.gender,
         }
        httpServer("User.saveBaseInfo", param).then( res=>{
          if( res.code == 200){
            this.$message.success("保存成功")
          }
        })
      },
      doSavePassword(){
        let {oldPass, newPass}  = this.passForm;
        console.log( {oldPass, newPass})
        this.$refs["elForm"].validate((valid) => {
          console.log(" valid")
          if (!valid) return;
          let param = {
             oldPass:this.$md5(oldPass),
             newPass:this.$md5(newPass)
           }
          httpServer("User.ResetPass", param).then( res=>{
            if( res.code == 200){
              this.passForm = {oldPass:'', newPass:'', rePass:''};
              this.$message.success("密码修改成功")
            }
          })
        })
      },
      onLoad(e) {
        const img = e.target;
        let width = 0;
        if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
            width = img.width + 40;
        }
        this.width = width + "px";
        console.log( this.width )
      },
      saveMoreInfo(){
         let param = {
           education:this.userInfo.education,
           address:this.userInfo.address,
           company: this.userInfo.company,
           companyAddress: this.userInfo.companyAddress,
           postalCode:this.userInfo.postalCode,
         }
        httpServer("User.saveMoreInfo", param).then( res=>{
          if( res.code == 200){
            this.$message.success( "编辑成功")
          }

        })
      }
    }
  }
</script>

<style>
  @import url("./index.css");
  @import url("../../../assets/css/m-account.css");
  .pass-input{
    width: 296px;
  }
  .confirm{
    width: 296px;
  }
</style>
