<template>
  <div
    class="login-container"
    :class="backgroundClass"
    ref="login-container"
    :style="{
      background: imageUrl
        ? 'url(' + imageUrl + ') center center/cover no-repeat'
        : 'auto',
    }"
    v-show="showContent"
  >
    <div class="login-main" style="height: auto">
      <el-tabs v-model="activeName" @tab-click="changeTab">
        <el-tab-pane :label="$t1('账号登录')" name="first" v-if="accountLoagin">
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="box-form login"
            autocomplete="on"
            label-position="left"
          >
            <el-form-item prop="username" class="txt">
              <span class="svg-container"><i class="el-icon-user" /></span>
              <el-input
                ref="username"
                v-model="loginForm.username"
                :placeholder="$t1('请输入用户名')"
                name=""
                type="text"
                tabindex="1"
                autocomplete="on"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-tooltip
              :enterable="false"
              v-model="capsTooltip"
              content="Caps lock is On"
              placement="right"
              manual
            >
              <el-form-item prop="password" class="txt">
                <span class="svg-container"><i class="el-icon-lock" /></span>
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model="loginForm.password"
                  :type="passwordType"
                  :placeholder="$t1('请输入密码')"
                  name=""
                  tabindex="2"
                  autocomplete="on"
                  auto-complete="new-password"
                  @keyup.native="checkCapslock"
                  @blur="capsTooltip = false"
                  @keyup.enter.native="handleLogin"
                />
                <span class="show-pwd" @click="showPwd"
                  ><svg-icon
                    :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                /></span>
              </el-form-item>
            </el-tooltip>
            <div class="">
              <el-checkbox v-model="isRememberPassword">{{
                $t1("记住密码")
              }}</el-checkbox>
            </div>
            <el-button
              :loading="loading"
              type="primary"
              @click.prevent.stop="handleLogin"
              class="btn"
              >{{ $t1("登录") }}</el-button
            >
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t1('手机登录')" name="second" v-if="phoneLogin">
          <el-form
            ref="loginForm"
            :model="loginForm2"
            :rules="loginRules"
            class="box-form login"
            autocomplete="on"
            label-position="left"
          >
            <el-form-item prop="username" class="txt" style="width: 66%">
              <span class="svg-container"><i class="el-icon-mobile-phone" /></span>
              <el-input
                ref="mobile"
                v-model="loginForm2.username"
                :placeholder="$t1('请输入手机号')"
                name=""
                type="text"
                tabindex="1"
                autocomplete="on"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-button
              class="btn-send"
              type="success"
              :class="{ 'gray-btn': isCounting }"
              @click="sendCode"
            >
              {{ buttonText }}
            </el-button>
            <el-form-item prop="smsCode" class="txt">
              <span class="svg-container"><i class="el-icon-message" /></span>
              <el-input
                ref="smsCode"
                v-model="loginForm2.smsCode"
                :placeholder="$t1('请输入验证码')"
                name=""
                type="text"
                tabindex="1"
                autocomplete="on"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              @click.prevent.stop="handleLogin"
              class="btn"
              >{{ $t1("登录") }}</el-button
            >
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t1('扫码登录')" name="third" v-if="qrLogin">
          <div class="login-qr">
            <img class="qr__img" :src="qrBase64" v-if="activeName === 'third'" />
            <span class="qr__txt">{{ $t1("扫一扫，登录系统") }}</span>
            <div v-if="qrExpired" @click="initQR" class="qr__lose">
              <span><i class="el-icon-refresh"></i>{{ $t1("二维码失效") }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tc copyright" v-show="loginConfig.hide_filing_info !== true">
      <slot name="footer">
        © {{ this.$t1(loginConfig.filing_company || "广州同望科技发展有限公司") }}
        <span style="margin-left: 50px" v-if="!!loginConfig.filing_number">{{
          loginConfig.filing_number + "   " + (loginConfig.phone || "4000646100")
        }}</span>
        <span style="margin-left: 50px" v-if="!loginConfig.filing_number">{{
          loginConfig.phone || "4000646100"
        }}</span>
      </slot>
    </div>
  </div>
</template>

<script>
import mixin from "./indexMixin";

export default {
  name: "Login",
  mixins: [mixin],
};
</script>
<style lang="scss" scoped>
@import "@/resources/css/login.scss";

.login-container.tc {
  background: url(~@/resources/images/bg-login5.jpg) center center/cover no-repeat;
}

.login-container.chigo {
  background: url(~@/resources/images/bg-login6.jpg) center center/cover no-repeat;
}

.login-container.pcp {
  background: url(~@/resources/images/bg-login8.jpg) center center/cover no-repeat;
}

.el-select-dropdown {
  right: 5px;
  top: 25px;
}
.box-form {
  height: 330px;
}
::v-deep .login-main .el-tabs__header {
  margin-bottom: 0;

  .el-tabs__nav {
    line-height: 65px;
    margin: 0 25px;
    width: calc(100% - 50px);

    .el-tabs__item {
      font-size: 18px;
      width: 50%;
      text-align: center;
      margin-right: 0;
      padding-right: 0 !important;
      line-height: 65px;
      height: 65px;
    }
  }
}

.btn-send {
  position: absolute;
  margin-top: -74px;
  right: 35px;
  height: 52px;
  width: 27%;

  &.gray-btn {
    background: #dedede;
    border-color: #dedede;
    color: #8a8686;
  }
}

::v-deep .login-main .el-tabs__header .el-tabs__nav .el-tabs__item {
  width: 33%;
}
.login-qr {
  height: 330px;
  text-align: center;
  position: relative;
  .qr__img {
    width: 220px;
    margin-top: 40px;
  }
  .qr__txt {
    color: #666;
    font-size: 15px;
    display: block;
  }
  .qr__lose {
    position: absolute;
    cursor: pointer;
    width: 192px;
    height: 192px;
    background: rgb(255 255 255 / 76%);
    top: 60px;
    left: 136px;
    color: #000;
    line-height: 64px;
    font-weight: 600;
    font-size: 26px;
    span {
      line-height: 1;
      margin-top: 30px;
    }
    i {
      display: block;
      font-size: 42px;
      margin-top: 46px;
    }
  }
}
</style>
