<template>
  <view class="login-container">
    <view class="login-header">
      <view class="logo-container">
        <image
          class="logo-icon"
          src="/static/common/images/images_logo.png"
        ></image>
        <text class="logo-text"
          >我是 <text class="logo-name">源小新</text></text
        >
      </view>
      <view class="welcome-text">
        欢迎使用源小新校园AI助手，快让我来帮助你吧！
      </view>
    </view>

    <view
      class="login-form"
      :style="{ 'padding-top': isTeacher ? '40rpx' : '80rpx' }"
    >
      <view class="login-type" v-if="isTeacher">
        <view
          class="type-item"
          :class="{ active: loginType === 'psd' }"
          @click="switchLoginType('psd')"
          >密码登录</view
        >
        <view class="divider">|</view>
        <view
          class="type-item"
          :class="{ active: loginType === 'code' }"
          @click="switchLoginType('code')"
          >验证码登录</view
        >
      </view>

      <view class="form-content">
        <view class="form-item">
          <view class="form-label"
            ><image
              class="image_icon"
              src="/static/common/images/icon_phoneNumber.png"
              mode="scaleToFill"
            />
            <text>手机号</text>
          </view>
          <view class="input-wrapper">
            <input
              type="number"
              class="form-input"
              placeholder="请输入手机号"
              v-model="loginParams.phone"
              @blur="validatePhone"
              maxlength="11"
            />
          </view>
          <text v-if="errors.phone" class="error-tip">{{ errors.phone }}</text>
        </view>

        <view class="form-item" v-if="isTeacher && loginType === 'psd'">
          <view class="form-label"
            ><image
              class="image_icon"
              src="/static/common/images/icon_password.png"
              mode="scaleToFill"
            />
            <text>密码</text>
          </view>
          <view class="input-wrapper">
            <input
              :password="!isShowPassword"
              type="text"
              class="form-input"
              placeholder="请输入密码"
              v-model="loginParams.password"
              @blur="validatePassword"
            />
            <view class="show-password-icon" @click="toggleShowPassword">
              <u-icon
                v-show="!isShowPassword"
                name="eye-fill"
                color="#2979ff"
                size="32"
              ></u-icon>
              <u-icon
                v-show="isShowPassword"
                name="eye-off"
                color="#2979ff"
                size="32"
              ></u-icon>
            </view>
          </view>
          <text v-if="errors.password" class="error-tip">{{
            errors.password
          }}</text>
        </view>

        <view class="form-item" v-if="loginType === 'code'">
          <view class="form-label">
            <image
              class="image_icon"
              src="/static/common/images/icon_verificationCode.png"
              mode="scaleToFill"
            />
            <text>图形验证码</text>
          </view>
          <view class="input-wrapper">
            <input
              type="text"
              class="form-input"
              placeholder="请输入验证码"
              v-model="loginParams.captcha"
              @blur="validateCaptcha"
            />
            <view class="captcha-img" @click="refreshCaptcha">
              <image
                v-if="captchaUrl"
                :src="captchaUrl"
                mode="widthFix"
              ></image>
            </view>
          </view>
          <text v-if="errors.captcha" class="error-tip">{{
            errors.captcha
          }}</text>
        </view>

        <view class="form-item" v-if="loginType === 'code'">
          <view class="form-label">
            <image
              class="image_icon"
              src="/static/common/images/icon_verificationCode.png"
              mode="scaleToFill"
            />
            <text>验证码</text>
          </view>
          <view class="input-wrapper">
            <input
              type="text"
              class="form-input"
              placeholder="请输入验证码"
              v-model="loginParams.code"
              @blur="validateCode"
            />
            <text
              class="get-code-btn"
              :class="{ 'get-code-btn-normal': codeText == '获取验证码' }"
              @click="getCode"
              >{{ codeText }}</text
            >
          </view>
          <text v-if="errors.code" class="error-tip">{{ errors.code }}</text>
        </view>
      </view>

      <view class="button-container">
        <button class="login-button" @click="login">登录</button>
      </view>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { generateSign } from "@/utils/signUtil.js";
