<script lang="ts" setup>
import LoginApi from '@/pages/login/login-api.ts'
import { useAppUserStore } from '@/common/app/app-user-store.ts'
import Evt from '@/common/utils/evt.ts'
import { appName } from '@/common/index.ts'
import {
  type FormInstance,
  type FormRules,
} from 'element-plus'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import { reloadUserInfo } from '@/common/app'
import { appTitle } from '@/common'

const loginFormIns = useTemplateRef<FormInstance>('loginFormRef')

const loginForm = reactive<LoginTypes.LoginForm>({
  account: '',
  secret: '',
  clientCode: 1,
})
const rules = reactive<FormRules<LoginTypes.LoginForm>>({
  account: [
    {
      validator(_, value, callback) {
        if (Strings.isBlank(value)) {
          callback(new Error('账号不能为空'))
        } else {
          callback()
        }
      }, trigger: 'blur',
    },
  ],
  secret: [
    {
      validator(_, value, callback) {
        if (Strings.isBlank(value)) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }, trigger: 'blur',
    },
  ],
})

const appUserStore = useAppUserStore()

const loading = ref<boolean>(false)

function loginSubmitHandler() {
  loading.value = true
  FormUtil.submit(
    loginFormIns,
    () => LoginApi.login(loginForm))
    .then(({data}) => {
      appUserStore.$patch({token: data.token})
      return reloadUserInfo()
    })
    .then(() => {
      Evt.emit('login')
    })
    .finally(() => {
      loading.value = false
    })

}
</script>

<template>
  <div class="login">
    <div class="login-top">南京再昇云 — 再生环保开拓者</div>
    <div class="login-content">
      <div class="login-content-left">
        <div class="form-title">
          {{ appName }}
        </div>
        <ElForm
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          class="form-content"
          @submit.prevent="loginSubmitHandler">
          <ElFormItem prop="account">
            <ElInput size="large" v-model="loginForm.account" placeholder="请输入账号"/>
          </ElFormItem>
          <ElFormItem class="mima-input" prop="secret">
            <ElInput size="large" v-model="loginForm.secret" placeholder="请输入密码" show-password type="password"/>
          </ElFormItem>
          <ElFormItem>
            <ElButton
              :loading="loading"
              class="denglu-btn"
              native-type="submit"
               size="large"
              type="primary">登录
            </ElButton>
          </ElFormItem>
        </ElForm>
      </div>
      <div class="login-content-right">
        <div class="login-content-right-center">
          <img alt="" src="@/assets/images/zsy.png"/>
          <span>{{ appTitle }}</span>
        </div>
      </div>
    </div>
    <div class="login-bottom">
      <a href="https://beian.miit.gov.cn" style="margin-left: 15px;color: #676767;" target="_blank">Copyright © 2023~2025 南京再昇云 版权所有</a>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
@-webkit-keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.login {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap nowrap
  background: url(@/assets/images/bg3.png) no-repeat;
  background-size: 100% 100%;

  .login-top {
    text-align: center;
    font-size: 39px;
    margin-bottom: 50px;
    letter-spacing: 5px;
    color: #FFFFFF;
    font-weight: 600;
  }

  .login-content {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap 80px

    .login-content-left {
      flex-shrink: 0;
      width: 430px;
      height: 380px;
      padding: 0;
      background: #FFFFFF4F;

      .form-title {
        margin-top: 40px;
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
      }

      .form-content {
        padding: 40px 30px 0;


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

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

      }
    }

    .login-content-right {
      height: 500px;
      width 500px;
      position: relative;
      flex-shrink: 0;

      &::before {
        content ''
        position absolute
        top 0
        left 0
        height: 500px;
        width 500px;
        background-image url('@/assets/images/procedure.png')
        background-size: 100% 100%;
        animation: rotation 20s linear infinite;
      }

      .login-content-right-center {
        width 100px;
        height 100px
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        img {
          width: 60px;
          height: 60px;
        }

        span {
          display: block;
          text-align: center;
          // margin-top: 3px;
          font-size: 28px;
          width: 100px;
          color: #56BA5E;
          font-weight: 600;
        }
      }

    }
  }

  .login-bottom {
    text-align: center;
    position: absolute;
    bottom: 20px;
    color: #808080;
  }

}


</style>
