<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Api } from "../../assets/api/api";
import { useRouter } from "vue-router";
import { showToast } from "vant";

//手机号
const phoneNum = ref("");
const phoneNum2 = ref("");
//密码
const password = ref("");
//控制验证码点击时间间隔
const flag = ref(true);
const time = ref(60);
//密码显示隐藏控制
const changePassword1 = ref("password");
const flag1 = ref(false);
//信息验证码
const verification = ref("");

//vue3自带方法
const router = useRouter();

// 登录方式控制
const lConindex = ref(0);
//控制密码显示隐藏
const passwordOneChange = () => {
  if (flag1.value) {
    changePassword1.value = "password";
    flag1.value = false;
  } else {
    changePassword1.value = "text";
    flag1.value = true;
  }
};
//短信验证码
const getCode = async () => {
  let timer: any = null;
  // 手机号检测
  let numGetcode =
    /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
  // 检测手机号码是否填写正确
  if (flag.value) {
    flag.value = false;
    if (numGetcode.test(phoneNum.value)) {
      //检测是否有用户数据
      if (JSON.parse(localStorage.getItem("user_information") as any)) {
        //检测手机号码是否注册过
        for (
          let i = 0;
          i <
          JSON.parse(localStorage.getItem("user_information") as any).length;
          i++
        ) {
          if (
            JSON.parse(localStorage.getItem("user_information") as any)[i]
              .account == phoneNum.value
          ) {
            timer = setInterval(() => {
              time.value--;
              if (time.value == 0) {
                window.clearInterval(timer);
                timer = null;
                flag.value = true;
                time.value = 60;
              }
            }, 1000);
            await Api.requesRegisterGetCode(phoneNum.value);
          } else {
            showToast("此手机号暂无注册过帐号");
            flag.value = true;
          }
        }
      } else {
        showToast("暂无用户数据，请注册账号");
        flag.value = true;
      }
    } else {
      showToast("请检查手机号码");
      flag.value = true;
    }
  } else {
    showToast("请等候");
  }
};
//跳转注册页
const goRegisterView = () => {
  router.push("/register");
};
//设置登录状态
const SetLoginStatus = () => {
  localStorage.setItem("LoginStatus", "true");
};
//手机号登录
const PhoneNumberLogin = async () => {
  if (JSON.parse(localStorage.getItem("user_information") as any)) {
    for (
      let i = 0;
      i < JSON.parse(localStorage.getItem("user_information") as any).length;
      i++
    ) {
      //检测手机号有没有注册
      if (
        JSON.parse(localStorage.getItem("user_information") as any)[i]
          .account == phoneNum.value
      ) {
        let { data } = await Api.RegisterVerificationCode(
          phoneNum.value,
          verification.value
        );
        // 检测验证码与图文验证码是否正确
        // 验证码为空
        if (verification.value.trim() == "") {
          showToast("请检查手机号/验证码");
        }
        // 验证码错误
        else if (!data) {
          showToast("验证码错误");
        }
        // 正确，跳转到个人页面
        else if (data) {
          showToast("登录成功");
          SetLoginStatus();
          router.push("/bookshelfv");
        }
      }
      //检测手机号码有没有填写
      else if (phoneNum.value.trim() == "") {
        showToast("请填写手机号码");
      }
      //检测此手机号有没有注册
      else {
        showToast("此手机号暂无注册过帐号");
      }
    }
  } else {
    showToast("暂无用户数据，请注册账号");
  }
};
//账号密码登录
const AccountPasswordLogin = () => {
  // 检测数据
  if (JSON.parse(localStorage.getItem("user_information") as any)) {
    //检测手机号码是否注册过
    for (
      let i = 0;
      i < JSON.parse(localStorage.getItem("user_information") as any).length;
      i++
    ) {
      if (
        JSON.parse(localStorage.getItem("user_information") as any)[i]
          .account == phoneNum2.value
      ) {
        // 密码为空
        if (password.value.trim() == "") {
          showToast("请填写密码");
        }
        //密码错误
        else if (
          password.value !=
          JSON.parse(localStorage.getItem("user_information") as any)[i]
            .password
        ) {
          showToast("密码错误");
        }
        // 正确，跳转到个人页面
        else if (
          password.value ==
          JSON.parse(localStorage.getItem("user_information") as any)[i]
            .password
        ) {
          showToast("登录成功");
          SetLoginStatus();
          router.push("/bookshelfv");
        }
      }
      //检测手机号码有没有填写
      else if (phoneNum2.value.trim() == "") {
        showToast("请填写手机号码");
      }
      //检测此手机号有没有注册
      else {
        showToast("此手机号暂无注册过帐号");
      }
    }
  } else {
    showToast("暂无用户数据，请注册账号");
  }
};
//登录
const login = () => {
  if (lConindex.value == 0) {
    PhoneNumberLogin();
  } else {
    AccountPasswordLogin();
    password.value = "";
  }
};
</script>

