<template>
  <div class="container">
    <el-alert
      title="账号密码暂时无效，点击登录即可"
      type="warning"
      class="alert"
      :closable="false"
      center
    />

    <form action="#" class="login-form">
      <el-form class="login-container" label-position="left" label-width="0px">
        <h2 class="login_title">系统登录</h2>
        <el-form-item>
          <el-input
            type="text"
            v-model="loginForm.username"
            auto-complete="off"
            placeholder="账号"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-input
            type="password"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="login-btn">
            <el-button type="primary" style="width: 120px" @click="login">登录</el-button>
            <el-upload
              :action="action"
              :show-file-list="false"
              :on-success="onUpload"
              style="margin-bottom: 20px"
            >
              <el-button v-if="flag" type="primary" style="margin-left: 20px">导入租户</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </form>
  </div>
</template>

<script setup lang="ts">
import { useTenantStore } from '@/stores/modules/tenant'

const tenantStore = useTenantStore()

const action = '/admin/api/lic/info/file/import'
const loginForm = ref({
  username: '',
  password: ''
})
const flag = ref(false)
const router = useRouter()

const onUpload = async (res: any) => {
  try {
    if (res.code === 200) {
      router.push('/tenant')
      flag.value = false
      ElMessage.success('导入成功')
    } else ElMessage.error(res.msg)
  } finally {
    await tenantStore.initTenantList()
  }
}

const login = () => {
  tenantStore.initTenantList().then(() => {
    if (tenantStore.getTenantList.length) router.push('/tenant')
    else {
      ElMessage.error('租户不存在，请先导入租户信息')
      flag.value = true
    }
  })
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0000001f;
}
.alert {
  position: absolute;
  top: 2%;
}

.login-form {
  width: 240px;
  height: 220px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 100;
  background: inherit;
  border-radius: 18px;
  overflow: hidden; /* 隐藏多余的模糊效果*/
}

.login-form::before {
  content: '';
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
  background: inherit;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25);
  filter: blur(6px);
  z-index: -1;
}

.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  color: #3d5245;
}

.login-form input,
.login-form button {
  margin: 6px 0;
  height: 36px;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 0 14px;
  color: #3d5245;
}

.login-form input::placeholder {
  color: #3d5245;
}

.login-form button:focus,
.login-form input:focus {
  outline: 0;
}

.login-form button {
  margin-top: 24px;
  background-color: rgba(57, 88, 69, 0.4);
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s;
}

.login-form button:hover {
  background-color: rgba(12, 80, 38, 0.67);
}

.el-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h2 {
  margin: 10px 0 20px 0;
}

.el-form-item {
  width: 250px;
}

:deep(.el-form-item__content) {
  display: flex;
  justify-content: center;
}

.login-btn {
  display: flex;
}
</style>
