<template>
  <!-- 登录 -->
  <div id="login">
    <headers></headers>
    <div class="comm_100">
      <div class="auto_1200 goplastic_name">
        <router-link tag="a" :to="'/'" class="a_left"></router-link>
        <span>{{$t('login.login1')}}</span>
      </div>
    </div>
    <div class="content_back">
      <ul>
        <li class="li_a">
          <span>{{$t('login.login1')}}</span>
          <span>
            {{$t('login.login8')}}
            <router-link tag="a" :to="'/signin'">{{$t('home.home4')}}</router-link>
          </span>
        </li>
        <li class="li_pi">
          <p>{{$t('login.login2')}}</p>
          <input
            type="text"
            :placeholder="$t('login.login3')"
            v-model="userMobile"
            @keyup.enter="evnameFun($event)"
          />
        </li>
        <li class="li_pi">
          <p>{{$t('login.login4')}}</p>
          <input
            type="password"
            :placeholder="$t('login.login5')"
            v-model="password"
            @keyup.enter="evpassFun($event)"
            id="pas_name"
          />
        </li>
        <li class="li_jy">
          <div id="captchaLogin"></div>
          <div v-show="waitShow" id="wait">{{$t('signin.signin25')}}</div>
        </li>
        <li class="li_login">
          <el-button type="button" @click="onLogin" :loading="btnStatus">{{$t('login.login1')}}</el-button>
        </li>
        <li class="li_wjmm clearfloat">
          <p>
            <input type="checkbox" v-model="isShow" class="check_box" />
            <span>{{$t('login.login6')}}</span>
          </p>
          <a href="/nopassword">{{$t('login.login7')}}?</a>
        </li>
      </ul>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import { fetchGet, fetchPost, userapi, messageapi, logins } from "@/https";
// import { mapActions } from "vuex";
import vuex from "vuex";
import gtInit from "@/gt";
import headers from "@/views/headers";
import footers from "@/views/footers";
export default {
  name: "login",
  components: {
    headers,
    footers
  },
  data() {
    return {
      userMobile: "",
      password: "",
      isShow: true,
      waitShow: true,
      captchaObj: {},
      result: {},
      btnStatus: false,
      loggingStatus: 2
    };
  },
  created() {
    this.getInitGtTest();
  },
  methods: {
    //跳去首页
    gohome() {
      this.$router.push({
        path: "/indexs"
      });
    },
    //账号回车
    evnameFun(ev) {
      if (ev.keyCode == 13) {
        const nextDom = document.getElementById("pas_name");
        nextDom.focus();
      }
    },
    //密码回车
    evpassFun(ev) {
      if (ev.keyCode == 13) {
        this.onLogin();
      }
    },
    //登录
    onLogin() {
      //判断用户名
      if (
        !this.userMobile ||
        this.userMobile == "" ||
        this.userMobile == null
      ) {
        this.$notify({
          message: this.$t("login.login3"),
          type: "warning"
        });
        return;
      }
      //判断密码
      if (!this.password || this.password == "" || this.password == null) {
        this.$notify({
          message: this.$t("login.login5"),
          type: "warning"
        });
        return;
      }
      //判断极验
      if (
        !this.result.geetest_challenge &&
        !this.result.geetest_validate &&
        !this.result.geetest_seccode
      ) {
        return this.$notify({
          message: this.$t("login.login9"),
          type: "warning"
        });
      } else {
        this.btnStatus = true;
        var _this = this;
        if (_this.isShow == true) {
          _this.loggingStatus = 1;
        } else {
          _this.loggingStatus = 2;
        }
        let form = {
          mobile: _this.userMobile,
          password: _this.password,
          geetest_challenge: _this.result.geetest_challenge,
          geetest_validate: _this.result.geetest_validate,
          geetest_seccode: _this.result.geetest_seccode,
          holeLogin: _this.loggingStatus
        };
        fetchPost(userapi + "/customer/login", form)
          .then(data => {
            this.btnStatus = false;
            this.captchaObj.reset();
            this.result = {};
            if (data.data.code == 200) {
              _this.$notify.success({
                message: this.$t("login.login10")
              });
              localStorage.setItem("gptoken", data.data.data.token);
              localStorage.setItem("gpusername", data.data.data.user.mobile);
              localStorage.setItem("userId", data.data.data.user.id);
              localStorage.setItem("userName", data.data.data.user.name);
              localStorage.setItem("gsId", data.data.data.companyId);
              localStorage.setItem("gsName", data.data.data.companyName);
              localStorage.setItem("cyType", data.data.data.companyType);
              this.gohome();
            } else {
              _this.$notify.error({
                message: data.data.msg
              });
            }
          })
          .catch(err => {});
      }
    },
    getInitGtTest() {
      fetchGet(userapi + "/gt/register?t=" + new Date().getTime())
        .then(res => {
          if (res.status === 200) {
            const data = res.data;
            window.initGeetest(
              {
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示新验证码的宕机是
                product: "popup", // 产品形式, float, popup
                width: "100%", //  width: "300px" 极验显示宽度
                lang: localStorage.getItem("gPLang")
              },
              captchaObj => {
                // 箭头函数 若使用function 使用this报错
                this.captchaObj = captchaObj;
                captchaObj.appendTo("#captchaLogin");
                captchaObj.onReady(() => {
                  this.waitShow = false; // 隐藏等待提示
                });
                captchaObj.onSuccess(() => {
                  /**
                   * 将极验结果赋值给result 便于在点击登录按钮时做判断 是否已经完成极验
                   */
                  this.result = captchaObj.getValidate();
                });
                captchaObj.onError(() => {});
              }
            );
          }
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped lang="scss">
#login {
  .content_back {
    background-image: url("https://oss.goplastic.cn/goplasticCommon/login_banner.png");
    background-size: 100% 100%;
    width: 100%;
    height: 510px;
    padding-top: 74px;
    box-sizing: border-box;
    margin-bottom: 125px;
    ul {
      width: 380px;
      height: 365px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.03);
      border-radius: 4px;
      margin: 0 auto;
      .li_a {
        height: 52px;
        line-height: 52px;
        overflow: hidden;
        border-bottom: 1px solid #f5f5f5;
        padding: 0 34px;
        span:nth-child(1) {
          float: left;
          font-size: 16px;
          color: #333333;
        }
        span:nth-child(2) {
          float: right;
          font-size: 12px;
          color: #7d7d7d;
          a {
            color: #2590ff;
            text-decoration: underline;
          }
        }
      }
      .li_pi {
        font-size: 12px;
        padding: 0 34px;
        p {
          color: #333333;
          height: 42px;
          line-height: 42px;
        }
        input {
          background: #f5f5f5;
          width: 100%;
          height: 38px;
          border-radius: 1px;
          padding: 0 10px;
          box-sizing: border-box;
          border: none;
        }
        ::-webkit-input-placeholder {
          color: #a7a7a7;
        }
        input[type="text"]:focus,
        input[type="password"]:focus {
          border: 1px solid rgba(228, 228, 228, 1);
        }
      }
      .li_jy {
        padding: 10px 34px 10px;
      }
      .li_login {
        padding: 0 34px;
        button {
          width: 100%;
          height: 38px;
          background: #2590ff;
          color: white;
          font-size: 14px;
          border: none;
          border-radius: 1px;
          opacity: 0.8;
        }
        button:hover {
          opacity: 1;
        }
      }
      .li_wjmm {
        font-size: 12px;
        padding: 12px 34px 0;
        p {
          float: left;
          span {
            color: #7d7d7d;
          }
        }
        a {
          color: #2590ff;
          float: right;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>