<gsb-pagecard>
  <div slot="content">
    <div style="background-color: #fff;border: 1px solid #ebeef5;padding:20px;height:auto;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
      <div class="el-icon-info" style="width:100%;padding-left:10px;background-color:#fdf6ec;height:36px;font-size:14px;font-weight:400;line-height:36px;color:#e6a23c;text-align:left">
        请完善以下信息，方便我们更好的为您服务
      </div>
      <div style="margin-top:30px;margin-left:30px;">
        <el-form :model="form"  :rules="rules" ref="form" label-width="140px">
          <div style="margin-top:20px;margin-bottom:20px;font-size:16px;font-weight:550 ">
            基本信息
          </div>
          <el-form-item style="width:500px" label="注册时间：" prop="created_at">
            <div>{{form.created_at}}</div>
          </el-form-item>
          <el-form-item style="width:500px" label="用户名：" prop="nickName">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item style="width:500px" label="账号：" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
          <div style="margin-top:20px;margin-bottom:20px;font-size:16px;font-weight:550 ">
            联系信息
          </div>
          <el-form-item style="width:500px" label="邮箱：" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <div style="margin-top:20px;margin-bottom:20px;font-size:16px;font-weight:550 ">
            安全设置
          </div>
          <el-form-item label="手机绑定：">
            <div>
              您已绑定了手机
              <span style="color:#090">
                {{mobile?mobile.substring(0,3):""}}****{{mobile?mobile.substring(7):""}}
              </span>
              [您的手机为安全手机，可以找回密码]
              <span @click="auditmobile" style="color:#409EFF;margin-left:20px;cursor:pointer">
                修改
              </span>
            </div>
          </el-form-item>
          <el-form-item label="登录密码：" >
            <div>
              安全性高的密码可以使帐号更安全。建议您定期更换密码，
              设置一个包含字母，符号或数字中至少两项且长度6-18位的密码。
              <span  @click="auditpassword" style="color:#409EFF;margin-left:20px;cursor:pointer">
                修改
              </span>
            </div>
          </el-form-item>
          <div v-if="a">
            <el-form-item style="width:500px" label="更换绑定手机：" prop="mobile">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="vcode" v-if="!b">
              <el-input style="width:360px" v-model="form.vcode"></el-input>
              <el-button @click="fetchVcode" type="primary" style="border-radius: 4px;margin-left:20px;color:white">
                获取验证码
              </el-button>
            </el-form-item>
          </div>
          <div v-if="b">
            <el-form-item style="width:500px" label="新密码：" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item style="width:500px" label="确认新密码：" prop="password2">
              <el-input type="password" v-model="form.password2"></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="vcode">
              <el-input style="width:360px" v-model="form.vcode"></el-input>
              <el-button @click="fetchVcode" type="primary" style="border-radius: 4px;margin-left:20px;color:white">
                获取验证码
              </el-button>
            </el-form-item>
          </div>
          <el-form-item style="width:500px;text-align:center">
            <el-button @click="saveUserinfo" type="primary" style="width:200px;border-radius: 4px;margin-left:20px;color:white">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</gsb-pagecard>
