<template>
  <div class="row login-bg">
    <!-- <div class="col window-height column">
      <div class="col q-pa-lg flex justify-center items-center">
        <div class="relative-position">
          <img src="../../assets/images/big-logo.png" style="height: 60px" class="q-mb-lg" alt="" />
          <div class="text-h5 pfb q-mb-md">欢迎回来，亲爱的用户</div>
          <div class="pfb text-grey-5 text-subtitle">通过配置您的推广渠道，实现对线索和客户的快速获取<br />并且及时的跟进</div>
          <div class="absolute q-mt-md" style="top: 0; left: 180px">
            <q-badge style="background: #cbcfe0" floating transparent>Alpha</q-badge>
          </div>
        </div>
      </div>
      <div class="col q-mb-lg login-bg1"></div>
    </div> -->
    <!-- <div class="col q-pa-xl column">
      <div class="col">
        <q-card class="w-450 q-ma-xl q-pa-xl">
          <div class="text-h5 pfb q-mb-md text-center">登录大水豚</div>
          <div class="text-center q-mb-lg">
            <span class="text-grey-5 pfb text-subtitle">新用户？</span>
            <router-link :to="{ path: '/auth/regist' }" class="text-primary pfb text-subtitle">1分钟创建新账户</router-link>
          </div>
          <div class="text-body pfb">账户：</div>
          <div class="q-mt-xs">
            <q-input standout v-model="userModel.username" dense ref="usernameRef" :rules="userValidateRule.usernameRule" />
          </div>
          <div class="row q-mt-lg">
            <div class="col text-body pfb">密码：</div>
            <div class="col text-right">
              <router-link :to="{ path: '/auth/forget' }" class="text-primary pfb text-body no-underline">忘记密码</router-link>
            </div>
          </div>
          <div class="q-mt-xs">
            <q-input standout v-model="userModel.password" type="password" dense ref="passwordRef" :rules="userValidateRule.userpasswordRule" />
          </div>
          <div class="q-mt-md">
            <q-checkbox dense v-model="userModel.remeber" label="30天免登录" color="accent" />
          </div>
          <div class="q-mt-lg text-center">
            <q-btn class="pfb" color="primary" :loading="stateManager.subLogin" unelevated label="登 录" style="width: 10rem" @click="loginSubmit"></q-btn>
          </div>
        </q-card>
      </div>
    
    </div> -->
    <div class="login-box">
      <div class="login-box-desc"></div>
      <div class="login-box-form">
        <div class="form-title">登录</div>
        <div class="form-content">

          <q-input standout v-model="userModel.username" dense ref="usernameRef" label="账号"
            :rules="userValidateRule.usernameRule" />
          <q-input standout v-model="userModel.password" type="password" dense ref="passwordRef" label="密码"
            :rules="userValidateRule.userpasswordRule" />
          <q-btn color="primary" label="登录" class="login-btn" @click="loginSubmit" />
        </div>
      </div>

    </div>
    <div class="q-my-lg q-mx-xl text-center row w-450-only right-copy">
      <div class="f12 text-dark">© 2021-{{ dtNow }} 微途科技 版权所有</div>
      <div class="text-center col text-right">
        <router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">关于大水豚
        </router-link>
        <router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">联系我们</router-link>
        <router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">技术支持
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    defineComponent
  } from 'vue'
  import useLgoinModule from '@/module/user/loginModule'
  import useMetaModule from '@/module/meta/metaModule'
  export default defineComponent({
    components: {

    },
    setup() {
      //TODO: 缺陷，验证与提交应该使用Form表单来完成，不应该进行单个验证
      let {
        userModel,
        usernameRef,
        passwordRef,
        userValidateRule,
        loginSubmit,
        stateManager
      } = useLgoinModule()
      let {
        setTitle
      } = useMetaModule()
      setTitle('登录')
      const dtNow = new Date().getFullYear()
      return {
        userModel,
        usernameRef,
        passwordRef,
        userValidateRule,
        loginSubmit,
        dtNow,
        stateManager
      }
    }
  })

</script>

<style lang="scss" scoped>
  .login-bg {
    min-height: 100vh;
    background-image: url(../../assets/images/login-bg.jpeg);
    background-position-x: 50%;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    .login-box {
      height: 440px;
      display: flex;
      box-shadow: 0 0 15px 0 rgb(0 66 255 / 9%);
      border-radius: 15px;
      overflow: hidden;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .login-box-desc {
        position: relative;
        width: 375px;
        height: 100%;
        background: url(../../assets/images/8.png) no-repeat 50%;
        background-size: 100%;
        text-align: center;
      }

      .login-box-form {
        position: relative;
        height: 100%;
        width: 366px;

        .form-title {
          width: 252px;
          margin: 60px auto 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e7e7e7;
          position: relative;
          text-align: center;
          position: relative;
          font-size: 20px;
          font-weight: 600;
          color: #000;
          line-height: 28px;
          padding-bottom: 11px;
          cursor: pointer;
        }

        .form-content {
          width: 237px;
          text-align: center;
          margin: 0 auto;

          .login-btn {
            width: 100%;
            margin-top: 15px;
          }
        }
      }
    }
  }
  .right-copy{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .w-450 {
    width: 450px;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
    border-radius: 0.475rem !important;
  }

  .w-450-only {
    width: 450px;
  }

</style>
