<template>
  <div class="row full-height">
    <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 v-if="isDomainName_PIC" src="../../assets/images/jvs-log.png" style="width:80%;" />
            <img v-else src="http://imgfile.oytour.com/Upload/WebSite/202303170746500900000000054.png" style="width:80%;" />
          </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, inject } 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';
import { useQuasar } from 'quasar';
import { DirtionmaryHelper } from '../../config/dictionary'
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[],
      isDomainName_PIC:true
    })

    // 根据域名渲染logo
    data.isDomainName_PIC = inject(DirtionmaryHelper.DOMAIN_NAME)

    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>
