<template>
  <div class="set-nickname-wrap">
    <nav-bar title=""/>
    <div class="tab">
      <p>设置昵称</p>
    </div>
    <p class="info">为了给您提供更好的服务，请设置昵称<br>2-20个字符，仅支持字母、数字和汉字</p>
    <div class="login">
      <div class="flex align-c" :class="{active: userNameFocus}">
        <input
          v-model="userName"
          placeholder="请输入昵称"
          @focus="focus()"
          @blur="blur()"/>
        <i class="icon icon-shuruqingkong close" v-if="userName.length && userNameFocus" @click="clean('userName')"></i>
      </div>
    </div>
    <div class="protocol">注册即表示同意<i @click="goAgreement">Hooli服务协议</i>
    </div>
    <van-button
      type="default"
      class="btn"
      :class="{disabled: disabled}"
      @click="registerHandle"
    >完成注册</van-button>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "SetNickname",
  components: {
    NavBar
  },
  data() {
    return {
      loading: false,
      userName: "",
      disabled: true,
      lang: this.$store.state.langStr,
      userNameFocus: false
    };
  },
  created: function() {
    // 获取国家区号
    let areaCodeItem =
      this.$store.state.areaCodeItem ||
      this.$util.storage.fetch("areaCodeItem");
    if (areaCodeItem) this.areaCodeItem = areaCodeItem;
  },
  watch: {
    userName(val) {
      val.length > 1 && val.length < 21
        ? (this.disabled = false)
        : (this.disabled = true);
    }
  },
  mounted: function() {},
  methods: {
    // 输入框获取焦点
    focus() {
      this.userNameFocus = true;
    },
    // 输入框失去焦点
    blur() {
      this.userNameFocus = false;
    },
    // 完成注册
    registerHandle() {
      if (this.disabled === true) {
        return;
      }
      this.disabled = true;
      let params = {};
      let distributor = JSON.parse(
        this.$util.sessionStorage.fetch("distributor")
      );
      params.url = this.$apis.api_user_register;
      params.data = {
        password: this.$util.aesDecrypt(
          this.$util.sessionStorage.fetch("password")
        ),
        registerSource: "h5",
        sourceCode: "nature_mobile",
        userName: this.userName
      };
      if (distributor) {
        Object.assign(params.data, distributor);
      }
      let item = this.$util.sessionStorage.fetch("registerItem");
      if (item.key === "mail") {
        params.data.email = item.value;
      } else {
        params.data.mobile = item.value;
        params.data.countryId =
          this.$store.state.areaCodeObj.id ||
          this.$util.storage.fetch("areaCodeItem").id;
      }
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            this.$Toast("注册成功");
            setTimeout(() => {
              this.$store.commit("setUserObj", res.data);
              let userInfo = encodeURIComponent(JSON.stringify(res.data));
              this.$util.storage.save("loginUserInfo", userInfo);
              this.$util.storage.save("userToken", res.data.token);
              this.$util.sessionStorage.remove("registerItem");
              this.$util.sessionStorage.remove("sendType");
              this.$util.sessionStorage.remove("distributor");
              // 客源表单
              if (this.$util.sessionStorage.fetch("guide")) {
                this.$router.push({
                  path: "/" + this.lang + "/form"
                });
              } else {
                this.$router.push({
                  path: `/`
                });
              }
            }, 1500);
          } else {
            this.$Toast(res.msg);
            this.disabled = false;
          }
        },
        e => {
          this.disabled = false;
          this.$Toast(e.msg);
        }
      );
    },
    // 清空
    clean(val) {
      this[val] = "";
    },
    // 跳转协议
    goAgreement() {
      this.$router.push({
        path: "/common/service-agreement"
      });
    }
  }
};
</script>

<style scoped lang="less">
.set-nickname-wrap {
  padding: 0 20px;
  background: #fff;
  min-height: 100vh;
  .van-nav-bar {
    margin-bottom: 30px;
  }
  .tab {
    display: flex;
    p {
      font-size: 24px;
      color: #222;
      font-weight: 500;
      line-height: 34px;
      margin: 0 20px 0 0;
    }
  }
  .info {
    font-size: 13px;
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
    line-height: 22px;
    margin: 10px 0 28px;
  }
  .login {
    > 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: 14px;
      color: #eee;
      flex-shrink: 0;
    }
    input {
      height: 25px;
      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;
    }
  }
  .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>
