<template>
  <div class="login-wrap">
    <div class="title">
      <i class="icon icon-guanbi" @click="goBack"></i>
    </div>
    <h4>登录</h4>
    <p class="register">还没有账号？马上 <span @click="goNextPage('register')">注册</span></p>
    <div class="login">
      <div class="flex align-c" :class="{active: valueFocus}">
        <i class="icon icon-wode-jingjiren"></i>
        <input
          v-model="value"
          @focus="focus('value')"
          @blur="blur('value')"
          placeholder="请输入手机号/邮箱"
        />
        <i class="icon icon-shuruqingkong close" v-if="value.length && valueFocus" @click="clean('value')"></i>
      </div>
      <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 class="other-router flex_sb align-c">
      <p @click="goNextPage('smsLogin')">使用验证码登录</p>
      <span @click="goNextPage('forget')">忘记密码</span>
    </div>
    <div class="other-login" v-show="false">
      <p>其他登录方式</p>
      <div class="flex_sa align-c">
        <i class="icon icon-guanbi"></i>
        <i class="icon icon-guanbi"></i>
        <i class="icon icon-guanbi"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      value: "",
      valueFocus: false,
      passwordFocus: false,
      disabled: true,
      password: "",
      lang: this.$store.state.langStr,
      showPassowrd: false
    };
  },
  created: function() {},
  mounted: function() {},
  watch: {
    value(val) {
      val.length && this.password.length
        ? (this.disabled = false)
        : (this.disabled = true);
    },
    password(val) {
      val.length && this.value.length
        ? (this.disabled = false)
        : (this.disabled = true);
    }
  },
  methods: {
    // 确定登录
    loginHandle: function() {
      if (this.disabled === true) {
        return;
      }
      this.disabled = true;
      let params = {};
      params.url = this.$apis.api_user_login;
      params.data = {
        string: this.value,
        password: this.password
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            if (Number(res.data.status) !== 0) {
              this.$Dialog
                .confirm({
                  message: "登录密码异常，请通过短信验证码登录"
                })
                .then(() => {
                  let lang = this.$store.state.langStr;
                  this.$router.push({
                    path: `/${lang}/smsLogin`
                  });
                })
                .catch(() => {
                  // on cancel
                });
              return;
            }
            this.$Toast("登录成功");
            this.$store.commit("setUserObj", res.data.userInfo);
            let userInfo = encodeURIComponent(
              JSON.stringify(res.data.userInfo)
            );
            this.$util.storage.save("loginUserInfo", userInfo);
            this.$util.storage.save("userToken", res.data.userInfo.token);
            setTimeout(() => {
              // 客源表单
              if (this.$util.sessionStorage.fetch("guide")) {
                this.$router.push({
                  path: "/" + this.lang + "/form"
                });
              } else {
                if (this.$route.query.next) {
                  this.$router.push({
                    path: this.$route.query.next
                  });
                } else {
                  this.$router.push({
                    path: `/`
                  });
                }
              }
            }, 1500);
          } else {
            this.disabled = false;
            this.$Toast(res.msg);
          }
        },
        e => {
          this.disabled = false;
          this.$Toast(e.msg);
        }
      );
    },
    goNextPage(val) {
      this.$router.push({
        path: "/" + this.lang + "/" + val
      });
    },
    // 输入框获取焦点
    focus(value) {
      if (value === "value") {
        this.valueFocus = true;
      } else if (value === "password") {
        this.passwordFocus = true;
      }
    },
    // 输入框失去焦点
    blur(value) {
      if (value === "value") {
        this.valueFocus = false;
      } else if (value === "password") {
        this.passwordFocus = false;
      }
    },
    // 清空
    clean(val) {
      this[val] = "";
    },
    // 返回
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    }
  }
};
</script>

<style scoped lang="less">
.login-wrap {
  padding: 0 20px;
  background: #fff;
  min-height: 100vh;
  .title {
    display: flex;
    justify-content: flex-end;
    margin: 5px -5px 30px 0;
    i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      font-size: 14px;
      color: #ccc;
    }
  }
  > h4 {
    font-size: 24px;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    line-height: 33px;
  }
  .register {
    font-size: 13px;
    font-weight: 400;
    color: #ccc;
    margin: 10px 0 30px;
    line-height: 18px;
    span {
      color: #ff523d;
    }
  }
  .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: 18px;
      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;
    }
  }
  .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;
  }
  .other-router {
    margin: 20px 0 60px;
    span {
      color: #999;
      font-size: 13px;
    }
    p {
      color: #999;
      font-size: 13px;
    }
  }
  .other-login {
    position: relative;
    text-align: center;
    p {
      font-size: 13px;
      color: #ccc;
      position: relative;
      z-index: 2;
      background: #fff;
      display: inline-block;
      margin: 0 auto;
      padding: 0 28px;
    }
    i {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      width: 34px;
      height: 34px;
      font-size: 26px;
    }
  }
  .other-login:before {
    content: "";
    height: 1px;
    width: 100%;
    background: #ccc;
    position: absolute;
    top: 10px;
    left: 0;
  }
}
</style>
