<template>
  <div class="login">
    <div class="left-zone"></div>
    <div class="right-zone">
      <IxCard class="login-form-card">
        <!--<img alt="图标" src="@/assets/images/循环.svg">-->
        <div class="header">
          <div class="h1-text">欢迎回来</div>
          <div class="h2-text">垃圾回收监管平台</div>
        </div>
        <IxForm :control="loginForm" class="login-form" @submit.prevent="loginSubmitHandler">
          <IxFormItem messageTooltip>
            <IxInput control="account" prefix="user"/>
          </IxFormItem>
          <IxFormItem class="mima-input" messageTooltip>
            <IxPwdInput control="secret"/>
          </IxFormItem>
          <!--<IxFormItem class="mima-jizhu" messageTooltip>
            <IxCheckbox label="记住密码" control="remember"/>
          </IxFormItem>-->
          <IxFormItem>
            <IxButton block class="denglu-btn" mode="primary" type="submit">登录</IxButton>
          </IxFormItem>
        </IxForm>
      </IxCard>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  useFormGroup,
  Validators
} from '@idux/cdk'
import Colls from '@/common/utils/colls.ts'
import LoginApi from '@/pages/login/login-api.ts'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import { useAppUserStore } from '@/common/app/app-user-store.ts'
import Evt from '@/common/utils/evt.ts'
import Toast from '@/components/toast'
import Utils from '@/common/utils'

const loginForm = useFormGroup<LoginTypes.LoginForm>(
    {
      account: [ '', Validators.required ],
      secret: [ '', Validators.required ],
    },
    {trigger: 'interactions'},
)

const appSettingStore = useAppSettingStore()
const appUserStore = useAppUserStore()

function obtainUserInfo() {
  const loading = Toast.loading('正在获取用户信息')
  LoginApi.my()
      .then(({data}) => {
        // data.menus.unshift(HomeMenu)
        const menuTree = Utils.clone(Colls.toTree(data.menus))
        appSettingStore.$patch({
          menus: data.menus, menuTree,
          theme: data.setting?.theme ?? 'light',
          collectedMenus: data.setting?.collectedMenus ?? [],
          logo: data.setting?.logo,
          language: data.setting?.language ?? 'zh',
        })
        appUserStore.$patch({
          userId: data.id,
          nickname: data.nickname,
          avatar: data.avatar,
          tenantId: data.tenantId,
          tenantName: data.tenantName,
        })
        Evt.emit('login')
      })
      .finally(() => {
        Toast.close(loading)
      })
}

function loginSubmitHandler() {
  if (!loginForm.valid.value) {
    loginForm.markAsDirty()
    return
  }
  const loading = Toast.loading('正在登录')
  LoginApi.login(loginForm.getValue())
      .then(({data}) => {
        appUserStore.$patch({token: data.token,})
        obtainUserInfo()
      })
      .finally(() => {
        Toast.close(loading)
      })
}
</script>

<style lang="css" scoped>
.login {
  height: 100%;
  width: 100%;
  display: flex;
  background-image: url("@/assets/images/login_bg.png");
  background-size: cover;
}

.left-zone {
  flex: 1;
  background-repeat: no-repeat;
  background-position: center;
}

.right-zone {
  flex: 1;
  grid-area: right-zone;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.login-form-card {
  width: 24rem;
  height: 26rem;
  border-radius: 1rem;
}

.login-form-card :deep(.ix-card-body) {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.login-form-card img {
  display: block;
  width: 5rem;
  margin: 4rem auto 4rem auto;
}

.login-form-card .header {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-evenly;
  height: 7rem;
  width: 90%;
  margin: 0 auto;
}

.login-form-card .header .h1-text {
  font-size: 3rem;
  font-weight: bold;
}

.login-form-card .header .h2-text {
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  margin-top: 0.5rem;
}

.login-form {
  width: 90%;
  margin: 0 auto;
}

.mima-input {
  margin: 2rem auto 2rem auto;
}

.mima-jizhu {
  margin: 1rem auto;
}

.denglu-btn {
  margin: 0 auto 1rem auto;
}


</style>
