<template>
  <div class="login">
    <canvas id="canvas"></canvas>
    <div class="main">
      <h1>影 像 智 能 解 译 平 台</h1>
      <div class="login-form">
        <h2>用 户 登 录</h2>
        <div class="agileits-top">
          <form ref="loginRef" action="#" method="post">
            <div class="styled-input">
              <input type="text" name="User Name" required="" :value="loginForm.username" />
              <label>User Name</label>
              <span></span>
            </div>
            <div class="styled-input">
              <input type="password" name="Password" required="" :value="loginForm.password" @keyup.enter="handleLogin">
              <label>Password</label>
              <span></span>
            </div>
            <div class="wthree-text">
              <ul>
                <li>
                  <input type="checkbox" id="brand">
                  <!-- <label for="brand"><span></span> 记住密码</label> -->
                  <el-checkbox :fill="'#0ff'" v-model="loginForm.rememberMe">记住密码</el-checkbox>
                </li>
                <!-- <li> <a href="#">Forgot password?</a> </li> -->
              </ul>
              <div class="clear"> </div>
            </div>
          </form>
        </div>
        <div class="agileits-bottom" v-loading="loginLoading">
          <!-- <form action="#" method="post"> -->
          <input type="submit" value="登 录" @click="handleLogin" >
          <!-- </form> -->
        </div>
      </div>
      <div class="copyright">
      <span>Copyright © 2023 四川中水成勘院测绘工程有限责任公司 All Rights Reserved.</span>
    </div>
    </div>

  </div>
</template>

<script setup>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const router = useRouter();
const { proxy } = getCurrentInstance();
const loginLoading =ref(false);

const loginForm = ref({
  username: "admin",
  password: "admin123",
  rememberMe: false,
  code: "",
  uuid: ""
});

onMounted(() => {
  loginBg();
})


function handleLogin() {
  loginLoading.value = true;
  if (loginForm.value.rememberMe) {
    Cookies.set("username", loginForm.value.username, { expires: 30 });
    Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
    Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
  } else {
    // 否则移除
    Cookies.remove("username");
    Cookies.remove("password");
    Cookies.remove("rememberMe");
  }
  // 调用action的登录方法
  userStore.login(loginForm.value).then(() => {
    // router.push({ path: redirect.value || "/" });
    loginLoading.value = false;
    router.push({ path: '/index' })
  }).catch(() => {
    // 重新获取验证码
    if (captchaEnabled.value) {
      getCode();
    }
  });
}

function loginBg() {
  "use strict";
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,

    hue = 217,
    stars = [],
    count = 0,
    maxStars = 1400;

  let canvas2 = document.createElement('canvas'),
    ctx2 = canvas2.getContext('2d');
  canvas2.width = 100;
  canvas2.height = 100;
  let half = canvas2.width / 2,
    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
  gradient2.addColorStop(0.025, '#fff');
  gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
  gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
  gradient2.addColorStop(1, 'transparent');

  ctx2.fillStyle = gradient2;
  ctx2.beginPath();
  ctx2.arc(half, half, half, 0, Math.PI * 2);
  ctx2.fill();

  // End cache

  function random(min, max) {
    if (arguments.length < 2) {
      max = min;
      min = 0;
    }

    if (min > max) {
      let hold = max;
      max = min;
      min = hold;
    }

    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  let Star = function () {

    this.orbitRadius = random(w / 2 - 50);
    this.radius = random(100, this.orbitRadius) / 10;
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, maxStars);
    this.speed = random(this.orbitRadius) / 900000;
    this.alpha = random(2, 10) / 10;

    count++;
    stars[count] = this;
  }

  Star.prototype.draw = function () {
    let x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
      y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
      twinkle = random(10);

    if (twinkle === 1 && this.alpha > 0) {
      this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
      this.alpha += 0.05;
    }

    ctx.globalAlpha = this.alpha;
    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.timePassed += this.speed;
  }

  for (let i = 0; i < maxStars; i++) {
    new Star();
  }
  function animation() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.8;
    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
    ctx.fillRect(0, 0, w, h)

    ctx.globalCompositeOperation = 'lighter';
    for (let i = 1, l = stars.length; i < l; i++) {
      stars[i].draw();
    };

    window.requestAnimationFrame(animation);
  };

  animation();
}



</script>

<style scoped lang="scss">
@import url('@/assets/styles/login.scss');

.login {
  background: #060e1b;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


canvas {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* Demo Buttons Style */
.codrops-demos {
  font-size: 0.8em;
  text-align: center;
  position: absolute;
  z-index: 99;
  width: 96%;
}

.codrops-demos a {
  display: inline-block;
  margin: 0.35em 0.1em;
  padding: 0.5em 1.2em;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  border-radius: 2px;
  font-size: 110%;
  border: 2px solid transparent;
  color: #fff;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
  border-color: #383a3c;
}
</style>