<script setup lang="ts">
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { loginRules } from "./utils/rule";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { storageSession } from "@pureadmin/utils";
import { ref, reactive, watch, computed, getCurrentInstance } from "vue";
import { useUserStoreHook } from "/@/store/modules/user";
import { resType } from "/@/store/modules/types";
import { bg, currentWeek } from "./utils/static";
import { ReImageVerify } from "/@/components/ReImageVerify";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { initRouter } from "/@/router/utils";
import { loadEnv } from "@build/index";
import logo from "/@/assets/logo.png";

defineOptions({
  name: "Login"
});

const title =
  getCurrentInstance().appContext.config.globalProperties.$config?.Title;

const imgCode = ref("");
const router = useRouter();
const loading = ref(false);
const checked = ref(false);
const ruleFormRef = ref<FormInstance>();
const currentPage = computed(() => {
  return useUserStoreHook().currentPage;
});

const { loginByUsername } = useUserStoreHook();
// 15501067031
// wugg1234

const { VITE_IS_PROD } = loadEnv();

const ruleForm = reactive({
  username: "",
  password: "",
  verifyCode: ""
});

const onLogin = async (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loginByUsername(ruleForm).then(async (res: resType) => {
        const { code, message, data } = res;
        if (code === 0) {
          const { userinfo, token } = data ?? {};
          const { nickname } = userinfo ?? {};
          storageSession.setItem("info", {
            username: nickname ?? "",
            accessToken: token ?? ""
          });

          initRouter()
            .then((list: any) => {
              if (!list || list?.length === 0) {
                loading.value = false;
                ElMessage.warning("该用户当前公司无菜单权限！");
              } else {
                ElMessage.success("登录成功");
                router.push("/");
              }
            })
            .catch(err => {
              if (err === 10000) {
                router.push("/welcome?error=roleExcption");
              }
            });
        } else if (code > 100 && code < 200) {
          loading.value = false;
        } else {
          loading.value = false;
          ElMessage.error(message ?? "");
        }
      });
    } else {
      loading.value = false;
      return fields;
    }
  });
};

function toWindowPath() {
  window.open("https://beian.miit.gov.cn/");
}

    const ua = window.navigator.userAgent.toLowerCase();

watch(imgCode, value => {
  useUserStoreHook().SET_VERIFYCODE(value);
});

watch(ruleForm, () => {
  if (ruleForm.username.length > 11) {
    ruleForm.username = ruleForm.username.slice(0, 11);
  }
});
</script>

<template>
  <img :src="bg" class="wave" />
  <div class="login-container">
    <div class="img">
      <component :is="currentWeek" />
    </div>
    <div class="login-box">
      <div class="login-form">
        <!-- <avatar class="avatar" /> -->
        <div class="flex w-full items-center justify-center">
          <img :src="logo" style="height: 100px" />
        </div>

        <Motion>
          <!-- <h2>{{ title }}</h2> -->
          <h2>采销365结算</h2>
        </Motion>

        <el-form
          v-if="currentPage === 0"
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="loginRules"
          size="large"
          @keyup.enter="onLogin(ruleFormRef)"
        >
          <Motion :delay="100">
            <el-form-item prop="username">
              <el-input
                clearable
                v-model="ruleForm.username"
                placeholder="账号"
                :prefix-icon="useRenderIcon('user')"
              />
            </el-form-item>
          </Motion>

          <Motion :delay="150">
            <el-form-item prop="password">
              <el-input
                clearable
                show-password
                v-model="ruleForm.password"
                placeholder="密码"
                :prefix-icon="useRenderIcon('lock')"
              />
            </el-form-item>
          </Motion>

          <Motion :delay="200">
            <el-form-item prop="verifyCode">
              <el-input
                clearable
                v-model="ruleForm.verifyCode"
                placeholder="验证码"
                :prefix-icon="
                  useRenderIcon('ri:shield-keyhole-line', { online: true })
                "
              >
                <template v-slot:append>
                  <ReImageVerify v-model:code="imgCode" />
                </template>
              </el-input>
            </el-form-item>
          </Motion>

          <Motion :delay="250">
            <el-form-item>
              <div class="w-full h-20px flex justify-between items-center">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
              </div>
              <el-button
                class="w-full mt-4"
                size="default"
                type="primary"
                :loading="loading"
                @click="onLogin(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form-item>

            <el-form-item v-if="VITE_IS_PROD">
              <div class="w-full flex justify-center">
                <ElButton link @click="toWindowPath"
                  >京ICP备2022033072号-1</ElButton
                >
              </div>
            </el-form-item>
          </Motion>

          <!-- <Motion :delay="300">
            <el-form-item>
              <div class="w-full h-20px flex justify-between items-center">
                <el-button
                  v-for="(item, index) in operates"
                  :key="index"
                  class="w-full mt-4"
                  size="default"
                  @click="onHandle(index + 1)"
                >
                  {{ item.title }}
                </el-button>
              </div>
            </el-form-item>
          </Motion> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("/@/style/login.css");
</style>

<style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}

.link-btn {
  position: fixed;
  bottom: 100px;
  left: 50%;
  border: none;
}
</style>
