<!--
 * @Date: 2020-06-28 10:46:51
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-10-19 10:00:03
 * @Description: 客户登录
--> 
<template>
  <div class="client-login-container login-container">
    <div class="login-frame-parents-content">
      <!-- <div class="login-bg"> </div> -->
      <!-- <img class="login-bg" src="@/assets/images/client/bg.png" /> -->
      <div class="login-frame-content">
        <img class="logo" src="@/assets/images/logoTop.png" />
        <div class="t-c title">
          <a href="">{{config.title}}</a>
        </div>
        <a-form :model="formData" :wrapper-col="{span:24}" :rules="loginRules" autocomplete="on" class="login-form" laba-position="left" ref="formRef">
          <a-form-item name="username">
            <div class="flex-l-r">

              <a-input class="login-input" :spellcheck="false" autocomplete="off" name="username" placeholder="用户名" ref="username" tabindex="1" type="text" v-model:value="formData.username">
                <template #prefix>
                  <i class="iconfont svg-container icon-user2"></i>
                </template>
              </a-input>
            </div>
          </a-form-item>
          <a-form-item name="password">
            <div class="flex-l-r">
              <a-input-password class="login-input" :key="passwordType" :type="passwordType" @keyup.enter.native="handleLogin" autocomplete="on" name="password" placeholder="密码" ref="password"
                tabindex="2" v-model:value="formData.password">
                <template #prefix>
                  <i class="iconfont svg-container icon-lock1"></i>
                </template>
              </a-input-password>
            </div>
          </a-form-item>
          <a-form-item name="code">
            <a-input class="login-input  " @keyup.enter.native="handleLogin" placeholder="验证码" v-model:value="formData.code">
              <template #prefix>
                <i class="iconfont svg-container icon-safe"></i>
              </template>
              <template #suffix>
                <img class="login-img" :src="loginCode" @click="initLogin" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-model:checked="checked">记住密码</a-checkbox>
          </a-form-item>
          <a-button v-loading="loading" type="primary" size="large" block @click.native.prevent="handleLogin">登 录
          </a-button>
          <!-- <obit-button :loading="loading" animation="line-left-bottom" @click.native.prevent="handleLogin"
            style="width: 100%; margin-top: 20px; color: #fff" type="primary">登 录</obit-button> -->
        </a-form>
        <obit-foot class="foot-top m-b-20"></obit-foot>
      </div>
    </div>
  </div>
</template>

<script>
import visable from './../../styles/theme/default/variable.less'
import { toRefs } from 'vue'
import loginHook from '../../hook/login/v2.js'
export default {
  name: 'Login',
  setup (props, context) {
    let login = loginHook({
      checked: true
    })
    console.log('🚀 ~ file: login.vue ~ line 64 ~ visable', visable)
    return {
      ...toRefs(login._data),
      ...login._method,
      ...login._computed
    }
  },
}
</script>

<style lang="less">
.client-login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f2f5;
  overflow-y: auto;
  background-image: url('./../../src/assets/images/client/bg.png');
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: center top;
  .login-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 100% 100%;
  }
  .login-img {
    width: 90px;
    height: 100%;
  }
  .login-frame-parents-content {
    width: 100%;
    min-height: 100%;
    .login-form {
      .svg-container {
        color: #1890ff;
        font-size: 18px;
      }
      .ant-form-item {
        height: 40px;
        .login-input {
          height: 40px;
        }
      }
      .ant-form-item-with-help {
        margin-bottom: 24px;
      }
    }
    .login-frame-content {
      width: 360px;
      margin: 0 auto;
      padding-top: 10%;
      height: 100%;
      overflow: hidden;
      .logo {
        width: 105px;
        display: block;
        margin: 0 auto;
      }
      .title {
        font-family: PingFang HK;
        font-style: normal;
        font-weight: 600;
        font-size: 28px;
        line-height: 28px;
        margin-bottom: 60px;
      }
    }
  }
}
</style>
