<template>
  <div class="row full-height">
    <!-- <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-bg"></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 class="q-my-lg q-mx-xl text-center row w-450-only">
        <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> -->
    <div class="col q-pa-xl fit row  justify-center height">
      <div style="width:450px;" class="column  justify-between  content-between">
        <div  :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
          <div class="col" :class="{'text-center q-mb-md':$q.platform.is.mobile}">
            <img src="../../assets/images/jvs-log.png" style="width:80%;" />
          </div>
          <!-- <div class="text-grey-6 text-weight-bold col"  :class="{'text-right':$q.platform.is.desktop,'text-center':$q.platform.is.mobile}">
            <span>{{$t("login.notaccess")}}</span>
            <router-link :to="{ path: '/auth/regist' }" class="text-primary pfb text-subtitle">{{$t("login.registlink")}}</router-link>
          </div> -->
        </div>
        <div class="q-py-xxl full-width">
          <div class="text-h3 text-weight-bold">{{$t("login.title")}}</div>
          <div class="text-grey-6 q-mt-sm q-mb-lg">{{$t("login.subTitle")}}</div>
          <div class="form-box q-my-lg">
            <div class="q-mb-lg">
              <q-input :label="$t('login.account')" standout v-model="userModel.username" dense ref="usernameRef" :rules="userValidateRule.usernameRule" />
            </div>
            <div>
              <q-input :label="$t('login.password')" standout v-model="userModel.password" type="password" dense ref="passwordRef" :rules="userValidateRule.userpasswordRule" />
            </div>
            <div class="text-right">
                <router-link :to="{ path: '/auth/forget' }" class="text-primary pfb text-body no-underline">{{$t("login.forgot")}}</router-link>
            </div>
          </div>
          <div class="row items-center" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
            <div class="col">
              <q-btn size="md" class="q-px-lg" color="primary" :loading="stateManager.subLogin"  @click="loginSubmit" unelevated :label="$t('login.signin')" />
            </div>
            <div class="col text-right" :class="{'q-mt-md':$q.platform.is.mobile}">
              <span class="text-grey-6 q-mr-xs text-weight-bold">OR</span>
              <q-btn size="md"  color="primary" flat round icon="iconfont icon-google" />
              <q-btn size="md" class="q-mx-xs"  color="primary" flat round icon="iconfont icon-facebook" />
              <q-btn size="md"  color="primary" flat round icon="iconfont icon-apple" />
            </div>
          </div>
        </div>
        <div>
          <q-select
            borderless
            v-model="currentLang"
            :options="langs"
            map-options
            option-value="langLocale"
            option-label="langName"
            style="width:180px"
            @update:model-value="getLanguage"
          >
            <template v-slot:selected>
              {{$t("lanuage")}}：
              <q-chip
                dense
                square
                color="white"
                text-color="primary"
                class="q-my-none q-ml-xs q-mr-none"
              >
                {{ currentLang.langName }}
              </q-chip>
            </template>
          </q-select>
        </div>
      </div>
    </div>
    <div class="col right-bg full-height mobile-hide"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import useLgoinModule from '../../module/user/loginModule'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { getLangs } from "../../utils/tools";
import { SitLang } from '../../@types';
export default defineComponent({
  setup() {
    //TODO: 缺陷，验证与提交应该使用Form表单来完成，不应该进行单个验证
    let { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit, stateManager } = useLgoinModule()
    let { setTitle } = useMetaModule()

    const dtNow = new Date().getFullYear()
    const {locale,t } = useI18n();
    setTitle(t("login.pageTitle"))
    const data=reactive({
      currentLang: {} as SitLang,
      langs:[] as SitLang[]
    })
    data.langs=getLangs()
    if(data.langs && data.langs.length>0){
      data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
    }

    // 切换语言
    const getLanguage = (val:any) => {
      locale.value = val.langLocale;
      localStorage.setItem('lanuage', val.langLocale)
    }

    return { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit, dtNow, stateManager,getLanguage,...data}
  }
})
</script>

<style>
.login-bg {
  background-image: url(../../assets/images/8.png);
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.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;
}
.right-bg{
  background-image: url(../../assets/images/login-right-bg.png);
  background-position-x: left;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.top-bg{
  background-image: url(https://preview.keenthemes.com/metronic8/demo1/assets/media/auth/bg11.png);
  background-position-x: -100px;
  background-position-y: -85vh;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
