<template>
  <el-form size="large" class="login-content-form">
    <el-form-item class="login-animation1">
      <el-input
        text
        placeholder="请输入用户名"
        v-model="state.ruleForm.username"
        clearable
        autocomplete="off"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><ele-User /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation2">
      <el-input
        :type="state.isShowPassword ? 'text' : 'password'"
        placeholder="请输入密码"
        v-model="state.ruleForm.password"
        autocomplete="off"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
        </template>
        <template #suffix>
          <i
            class="iconfont el-input__icon login-content-password"
            :class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
            @click="state.isShowPassword = !state.isShowPassword"
          >
          </i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation3">
      <el-col :span="12">
        <el-input
          text
          maxlength="4"
          placeholder="请输入验证码"
          v-model="state.ruleForm.captcha"
          clearable
          autocomplete="off"
          @keyup.enter="onSignIn"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><ele-Position /></el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="11">
        <el-button class="login-content-code" v-waves @click="refreshCode">
          <img :src="state.code.image" alt="" />
        </el-button>
      </el-col>
    </el-form-item>
    <el-form-item class="login-animation4">
      <el-button type="primary" class="login-content-submit" @click="onSignIn">
        <!-- round
        v-waves -->
        <!-- :loading="state.loading.signIn" -->
        <span>登 录</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts"></script>
<script setup lang="ts" name="loginAccount">
import { reactive, computed, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import { initFrontEndControlRoutes } from "/@/router/frontEnd";
import { initBackEndControlRoutes } from "/@/router/backEnd";
import { Session } from "/@/utils/storage";
import { formatAxis } from "/@/utils/formatTime";
import { NextLoading } from "/@/utils/loading";
import { getAll } from "/@/api/sys/index";
import { useLoginApi } from "/@/api/login/index";
import JSEncrypt from 'jsencrypt';


// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const state = reactive({
  isShowPassword: false,
   ruleForm: {
    username: "testname",
    password: "123455",
    username: "",
    password: "",
    captcha: "",
  },
  loading: {
    signIn: false,
  },
  code: {
    image: "",
    key: "",
  },
});

// 密钥
const Pki = ref("");

// 获取密钥
async function getPki() {
  let item = await getAll().getPki();
  Pki.value = item.data;
}

// 获取验证码
async function getcode() {
  let item = await getAll().getCaptcha();
  state.code = item.data;
}

//组件挂载
onMounted(() => {
  getPki();
  getcode();
});
// 重新获取验证码;
const refreshCode = () => {
  getcode();
};

// 加密
function encrypt(data: string) {
  if (Pki.value) {
    var r = new JSEncrypt();
    r.setPublicKey("-----BEGIN PUBLIC KEY-----" + Pki.value + "-----END PUBLIC KEY-----");
    return r.encrypt(JSON.stringify(data));
  } else {
    ElMessage.error("password rsa error");
    return false;
  }
}

// 时间获取
const currentTime = computed(() => {
  return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
  state.loading.signIn = true;
  const _this = state.ruleForm;
  if (!_this.username) return ElMessage.error("请输入用户名");
  if (!_this.password) return ElMessage.error("请输入密码");
  if (!_this.captcha) return ElMessage.error("请输入验证码");
  const pass = encrypt(_this.password);
  let item = await useLoginApi().login({
    username: _this.username,
    captcha: _this.captcha,
    key: state.code.key,
    password: pass,
  });

  if (!item.success) {
     ElNotification({
      title: "提示",
      message: item.msg,
      type: "error",
      duration: 3000,
    });
    getcode()
    return
  }
  // 存储 token 到浏览器缓存
  Session.set("token", item.data.accessToken);
  Session.set("username", _this.username);
  Session.set("permissions", item.data.permissions);
  // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
  //   Cookies.set("userName", state.ruleForm.userName);
  if (!themeConfig.value.isRequestRoutes) {
    const isNoPower = await initFrontEndControlRoutes();
    signInSuccess(isNoPower);
  } else {
    const isNoPower = await initBackEndControlRoutes();
    // 执行完 initBackEndControlRoutes，再执行 signInSuccess
    signInSuccess(isNoPower);
  }
};
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
  if (isNoPower) {
    ElMessage.warning("抱歉，您没有登录权限");
    Session.clear();
  } else {
    // 初始化登录成功时间问候语
    let currentTimeInfo = currentTime.value;
    // 登录成功，跳到转首页
    // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
    if (route.query?.redirect) {
      router.push({
        path: <string>route.query?.redirect,
        query:
          Object.keys(<string>route.query?.params).length > 0
            ? JSON.parse(<string>route.query?.params)
            : "",
      });
    } else {
      router.push("/");
    }
    // 登录成功提示
    const signInText = "欢迎回来！";
    ElMessage.success(`${currentTimeInfo}，${signInText}`);
    // 添加 loading，防止第一次进入界面时出现短暂空白
    NextLoading.start();
  }
  state.loading.signIn = false;
};
</script>

<style scoped lang="scss">
.login-content-form {
  margin-top: 20px;
  @for $i from 1 through 4 {
    .login-animation#{$i} {
      opacity: 0;
      animation-name: error-num;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: calc($i/10) + s;
    }
  }
  .login-content-password {
    display: inline-block;
    width: 20px;
    cursor: pointer;
    &:hover {
      color: #909399;
    }
  }
  .login-content-code {
    width: 100%;
    padding: 0;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .login-content-submit {
    width: 100%;
    letter-spacing: 2px;
    font-weight: 300;
    margin-top: 15px;
  }
}
</style>
