<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">
          <text class="form-label"
            ><image
              class="image_icon"
              src="/static/common/images/icon_phoneNumber.png"
              mode="scaleToFill"
            />
            手机号</text
          >
          <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'">
          <text class="form-label"
            ><image
              class="image_icon"
              src="/static/common/images/icon_password.png"
              mode="scaleToFill"
            />密码</text
          >
          <view class="input-wrapper">
            <input
              type="text"
              class="form-input"
              placeholder="请输入密码"
              v-model="loginParams.password"
              @blur="validatePassword"
            />
          </view>
          <text v-if="errors.password" class="error-tip">{{
            errors.password
          }}</text>
        </view>

        <view class="form-item" v-if="loginType === 'code'">
          <text class="form-label">
            <image
              class="image_icon"
              src="/static/common/images/icon_verificationCode.png"
              mode="scaleToFill"
            />
            图形验证码</text
          >
          <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'">
          <text class="form-label">
            <image
              class="image_icon"
              src="/static/common/images/icon_verificationCode.png"
              mode="scaleToFill"
            />
            验证码</text
          >
          <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";

export default {
  data() {
    return {
      isTeacher: false, // 是否是教师

      // 登录参数
      loginParams: {
        phone: "",
        password: "",
        code: "",
        captcha: "", // 图形验证码
        captchaId: "", // 图形验证码ID
      },
      captchaUrl: "", // 图形验证码URL，实际使用时需替换
      loginType: "code", // 默认验证码登录，与图片一致
      codeText: "获取验证码",
      countdown: 60,
      timer: null,
      errors: {
        phone: "",
        password: "",
        code: "",
        captcha: "",
      },
    };
  },
  mounted() {
    this.refreshCaptcha();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    switchLoginType(type) {
      this.loginType = type;
      this.clearErrors();
    },

    // 刷新图形验证码
    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);

      this.$u.api.GetStuVerifyCode(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",
          });
        }
      });
    },

    // 开始倒计时
    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: "",
      };
    },

    // 登录
    login() {
      // 校验手机号
      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) {
        this.teacherLogin();
      } else {
        this.stuLogin();
      }
    },

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

      console.log("登录参数:", params);

      this.$u.api.StuLogin(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",
        });
      });
    },

    // 教师登录
    teacherLogin() {
      return;
      this.$u.api.TeacherLogin(this.loginParams).then((res) => {
        console.log(res);
      });
    },

    // 手机号输入过滤
    phoneInputFilter(e) {
      // 确保输入的只是数字
      let value = e.detail.value.replace(/\D/g, "");
      // 限制长度为11位
      if (value.length > 11) {
        value = value.slice(0, 11);
      }
      // 直接更新值
      this.loginParams.phone = value;
    },
  },
};
</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 {
        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: 76%;
            height: 0px;
            border-radius: 3px;
            box-shadow: 0px 0px 4px 2px rgba(79, 106, 255, 1);
          }
        }
      }

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

    .form-content {
      .form-item {
        margin-bottom: 32rpx;

        .form-label {
          display: block;
          position: relative;
          // padding-left: 30rpx;
          font-family: PingFang SC;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 16rpx;
        }

        .image_icon {
          width: 28rpx;
          height: 28rpx;
          vertical-align: text-top;
          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%;
            }
          }
        }

        .error-tip {
          display: block;
          font-size: 24rpx;
          color: #ff6481;
          margin-top: 10rpx;
          padding-left: 10rpx;
        }
      }
    }

    .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>
