<template>
  <div class="my-info">
    <div class="my-info__header">我的资料</div>

    <div class="my-info__body">
      <el-form ref="form" label-width="100px">
        <el-form-item>
          <div class="avatar-wrap">
            <div class="avatar"></div>
            <div class="btn">上传头像</div>
          </div>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input placeholder="请填写你的昵称"></el-input>
          <div class="save-btn">保存</div>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.resource">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input placeholder="请输入你的年龄"></el-input>
          <div class="save-btn">保存</div>
        </el-form-item>
        <el-form-item label="关联姓名">
          <el-input placeholder="请填写你的姓名"></el-input>
          <div class="save-btn">保存</div>
        </el-form-item>
        <el-form-item label="关联身份证">
          <el-input placeholder="请输入你的身份证"></el-input>
          <div class="save-btn">保存</div>
        </el-form-item>
        <el-form-item label="所在城市">
          <el-input placeholder="请选择你的城市"></el-input>
          <div class="save-btn">保存</div>
        </el-form-item>

        <el-form-item label="账户密码">
          <div class="phone-wrap">
            <div class="slide-btn" @click="showUsername = !showUsername">
              编辑▼
            </div>
            <div v-if="showUsername">
              <div class="note">重新修改密码请验证您的用户信息</div>
              <el-input
                v-model="form.userPhone"
                placeholder="请输入手机号"
              ></el-input>
              <el-input v-model="form.code" placeholder="短信验证码">
                <span slot="suffix" class="get-code">获取验证码</span>
              </el-input>
              <el-input
                v-model="form.userPwd"
                :type="pwdType"
                placeholder="新密码"
              >
                <i
                  slot="suffix"
                  class="el-icon-view eye"
                  :style="{ color: pwdType == 'text' ? '#3F8DFD' : '' }"
                  @click="showPass"
                ></i>
              </el-input>
              <el-input
                v-model="form.reUsePwd"
                :type="rePwdType"
                placeholder="再次输入新密码"
              >
                <i
                  slot="suffix"
                  class="el-icon-view eye"
                  :style="{ color: rePwdType == 'text' ? '#3F8DFD' : '' }"
                  @click="showRePass"
                ></i>
              </el-input>
              <div class="submit-btn">确认</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="手机号">
          <div class="phone-wrap">
            <div class="slide-btn" @click="showPhone = !showPhone">编辑▼</div>
            <div v-if="showPhone">
              <div class="note">重新修改密码请验证您的用户信息</div>
              <el-input
                v-model="form.phone"
                placeholder="请输入需要绑定的手机号"
              ></el-input>
              <el-input v-model="form.code" placeholder="短信验证码">
                <span slot="suffix" class="get-code">获取验证码</span>
              </el-input>
              <div class="submit-btn">确认</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyMessage",
  data() {
    return {
      form: {
        resource: "",
        userPhone: "",
        userPwd: "",
        reUsePwd: "",
        phone: "",
        code: "",
      },
      pwdType: "password",
      rePwdType: "password",
      showPhone: false,
      showUsername: false,
    };
  },
  mounted() {},
  methods: {
    showRePass() {
      if (this.rePwdType == "password") {
        this.rePwdType = "text";
      } else {
        this.rePwdType = "password";
      }
    },
    showPass() {
      if (this.pwdType == "password") {
        this.pwdType = "text";
      } else {
        this.pwdType = "password";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-info {
  &__header {
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #666666;
  }
  &__body {
    margin-top: 24px;
    overflow: hidden;

    .avatar-wrap {
      display: table;
      .avatar {
        width: 100px;
        height: 100px;
        background: #3f8dfd;
        border-radius: 50%;
        float: left;
      }

      .btn {
        margin-top: 34px;
        margin-left: 124px;
        width: 122px;
        height: 32px;
        background: #3f8dfd;
        border-radius: 16px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
      }
    }

    .el-input {
      width: 510px;
    }

    .save-btn {
      margin-left: 16px;
      width: 122px;
      height: 32px;
      background: #3f8dfd;
      border-radius: 16px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      display: inline-block;
    }

    .phone-wrap {
      .get-code {
        color: #3f8dfd;
        cursor: pointer;
      }
      .slide-btn {
        cursor: pointer;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #3f8dfd;
      }
      .note {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }
      .el-input {
        margin-bottom: 24px;
      }

      .submit-btn {
        width: 122px;
        height: 32px;
        background: #3f8dfd;
        border-radius: 16px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
      }

      .eye {
        font-size: 20px;
      }
    }
  }
}
</style>
