<template>
  <div class="edit-password-wrap">
    <div class="title">
      <i class="icon icon-jiantou-zuo" @click="goBack"></i>
    </div>
    <div class="tab">
      <p
        v-if="item.mobile"
        :class="{active: registerType === 'mobile'}"
        @click="toggleRegisterType('mobile')">
        手机修改密码
      </p>
      <p
        v-if="item.email"
        :class="{active: registerType === 'mail'}"
        @click="toggleRegisterType('mail')">
        邮箱修改密码
      </p>
    </div>
    <p class="info">
      当前{{registerType == 'mobile' ? '手机号：' + item.mobile : '邮箱：' + item.email}}
      <br>8-16位，字母+数字新密码
    </p>
    <div class="login">
      <div class="flex align-c" :class="{active: passwordFocus}">
        <i
          class="icon"
          :class="[showPassowrd ? 'icon-mimakejian' : 'icon-mimayincang']"
          @click="showPassowrd = !showPassowrd"
        ></i>
        <input
          v-model="password"
          :type="showPassowrd ? 'text' : 'password'"
          placeholder="设置密码"
          @focus="focus('password')"
          @blur="blur('password')"/>
        <i class="icon icon-shuruqingkong close" v-if="password.length && passwordFocus" @click="clean('password')"></i>
      </div>
    </div>
    <van-button
      type="default"
      class="btn"
      :class="{disabled: disabled}"
      @click="loginHandle">下一步
    </van-button>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      registerType: "mobile",
      loading: false,
      password: "",
      passwordFocus: false,
      item: {},
      showPassowrd: false,
      disabled: true
    };
  },
  created: function() {
    if (this.$util.getLoginUserInfo()) {
      this.item = JSON.parse(decodeURIComponent(this.$util.getLoginUserInfo()));
      if (this.item.email) {
        this.registerType = "mail";
      }
      if (this.item.mobile) {
        this.registerType = "mobile";
      }
    }
  },
  watch: {
    password(val) {
      val.length ? (this.disabled = false) : (this.disabled = true);
    }
  },
  mounted: function() {},
  methods: {
    // 输入框获取焦点
    focus() {
      this.passwordFocus = true;
    },
    // 输入框失去焦点
    blur() {
      this.passwordFocus = false;
    },
    // 切换手机注册、邮箱注册
    toggleRegisterType(val) {
      this.registerType = val;
      this.password = "";
      this.showPassowrd = false;
    },
    // 验证手机号邮箱
    loginHandle() {
      if (this.disabled === true) {
        return;
      }
      this.disabled = true;
      let regPassword = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
      let lang = this.$store.state.langStr;
      let params = {};
      params.url = this.$apis.api_user_verification;
      params.data = {
        status: "2"
      };
      if (!regPassword.test(this.password)) {
        this.$Toast("密码格式不正确");
        this.disabled = false;
        return false;
      }
      if (this.registerType === "mobile") {
        params.data.mobile = this.item.mobile;
        params.data.countryId = this.item.countryId;
      } else if (this.registerType === "mail") {
        params.data.email = this.item.email;
      }
      this.$net.req(params, this).then(
        res => {
          this.disabled = false;
          if (Number(res.code) === 0) {
            let data = {
              key: this.registerType,
              value:
                this.registerType === "mail"
                  ? this.item.email
                  : this.item.mobile
            };
            this.$util.sessionStorage.save("registerItem", data);
            this.$util.sessionStorage.save(
              "password",
              this.$util.aesEncrypt(this.password)
            );
            this.$util.sessionStorage.save("sendType", 2);
            this.$router.push({
              path: "/" + lang + "/verificationCode",
              query: {
                value:
                  this.registerType === "mail"
                    ? this.item.email
                    : this.item.mobile
              }
            });
          }
        },
        e => {
          this.disabled = false;
          this.$Toast(e.msg);
        }
      );
    },
    // 清空
    clean(val) {
      this[val] = "";
    },
    // 返回
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    }
  }
};
</script>

<style scoped lang="less">
.edit-password-wrap {
  padding: 0 20px;
  background: #fff;
  min-height: 100vh;
  .title {
    display: flex;
    margin: 5px 0 30px -5px;
    i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      font-size: 18px;
      color: #ccc;
    }
  }
  .tab {
    display: flex;
    p {
      font-size: 24px;
      color: #eee;
      font-weight: 500;
      line-height: 34px;
      margin: 0 20px 0 0;
    }
    p.active {
      color: #222;
    }
  }
  .info {
    font-size: 13px;
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
    line-height: 22px;
    margin: 10px 0 28px;
  }
  .login {
    > .active {
      border-color: #ff523d;
    }
    > div {
      border-bottom: 1px solid #eee;
      height: 60px;
      padding: 18px 0 18px 10px;
    }
    i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      font-size: 20px;
      color: #eee;
      flex-shrink: 0;
    }
    input {
      height: 25px;
      margin-left: 20px;
      border: 0;
      width: 100%;
      color: #444;
      font-size: 18px;
      background: transparent;
    }
    ::-webkit-input-placeholder {
      color: #ccc;
    }
    ::-moz-placeholder {
      color: #ccc;
    }
    ::-moz-placeholder {
      color: #ccc;
    }
    :-ms-input-placeholder {
      color: #ccc;
    }
    .close {
      margin-right: 10px;
    }
    .areaCode {
      height: 25px;
      background: rgba(238, 238, 238, 1);
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding: 0 4px;
      margin: 0 -10px 0 -12px;
      span {
        color: #444;
        font-size: 13px;
        flex-shrink: 0;
      }
      i {
        font-size: 8px;
        margin-left: 5px;
        flex-shrink: 0;
        width: auto;
        height: auto;
        color: #444;
      }
    }
  }
  .btn {
    margin: 40px 0 0;
    height: 45px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 28px;
    background: linear-gradient(
      135deg,
      rgba(255, 143, 85, 1) 0%,
      rgba(255, 108, 80, 1) 51%,
      rgba(255, 84, 61, 1) 100%
    );
    border-radius: 25px;
  }
  .btn.disabled {
    background: #eee;
  }
}
</style>