<template>
  <div class="login_view">
    <nav>
      <div class="app" @click="router.push('/bookshelfv')"></div>
      <h1>登录</h1>
      <div class="sourch">
        <p @click="goRegisterView">注册</p>
      </div>
    </nav>
    <!-- 登录方式选择 -->
    <ul class="login_mode">
      <li @click="lConindex = 0" :class="{ con: lConindex == 0 }">
        <div class="img" v-if="lConindex == 0">
          <van-image width="13" height="18" src="/img/home/phoneTrue.png" />
        </div>
        <div class="img" v-if="lConindex == 1">
          <van-image width="13" height="18" src="/img/home/phoneFalse.png" />
        </div>
        <span>手机号登录</span>
      </li>
      <li @click="lConindex = 1" :class="{ con: lConindex == 1 }">
        <div class="img" v-if="lConindex == 0">
          <van-image width="13" height="18" src="/img/home/password.png" />
        </div>
        <span :class="{ con: lConindex == 1 }">密码登录</span>
      </li>
    </ul>
    <!-- 手机号登陆 -->
    <div class="input_box" v-if="lConindex == 0">
      <input type="text" placeholder="输入手机号" v-model="phoneNum" />
      <p>
        <input type="text" placeholder="输入验证码" v-model="verification" />
        <button :class="{ con: time != 60 }" @click="getCode">
          {{ time == 60 ? "获取验证码" : time + "S" }}
        </button>
      </p>
    </div>
    <!-- 密码登录 -->
    <div class="input_box con" v-if="lConindex == 1">
      <input type="text" placeholder="输入手机号" v-model="phoneNum2" />
      <div class="look_input">
        <input
          :type="changePassword1"
          placeholder="输入密码"
          v-model="password"
        />
        <img
          @click="passwordOneChange"
          src="https://img.xmkanshu.com/operateimg/novel/1a/1a7b44e2cb6821c8aa501913194dd3ed.png"
          alt="look"
        />
      </div>
    </div>
    <!-- 登录按钮 -->
    <div class="btn">
      <button @click="login">登录</button>
    </div>
    <!-- 分割线 -->
    <div class="separate_box">
      <div class="separate">
        <span>其他登陆方式</span>
      </div>
    </div>
    <!-- 其他登录方式 -->
    <div class="other">
      <van-image width="40" height="40" src="/img/home/qq.png" />
      <van-image width="40" height="40" src="/img/home/wb.png" />
      <van-image width="40" height="40" src="/img/home/bd.png" />
    </div>
    <!-- 介绍 -->
    <div class="information">
      <p>客服 400-628-9988</p>
      <p>极速版 | <span>触屏版</span> | 客户端</p>
      <p>© 2023 天浪小说</p>
      <!-- <p>京ICP备 11009265号-5</p> -->
    </div>
    <div class="legislation">
      登录代表您同意天浪小说<span>用户协议</span>和<span>隐私策略</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 17px;
    height: 17px;
    background: url("/public/img/home/left.png") no-repeat 12px 0px;
    background-size: 8px 13px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 17px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 12px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 12px;
      color: #999999;
    }
    .img {
      width: 16px;
      height: 16px;
      background: url("/public/img/home/search.png") no-repeat center center;
      background-size: cover;
    }
  }
}
.login_mode {
  padding: 0 10px;
  display: flex;
  height: 53px;
  background-color: #fff;
  li {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #999;
    font-size: 15px;
    &::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 2px;
      background-color: #e4e4e4;
      bottom: 0;
      left: 0;
    }
    &.con::after {
      background-color: #f54b41;
    }
    &.con span {
      color: #f54b41;
    }
  }
  .img {
    margin-left: 25px;
    margin-right: 23px;
  }
  span.con {
    display: inline-block;
    margin-left: 61px;
  }
}
.input_box {
  padding-top: 18px;
  background-color: #fff;
  padding-left: 10px;
  &.con {
    padding-bottom: 18px;
  }
  input {
    width: 89.3%;
    height: 36px;
    outline: none;
    margin-bottom: 18px;
    padding-left: 18px;
    color: #757575;
    border: 1px solid #999999;
    font-size: 14px;
  }
  p {
    input {
      width: 54.7%;
      margin-right: 8px;
    }
    button {
      width: 118px;
      height: 35px;
      border: 1px solid #f54b41;
      font-size: 12px;
      color: #f54b41;
      background-color: #fff;
      &.con {
        background-color: #b5b5b5;
        border-color: #b5b5b5;
        color: #fff;
      }
    }
  }
  .look_input {
    width: 89.3%;
    height: 36px;
    padding-left: 18px;
    color: #757575;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    input {
      border: none;
      width: 90%;
      margin: 0;
      padding: 0;
    }
    img {
      width: 25px;
      height: 15px;
    }
  }
}
.btn {
  padding: 0 10px;
  background-color: #fff;
  button {
    width: 100%;
    color: #fff;
    font-size: 15px;
    background-color: #f54b41;
    height: 36px;
    border: none;
  }
}
.separate_box {
  background-color: #fff;
  padding-bottom: 18px;
  .separate {
    width: 94.7%;
    position: relative;
    border-bottom: 1px solid #d4d4d5;
    margin: 0 auto;
    padding-top: 40px;
    background-color: #fff;
    span {
      position: absolute;
      font-size: 13px;
      color: #5f5f5f;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0 10px;
      background-color: #fff;
    }
  }
}
.other {
  padding: 0 56px;
  padding-bottom: 49px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.information {
  background-color: #fbfbfb;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 11px;
  p {
    font-size: 13px;
    color: #999999;
    margin-bottom: 14px;
    &:nth-of-type(1) {
      color: #c1c1c1;
    }
    span {
      font-size: 14px;
      color: #000;
    }
  }
}
.legislation {
  padding: 42px 0;
  text-align: center;
  font-size: 12px;
  color: #bcbcbc;
  span {
    color: #9bc2ef;
  }
}
</style>