<template>
  <div :style="appStyle" class="login">
    
    <div class="main">
      <div class="login-form">
        <div class="ttl">系统登录</div>
        <div class="content">
          <div class="inp-line">
            <div class="icon user"></div>
            <div class="inp-el">
              <el-input v-model="params.username" placeholder="请输入账号" />
            </div>
          </div>

          <div class="inp-line">
            <div class="icon pass"></div>
            <div class="inp-el">
              <el-input
                v-model="params.password"
                type="password"
                placeholder="请输入密码"
                @keydown.enter="goLogin"
              />
            </div>
          </div>
        </div>

        <div class="footer">
          <el-button v-loading="logining" @click="goLogin" type="primary">登录</el-button>
          <div class="subs">
            <el-checkbox v-model="params.rememberMe">记住密码</el-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import { login } from '@/api/login'
import { getLoginForm, setLoginForm, removeLoginForm, setToken } from '@/utils/auth'
import { ElLoading } from 'element-plus'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useAppStoreWithOut } from '@/store/modules/app'

const { currentRoute, push } = useRouter()
const appStore = useAppStoreWithOut()

const rateStyle = ref<any>(null)

const appStyle = computed(() => {
  return {
    zoom: appStore.getZoom,
    width: appStore.design + 'px',
    height: window.innerHeight / appStore.getZoom + 'px'
  }
})

const setStyle = (inited = false) => {

  const z = appStore.getZoom
  const w = appStore.design + 'px'
  const h = window.innerHeight / z + 'px'

  rateStyle.value = {
    zoom: z,
    width: w,
    height: h
  }

  if (!inited) {
    window.addEventListener('resize', () => {
      setStyle(true)
    })
  }

  
}

const params = reactive({
  username: '',
  password: '',
  tenantName: 'fbi',
  captchaVerification: '',
  rememberMe: false
})

const loading: Ref<any> = ref(null)
const logining = ref(false)
const redirect = ref('')

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)

const goLogin = async () => {
  loading.value = ElLoading.service({
    lock: true,
    text: '登录中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    logining.value = true

    const res = await login({ ...params })

    if (!res) return

    if (params.rememberMe) {
      setLoginForm({ ...params })
    } else {
      removeLoginForm()
    }

    setToken(res)

    push({ path: '/' })
  } finally {
    loading.value.close()
    logining.value = false
  }
}

const getCache = () => {
  // console.log(getLoginForm())
  const { username, password, rememberMe, tenantName } = getLoginForm() || {}
  username && (params.username = username)
  password && (params.password = password)
  rememberMe && (params.rememberMe = rememberMe)
  tenantName && (params.tenantName = tenantName)
}

onMounted(() => {
  getCache()
  setStyle()
  
})
</script>

<style lang="scss" scoped>
.login {
  background: url(./images/main.jpg) no-repeat;
  background-size: cover;
  background-position: center top;
  .login-form {
    width: 500px;
    height: 392px;
    position: absolute;
    right: 112px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 44, 92, 0.5);
    backdrop-filter: blur(10px);
    color: white;
    .ttl {
      padding-top: 36px;
      padding-left: 40px;
      font-size: 26px;
    }
    .content {
      margin: 30px 40px 0 40px;
      .inp-line {
        height: 45px;
        border-bottom: 1px solid #1890ff;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: white;
        .icon {
          width: 18px;
          height: 18px;
          &.user {
            background: url(./images//user.png) no-repeat;
            background-size: cover;
          }
          &.pass {
            background: url(./images//pass.png) no-repeat;
            background-size: cover;
          }
        }
        .inp-el {
          flex-grow: 1;
        }
        &:nth-child(2) {
          margin-top: 30px;
        }
      }
    }
    .footer {
      margin: 40px 45px 0 45px;
      :deep(.el-button) {
        width: 100%;
        height: 50px;
        font-size: 18px;
      }

      .sso-button {
        margin-left: 0;
        margin-top: 10px;
      }
      .subs {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        align-items: center;
        margin-top: 6px;
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  background-color: transparent !important;
}
</style>

<style lang="scss">
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 0s 600000s,
    color 0s 600000s !important;
}

.login {
  .el-input__inner {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
