<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 items-center">
          <div class="col">
            <q-btn round flat size="md" @click="goback">
              <svg-icon icon="Navigation/Arrow-left.svg" :size="24" tips="$t('forget.goback')"></svg-icon>
            </q-btn>
          </div>
          <div class="text-grey-6 text-weight-bold text-right" >
            <span>{{$t("forget.notaccess")}}</span>
            <router-link :to="{ path: '/auth/login' }" class="text-primary pfb text-subtitle">{{$t("forget.registlink")}}</router-link>
          </div>
        </div>
        <div class="q-py-xxl full-width">
          <div class="text-h3 text-weight-bold">{{$t("forget.title")}}</div>
          <div class="text-grey-6 q-mt-sm q-mb-lg">{{$t("forget.subtitle")}}</div>
          <div class="form-box q-my-lg">
            <div class="q-mb-lg">
              <q-input :label="$t('forget.account')" standout v-model="account" dense ref="accountRef" :rules="[(val:any, rules:any) => rules.email(val) || $t('login.ruleTipsAccount')]" />
            </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="loading"  @click="sendVerifyCode" unelevated :label="$t('forget.submit')" />
            </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>
  <q-dialog no-esc-dismiss persistent v-model="successModel">
      <q-card :class="{'q-pa-xl':$q.platform.is.desktop,'q-pa-lg':$q.platform.is.mobile}">
        <q-card-section>
          <div class="text-center q-mb-md">
            <svg-icon icon="Code/Done-circle.svg" color="success" :size="80"></svg-icon>
          </div>
          <div>{{$t('forget.mailResult')}}</div>
          <div class="text-center q-mt-xl">
            <q-btn color="primary" @click="goback" unelevated :label="$t('forget.resultBtn')" />
          </div>
        </q-card-section>
      </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { getLangs } from "../../utils/tools";
import { SitLang } from '../../@types';
import svgIcon from '../../components/global/svg-icon.vue';
import UserService from '../../api/user';
import message from '../../utils/message';
import { ApiResult } from '../../@types/enumHelper';
import { useQuasar } from 'quasar';

export default defineComponent({
  components: { svgIcon },
  setup() {
    let { setTitle } = useMetaModule()

    const accountRef = ref(null)
    const {locale,t } = useI18n();
    setTitle(t("forget.pageTitle"))
    const data=reactive({
      currentLang: {} as SitLang,
      langs:[] as SitLang[],
      account:'',
      loading:false,
      successModel:false
    })
    data.langs=getLangs()
    if(data.langs && data.langs.length>0){
      data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
    }

    let methods = {
      sendVerifyCode(){
        if(data.loading) return
        const accountRefVal=accountRef as any
        console.log(accountRef.value)

        accountRefVal.value.validate()
        if(!accountRefVal.value.hasError){
          data.loading=true
          //hasError
          UserService.sendVerify({account:data.account,platform:3}).then(r=>{
            console.log(r)
            data.loading=false
            if(r.data.resultCode==ApiResult.SUCCESS){
              data.successModel=true
            }else{
              message.errorMsg(r.data.message)
            }
          }).catch(e=>{
            data.loading=false
            message.errorMsg(e.message)
          })
        }
      },
      goback(){
        window.history.go(-1)
      },
      // 切换语言
      getLanguage(val:SitLang) {
        locale.value = val.langLocale??'';

        localStorage.setItem('lanuage', val.langLocale??'')
      }
    }

    return { ...toRefs(data), ...methods,accountRef }
  }
})
</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>