import { getUserInfoFromJWT } from "@/utils/jwt-util";
import md5 from "js-md5";

export default {
  data() {
    return {
      isTeacher: false, // 是否是教师
      isShowPassword: false, // 是否显示密码

      // 登录参数
      loginParams: {
        phone: "",
        password: "",
        code: "",
        captcha: "", // 图形验证码
        captchaId: "", // 图形验证码ID
      },
      captchaUrl: "", // 图形验证码URL，实际使用时需替换
      loginType: "psd", // 教师默认密码登录
      codeText: "获取验证码",
      countdown: 60,
      timer: null,
      errors: {
        phone: "",
        password: "",
        code: "",
        captcha: "",
      },
    };
  },
  onLoad(e) {
    // console.log("onLoad", e.type); // 0:学生 1:教师
    this.isTeacher = e.type == 1;
    this.loginType = e.type == 1 ? "psd" : "code";
  },
  mounted() {
    this.refreshCaptcha();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    switchLoginType(type) {
      this.clearErrors();
      this.clearLoginParams();
      this.loginType = type;
      this.isShowPassword = false;
      if (this.loginType === "code") {
        this.refreshCaptcha();
      }
    },

    // 切换显示密码
    toggleShowPassword() {
      this.isShowPassword = !this.isShowPassword;
    },

    // 刷新图形验证码
    refreshCaptcha() {
      // 获取图形验证码
      this.$u.api.GetCaptcha().then((res) => {
        console.log("获取图形验证码...", res);
        this.loginParams.captchaId = res.captchaId;
        this.captchaUrl = "data:image/png;base64," + res.imageBase64;
      });
    },

    // 获取短信验证码
    getCode() {
      if (
        this.codeText !== "获取验证码" ||
        !this.validatePhone() ||
        (this.loginType === "code" && !this.validateCaptcha())
      ) {
        return;
      }

      const sign = generateSign(this.loginParams.phone);

      const params = {
        phone: this.loginParams.phone,
        ip: "",
        sign: sign,
        captchaId: this.loginParams.captchaId,
        captchaCode: this.loginParams.captcha,
      };

      console.log("获取验证码...", params);

      const apiMethod = this.isTeacher
        ? "GetTeacherVerifyCode"
        : "GetStuVerifyCode";

      this.$u.api[apiMethod](params).then((res) => {
        console.log("获取验证码...", res);
        if (res.succeed) {
          this.$refs.uToast.show({
            title: "发送成功",
            type: "success",
          });
          this.startCountdown();
        } else {
          this.$refs.uToast.show({
            title: res.error || "发送失败",
            type: "error",
          });
          this.refreshCaptcha();
        }
      });
    },

    // 开始倒计时
    startCountdown() {
      this.countdown = 60;
      this.codeText = `${this.countdown}秒后重试`;
      this.timer = setInterval(() => {
        this.countdown--;
        this.codeText = `${this.countdown}秒后重试`;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.codeText = "获取验证码";
        }
      }, 1000);
    },

    // 校验手机号
    validatePhone() {
      if (!this.loginParams.phone) {
        this.errors.phone = "请输入手机号";
        return false;
      }

      if (!/^1[3-9]\d{9}$/.test(this.loginParams.phone)) {
        this.errors.phone = "手机号格式不正确";
        return false;
      }

      this.errors.phone = "";
      return true;
    },

    // 校验密码
    validatePassword() {
      if (!this.loginParams.password) {
        this.errors.password = "请输入密码";
        return false;
      }

      // if (this.password.length < 6) {
      //   this.errors.password = "密码不能少于6位";
      //   return false;
      // }

      this.errors.password = "";
      return true;
    },

    // 校验图形验证码
    validateCaptcha() {
      if (!this.loginParams.captcha) {
        this.errors.captcha = "请输入图形验证码";
        return false;
      }

      // if (this.captcha.length < 4) {
      //   this.errors.captcha = "图形验证码错误请重新输入";
      //   return false;
      // }

      // 实际应用中应该验证图形验证码是否正确
      this.errors.captcha = "";
      return true;
    },

    // 校验短信验证码
    validateCode() {
      if (!this.loginParams.code) {
        this.errors.code = "请输入验证码";
        return false;
      }

      // if (this.loginParams.code.length < 4) {
      //   this.errors.code = "验证码错误请重新输入";
      //   return false;
      // }

      this.errors.code = "";
      return true;
    },

    // 清除所有错误提示
    clearErrors() {
      this.errors = {
        phone: "",
        password: "",
        code: "",
        captcha: "",
      };
    },
    // 清除登录参数
    clearLoginParams() {
      this.loginParams = {
        phone: "",
        password: "",
        code: "",
        captcha: "", // 图形验证码
        captchaId: "", // 图形验证码ID
      };
    },

    // 登录
    login() {
      // const res = {
      //   data: {
      //     // token:
      //       // "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3JvbGUiOiJBZG1pbiIsIlVzZXJJbmZvIjoie1wiSWRcIjpcImI1MjY5ZWQxLTViYzgtMTFmMC05YTg5LTAwMTYzZTJkMmRkM1wiLFwiTmFtZVwiOlwi6J-56ICB5biIXCIsXCJQaG9uZU51bWJlclwiOlwiMTM1ODg4ODg4ODhcIixcIlNleFwiOjEsXCJBY2NvdW50VHlwZVwiOjJ9IiwibmJmIjoxNzUyMTE4ODU0LCJleHAiOjE3NTIyMDUyNTR9.aF0Q-X3ebIld7RIKMMW68tXjmmR4OO08dXLAtHWuuwc",
      //     token:
      //       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3JvbGUiOiJVc2VyIiwiVXNlckluZm8iOiJ7XCJJZFwiOlwiNTljNzIxNmMtMTRhZS00NmRmLTkxYTItNGYzMjFlZjM2YjQ5XCIsXCJOYW1lXCI6XCIxNzMzNTM3NDg4N1wiLFwiUGhvbmVOdW1iZXJcIjpcIjE3MzM1Mzc0ODg3XCIsXCJTZXhcIjoyLFwiQWNjb3VudFR5cGVcIjowfSIsIm5iZiI6MTc1MjExMDcwOSwiZXhwIjoxNzUyMTk3MTA5fQ.VDv2KjGq3s3BbZxZjB3P-BaeDU_1vIdqFEWGGvdpIxU",
      //   },
      // };

      // const token = res.data.token;
      // // 解析获取用户信息
      // const userInfo = getUserInfoFromJWT(token);
      // // 保存登录后得到的用户数据
      // this.$u.vuex("vuex_token", token);
      // this.$u.vuex("vuex_user", userInfo);

      // // 跳转至首页
      // uni.reLaunch({
      //   url: "/pages/home/index/index",
      // });
      // return;

      // 校验手机号
      if (!this.validatePhone()) {
        return;
      }

      // 根据登录类型校验其他字段
      if (this.loginType === "psd") {
        if (!this.validatePassword()) {
          return;
        }
      } else {
        // 验证码登录需要验证图形验证码和短信验证码
        if (!this.validateCaptcha() || !this.validateCode()) {
          return;
        }
      }

      // 校验通过，执行登录
      uni.showLoading({
        title: "登录中...",
      });

      if (this.isTeacher) {
        if (this.loginType === "psd") {
          this.teacherLogin(); // 密码登录
        } else {
          this.teacherLoginByCode(); // 验证码登录
        }
      } else {
        this.stuLogin(); // 学生登录
      }
    },

    // 通用登录处理函数
    handleLogin(apiMethod, params, userType = 0) {
      // console.log("登录参数:", params);

      this.$u.api[apiMethod](params).then((res) => {
        console.log("登录结果:", res);
        if (!res.succeed) {
          this.$refs.uToast.show({
            title: res.error || "登录失败",
            type: "error",
          });
          return;
        }

        this.$refs.uToast.show({
          title: "登录成功",
          type: "success",
        });

        const token = res.data.token;
        // 解析获取用户信息
        const userInfo = getUserInfoFromJWT(token);
        // 保存登录后得到的用户数据
        this.$u.vuex("vuex_token", token);
        this.$u.vuex("vuex_user", userInfo);
        this.$u.vuex("vuex_userType", userType); // 0:学生 1:教师

        // 获取用户信息后再跳转，确保数据加载完成
        const redirect = () => {
          const url = this.isTeacher
            ? "/pages/transfer/index"
            : "/pages/home/index/index";
          uni.reLaunch({
            url: url,
          });
        };

        this.getUserInfo()
          .then(() => {
            // 保存用户类型到本地存储，用于退出登录时重定向
            // uni.setStorageSync("userType", userType);
            redirect();
          })
          .catch((err) => {
            console.error("获取用户信息失败", err);
            // 即使获取用户信息失败，也应该允许跳转
            redirect();
          });
      });
    },

    // 学生登录
    stuLogin() {
      // 构建登录参数
      const params = {
        phone: this.loginParams.phone,
        password: "",
        code: this.loginParams.code,
      };

      // 使用通用登录处理函数，传入学生特定的参数
      this.handleLogin("StuLogin", params, 0);
    },

    // 教师密码登录
    teacherLogin() {
      // 构建登录参数
      const params = {
        phone: this.loginParams.phone,
        password: md5(this.loginParams.password),
        code: this.loginParams.code,
      };

      this.handleLogin("TeacherLogin", params, 1);
    },

    // 教师验证码登录
    teacherLoginByCode() {
      // 构建登录参数
      const params = {
        phone: this.loginParams.phone,
        password: "",
        code: this.loginParams.code,
      };

      this.handleLogin("TeacherLoginByCode", params, 1);
    },

    // 手机号输入过滤
    phoneInputFilter(e) {
      // 确保输入的只是数字
      let value = e.detail.value.replace(/\D/g, "");
      // 限制长度为11位
      if (value.length > 11) {
        value = value.slice(0, 11);
      }
      // 直接更新值
      this.loginParams.phone = value;
    },

    // 获取用户信息
    getUserInfo() {
      // 返回 Promise 以便调用方等待
      const isTeacher = Number(this.vuex_userType) === 1;
      const apiMethod = isTeacher ? "getTeacherInfo" : "GetUserApi";
      return this.$u.api[apiMethod]({ Id: this.vuex_user.Id }).then((res) => {
        if (!res || !res.succeed) {
          return Promise.reject(res?.error || "获取用户信息失败");
        }
        const data = (res.data && res.data[0]) || {};
        const vuex_user = {
          ...this.vuex_user,
          Name: data.name || this.vuex_user.Name,
          Sex: data.sex ?? this.vuex_user.Sex,
          Shen: data.shen || this.vuex_user.Shen,
          HeadSculptureUrl: data.headSculptureUrl || this.vuex_user.HeadSculptureUrl,
          CollegeName: data.collegeName || this.vuex_user.CollegeName,
          ProfessionalName: data.professionalName || this.vuex_user.ProfessionalName,
        };
        this.$u.vuex("vuex_user", vuex_user);
        if (isTeacher) {
          this.$u.vuex("vuex_teacherInfo", data);
        }
        return vuex_user;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  //   min-height: 100vh;
  height: 100vh;
  width: 100%;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  background-image: url("@/static/common/images/images_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50%;

  .login-header {
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo-container {
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;

      .logo-icon {
        width: 48rpx;
        height: 38rpx;
        margin-right: 16rpx;
      }

      .logo-text {
        font-size: 32rpx;
        color: #333;

        .logo-name {
          font-family: DouyinSans;
          font-weight: bold;
          font-size: 48rpx;
          color: #3e6aff;
          line-height: 24rpx;
          margin-left: 16rpx;
        }
      }
    }

    .welcome-text {
      font-family: DouyinSans;
      font-weight: bold;
      font-size: 27rpx;
      color: #5a5f76;
      margin-bottom: 60rpx;
    }
  }

  .login-form {
    background: linear-gradient(0deg, #f6f6f6 0%, #ffffff 100%);
    flex: 1;
    border-radius: 40rpx 40rpx 0 0;
    padding: 80rpx 40rpx;
    display: flex;
    flex-direction: column;

    .login-type {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 60rpx;
      font-size: 28rpx;
      color: #999999;

      .type-item {
        // width: 160rpx;
        text-align: center;
        // padding: 0 20rpx;
        position: relative;
        font-family: PingFang SC;

        &.active {
          font-size: 32rpx;
          font-weight: bold;
          color: #4f6aff;

          &::after {
            content: "";
            position: absolute;
            bottom: 4px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            // width: 100%;
            height: 0px;
            border-radius: 3px;
            box-shadow: 0px 0px 4px 2px rgba(79, 106, 255, 1);
          }
        }

        // 分别设置两个 item 的下划线宽度
        // 密码登录 (4字)
        &:first-child.active::after {
          width: 128rpx;
        }
        // 验证码登录 (5字)
        &:last-child.active::after {
          width: 160rpx;
        }
      }

      .type-item:first-child {
        width: 128rpx;
      }
      .type-item:last-child {
        width: 160rpx;
      }

      .divider {
        color: #5a5f76;
        margin: 0 30rpx;
        font-weight: 300;
      }
    }

    .form-content {
      .form-item {
        margin-bottom: 20rpx;
        position: relative;
        padding-bottom: 40rpx; /* 为错误提示预留空间 */

        .error-tip {
          position: absolute;
          bottom: 0;
          font-size: 24rpx;
          color: #ff6481;
          height: 40rpx; /* 固定高度 */
          line-height: 40rpx;
        }

        .form-label {
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 16rpx;
        }

        .image_icon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 16rpx;
        }

        &:nth-child(2) {
          .form-label::before {
            border-radius: 50%;
          }
        }

        .input-wrapper {
          position: relative;

          .form-input {
            width: 100%;
            height: 90rpx;
            background-color: #f2f2f2;
            border-radius: 20rpx;
            font-size: 28rpx;
            padding: 0 32rpx;
            box-sizing: border-box;

            .uni-input-placeholder {
              color: #cccccc;
            }
          }

          .get-code-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 220rpx;
            height: 60rpx;
            line-height: 60rpx;
            padding-left: 30rpx;
            color: #cccccc;
            font-size: 28rpx;
            border-left: 1px solid #b7c1ff;
          }

          .get-code-btn-normal {
            color: #4370fe;
          }

          .captcha-img {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 60rpx;
            width: 220rpx;
            padding-left: 30rpx;
            border-left: 1px solid #b7c1ff;

            image {
              width: 80%;
              height: 100%;
            }
          }

          .show-password-icon {
            position: absolute;
            right: 10rpx;
            top: 50%;
            transform: translateY(-50%);
            height: 60rpx;
            width: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    .button-container {
      margin-top: 60rpx;

      .login-button {
        width: 100%;
        height: 90rpx;
        background-color: #4f6aff;
        color: #ffffff;
        font-size: 32rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
      }
    }
  }
}

/* 响应式布局 - PC端样式 */
@media screen and (min-width: 768px) {
  .login-container {
    width: 100%;
    margin: 0 auto;
    .login-form {
      width: 1200rpx;
      margin: 0 auto;
    }
  }
}
</style>

