<template>
  <div class="login-wrap">
    <Nav />
    <h2>请登录</h2>
    <div class="form">
      <div class="input-group">
        <label>账户</label>
        <input placeholder="请输入账号" v-model.trim="fromData.userName" />
      </div>
      <div class="input-group">
        <label>密码</label>
        <input
          type="password"
          placeholder="请输入密码"
          v-model.trim="fromData.password"
        />
      </div>
      <!-- <div class="input-group">
        <label>验证码</label>
        <input placeholder="请输入验证码" v-model="fromData.code" />
        <span v-if="!showTime" @click="getCode">点击获取</span>
        <i v-else>{{ time }}S后重试</i>
      </div> -->
      <button @click="login" :disabled="disabled">登录</button>
      <div class="opt">
        <span @click="toMobileRegister">去注册</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Nav from "@/components/NavBar.vue";
// import { queryLogin } from "@/api/index";
import { useStore } from "vuex";
import { showToast } from "vant";
import { getUserInfo } from "@/api/index";
import location from "sockjs-client/lib/location";

const store = useStore();
const route = useRoute();
const router = useRouter();

const disabled = ref(true);
// const showTime = ref(false);
const fromData = reactive({
  userName: "",
  password: "",
  token: route.query.token,
  refreshToken: route.query.refreshToken,
  loginType: route.query.refreshToken ? 2 : 1, // 1：账号密码登录 2：token登录
  clientType: 1,
});
watch(fromData, (val) => {
  if (val.userName && val.password) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
});

// const reg = /^1[34578]\d{9}$/;
const login = async () => {
  if (fromData.loginType === 1) {
    if (!fromData.userName) {
      return showToast("请输入账号！");
    } else if (!fromData.password) {
      return showToast("请输入密码！");
    }
  }
  let ret = await getUserInfo({ ...fromData });
  if (ret.code === 0) {
    store.commit("setToken", ret.data.upToken);
    store.commit(
      "setUserInfo",
      Object.assign({ account: ret.data.userId }, ret.data)
    );
    router.replace(route.query.redirect ? route.query.redirect : "/");
  }
};

if (route.query.refreshToken) {
  login();
}

const toMobileRegister = () => {
  location.href = `${window.config.mobileRegister}${encodeURIComponent(
    location.href
  )}`;
};

// const time = ref(59);
// const getCode = async () => {
//   showTime.value = true;
//   let interval = null;
//   interval = setInterval(() => {
//     time.value--;
//     if (time.value === 0) {
//       clearInterval(interval);
//       showTime.value = false;
//       time.value = 59;
//     }
//   }, 1000);
// };
</script>
<style scoped lang="scss">
::v-deep .van-nav-bar {
  background: none;
}
h2 {
  color: rgb(51, 51, 51);
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  padding: 64px 0 96px 40px;
  text-align: left;
}
.login-wrap {
  background: url(../../assets/images/login-bg.png) no-repeat center;
  background-size: cover;
}
.form {
  text-align: left;
  padding: 0 32px;
  .input-group {
    display: flex;
    align-items: center;
    height: 96px;
    border-radius: 12px;
    background: var(---, #f8f9fa);
    margin-bottom: 48px;
    label {
      color: rgb(51, 51, 51);
      font-size: 32px;
      font-weight: 400;
      width: 160px;
      padding-left: 32px;
      box-sizing: border-box;
    }
    input {
      flex: 1;
      color: rgb(51, 51, 51);
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      background: none;
      border: none;
    }
    input::placeholder {
      color: rgb(179, 179, 179);
    }
    span {
      color: rgb(240, 46, 24);
      font-size: 32px;
      font-weight: 400;
    }
    i {
      color: rgb(179, 179, 179);
      font-size: 32px;
      font-weight: 400;
    }
  }
  button {
    display: block;
    width: 100%;
    padding: 24px 48px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: #e83030;
    font-size: 32px;
    color: #fff;
    margin: 112px auto 40px;
    &:disabled {
      opacity: 0.5;
    }
  }
  .opt {
    display: flex;
    justify-content: flex-end;
    span {
      font-size: 32px;
      color: cornflowerblue;
      cursor: pointer;
    }
  }
}
</style>
