<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-09-19 10:25:55
-->
<template>
  <view class="contain">
    <view class="particles">
      <view class="particle" v-for="i in 30" :key="i"></view>
    </view>
    <view class="formed">
      <u-form :model="loginForm" labelWidth="auto" :rules="rules" ref="uForm">
        <u-form-item label="" prop="username">
          <u-input
            v-model="loginForm.username"
            class="border-color"
            clearable
            :placeholder="'用户账号'"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="" prop="password">
          <u-input
            v-model="loginForm.password"
            type="password"
            class="border-color"
            clearable
            :placeholder="'登录密码'"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="" prop="code">
          <u-input
            v-model="loginForm.code"
            class="border-color1"
            clearable
            :placeholder="'验证码'"
          >
            <img
              :src="codeUrl"
              class="captcha"
              slot="suffix"
              @click="getVerifyCode"
            />
          </u-input>
        </u-form-item>
        
        <u-button
          class="btn"
          @click="handleLogin"
          color="#007AFF"
          shape="circle"
          :text="'登录'"
        ></u-button>
      </u-form>
    </view>
  </view>
</template>

<script>
import { captchaImage, login } from "@/api/login";
import { setToken } from "@/config/auth.js";

export default {
  data() {
    return {
      method: 0,
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      codeUrl: "",
      rules: {
        username: [
          {
            required: true,
            message: '请输入会员编号',
            trigger: ["blur"],
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ["blur"],
          },
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ["blur"],
          },
        ],
        smsCode: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: ["blur"],
          },
        ],
      },
      ismsgCode: false,
      beginTime: 60,
      getCode: '获取验证码',
      timer: "",
    };
  },
  onLoad(options) {
    this.getVerifyCode();
  },
  methods: {
    getVerifyCode() {
      captchaImage().then((res) => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    handleLogin() {
      this.$refs.uForm.validate().then(() => {
        login(this.loginForm)
          .then((res) => {
            if (res.code == 200) {
              setToken(res.data.access_token, res.data.expires_in);
              this.getUseInfo();
            }else{
              this.getVerifyCode();
              this.loginForm.code = "";
            }
          })
      });
    },
    getUseInfo() {
      this.$store.dispatch("GetInfo").then((res) => {
        uni.setStorageSync("name", "index");
        uni.reLaunch({
          url: "/pages/index/index",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  background-color: #000C1E; /* 深蓝黑色背景 */
  height: 100vh;
  position: relative;
  overflow: hidden; /* 隐藏溢出的伪元素动画 */
}

.contain::before, /* 第一个旋转光晕 */
.contain::after { /* 第二个旋转光晕 */
  content: '';
  position: absolute;
  left: 50%;
  min-width: 300vw;
  min-height: 300vw;
  /* 显著增加光晕的不透明度 */
  background-color: rgba(0, 100, 200, 0.25); /* 调整光晕颜色和透明度，使其更明显 */
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 0; /* 确保光晕在最底层 */
}

.contain::before {
  bottom: 15vh;
  border-radius: 45%;
  animation-duration: 25s; /* 略微调整动画速度 */
}

.contain::after {
  bottom: 12vh;
  /* 直接使用 background-color 的 alpha，移除这里的 opacity 属性，避免双重透明度导致过于透明 */
  /* opacity: .3; */ 
  border-radius: 47%;
  animation-duration: 22s; /* 略微调整动画速度 */
  background-color: rgba(0, 120, 220, 0.2); /* 第二个光晕也可以有略微不同的颜色/透明度 */
}

/* 流动的粒子效果 */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不阻挡下方元素交互 */
  z-index: 1; /* 确保在背景光晕之上，但在表单之下 */
}

.particle {
  position: absolute;
  background-color: rgba(0, 180, 255, 0.6); /* 粒子颜色更明显一些 */
  border-radius: 50%;
  /* 移除这里的 base opacity:0，依赖 nth-child 和 animation keyframes */
  animation: float 20s infinite linear;
}

@for $i from 1 through 30 { /* 生成30个粒子 */
  .particle:nth-child(#{$i}) {
    $size: random(3) + 2px; /* 随机大小 2-4px，让粒子稍大一点 */
    width: $size;
    height: $size;
    left: random(100) * 1%;
    top: random(100) * 1%;
    animation-delay: random(20000) * -1ms; /* 随机延迟，使动画错开 */
    animation-duration: (random(20) + 15) * 1s; /* 随机动画时长 15-35s */
    opacity: random(40) / 100 + 0.3; /* 初始随机透明度 0.3-0.7 */
  }
}

@keyframes float {
  0% {
    transform: translateY(0vh) translateX(0);
    opacity: inherit; /* 继承 nth-child 设置的初始透明度 */
  }
  50% {
    opacity: 0.8; /* 动画中途可以更亮 */
  }
  100% {
    transform: translateY(-100vh) translateX(random(100) - 50px); /* 向上漂浮并略微左右移动 */
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.formed {
  width: 60%;
  position: absolute;
  top: 32%;
  padding: 0 10rpx;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  z-index: 2; /* 确保表单在粒子效果之上 */
}
.methods {
  display: flex;
}
.tit1 {
  font-size: 14px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #299efe;
  border-bottom: 4rpx solid #299efe;
}
.border-color {
  background: #fff;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 20rpx 20rpx !important;
  // margin-left: 30rpx;
}
.border-color1 {
  background: #fff;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 0rpx 0 0 20rpx !important;

  // margin-left: 30rpx;
}
.captcha {
  width: 85px;
  height: 48px;
  opacity: 1;
  border-radius: 0 8px 8px 0;
}
.hqyzm1 {
  width: 85px;
  height: 48px;
  opacity: 1;
  border-radius: 0 8px 8px 0;
  text-align: center;
  line-height: 48px;
  background: #ccc;
  font-size: 10px;
}
.btn {
  margin-top: 50px;
}
::v-deep .u-form-item__body__right__message {
  margin-left: 0 !important;
  color: #ff5555; /* 错误提示颜色调整为更显眼 */
}
</style>
