<template>
  <div style="margin: 0;height:100%;width: 100%">
    <div class="obpmBid">
      <div class="obpm-tou" style="display:none">
        <font class="obpm-Language">简体中文</font>
        <!-- <select name="language" v-model="language" class="obpm-selectLang" @change="changeLanguage">
          <option value="en">English</option>
          <option value="zh">简体中文</option>
          <option value="cn">繁體中文</option>
        </select> -->
      </div>
    </div>
    <div class="loginContent">
      <img src="../assets/images/bg.png">
      <div class="loginmain" >
      <div class="login_title">{{$t('login_title')}}</div>
        <div class="obpm-logoIpt">
          <div v-bind:class="{'obpm-userInfoFist':true,'obpm-userInfoFist2':have}">
            <div>
              <input
                type="text"
                class="obpm-userInfo_input"
                :placeholder="$t('placeholder.username')"
                v-model="username"
              />
            </div>
          </div>
          <div v-bind:class="{'obpm-userPwdFist':true,'obpm-userPwdFist2':have}">
            <div>
              <input
                onfocus="this.value='';"
                type="password"
                class="obpm-password_input"
                :placeholder="$t('placeholder.pwd')"
                autocomplete="off"
                v-model="password"
                @keyup.enter="doLogin"
              />
            </div>
          </div>
          <div v-bind:class="{'obpm-proof':true,'obpm-userPwdFist2':have,'d-none':!have}" >
            <div v-bind:class="{'obpm-proofCode':true,'obpm-proof2':have}">
              <div>
                <input
                  onfocus="this.value='';"
                  type="text"
                  class="obpm-code_input"
                  :placeholder="$t('placeholder.checkcode')"
                  autocomplete="off"
                  v-model="checkcode"
                  @keyup.enter="doLogin"
                />
              </div>
            </div>
            <div class="obpm-proofImg">
              <img :src="checkcodeImg" align="absmiddle" @click="doLogin('changeImg')" id="checkCodeImg">
            </div>
          </div>
          <!-- Show the Errors -->
          <div v-bind:class="{'obpm-errorMessage':true,'d-none':!have}">
            <div class="obpm-tipWord">
              <img class="obpm-tipImg" src="../assets/images/tip1.png">
              <b>{{$t('msg.err')}}:</b><span>{{errmsg}}<br></span>
            </div>
          </div>
          <!-- <div id="tipsArea" class="obpm-tipsArea"></div> -->
          <div v-bind:class="{'obpm-loginIn':true,'obpm-loginIn2':have,'obpm-top':isSHowTop}" @click="doLogin">
            <p>登录</p>
          </div>
        </div>
      </div>
      <div class="obpm-copy">
        <!-- <div class="obpm-img">
          <img src="../assets/images/logo_tl.png"/>
        </div>
        <div style="margin:auto">
           © 2009-2021.
        </div>
        <div style="margin:auto">
          <a href="http://www.teemlink.com" target="_blank" title="广东天翎" class="copyrightA">
            <b>Teemlink.com</b>
          </a>{{$t('reserved')}} 
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/service/CommonApi.js";
import {setCookie, getCookie} from '../utils/utils'
export default {
  data() {
    return {
      username: "",
      password: "",
      have:false,
      isSHowTop:true,
      checkcode:"",
      errmsg:"",
      checkcodeImg:"",
      language: 'zh'
    };
  },
  methods: {
    changeLanguage(){
      this.$i18n.locale = this.language
    },
    doLogin(type="default") {
      let checkcode=""
      if(type=="changeImg"){
        checkcode="1111";
      }else{
        checkcode=this.checkcode;
      }
      let password;
      password=this.processPassword(this.password);
      // 设置多语言
      setCookie('designerLanguage', this.language, 1)
      login(this.username, password,checkcode,{
        onSucess: response => {
          if (response.data.errcode == "0") {
            sessionStorage.setItem('token', response.data.data.designerToken)
            this.$router.push("/home/softwarelist");
          }
          else{
            if(response.data.data.checkcodeImg && response.data.data.checkcodeImg!=""){
              this.checkcodeImg=response.data.data.checkcodeImg
              this.have=true;
              this.isSHowTop = false;
            }else{
              this.have = false;
              this.isShowTop = true;
            }
            this.errmsg=response.data.errmsg;
          }
        }
      });
    },
    processPassword(pw){
      let Base64 = require('js-base64').Base64;
      var str = Base64.encode(pw);
      if(str.length>2){
        var lp = str.substr(0,2);
        var rp = str.substr(2,str.length);
        pw = rp+lp;
      }
      return pw;
    },
  }
};
</script>

<style>


</style>