<template>
  <div class="login">
    <div class="login_box">
      <img class="login_logo" src="@/assets/img/logo.png" />
      <div class="content-box">
        <div class="content-main">
          <img src="@/assets/img/login-title.png" class="title_img" alt="" />
          <div class="content-item">
            <div class="content-title">手机号</div>
            <input
              type="number"
              class="input-box"
              v-model="form.phone"
              placeholder="请输入手机号"
              maxlength="11"
              oninput="if(value.length>11)value=value.slice(0,11)"
            />
          </div>
          <div class="content-item">
            <div class="content-title">密码</div>
            <input
              type="text"
              class="input-box"
              v-model="form.password"
              placeholder="请输入密码"
            />
          </div>
          <div class="content-item">
            <div class="content-title">验证码</div>
            <div class="input-box code-box">
              <input
                type="number"
                class="input-box1"
                v-model="form.smsCode"
                placeholder="请输入验证码"
                maxlength="6"
                oninput="if(value.length>6)value=value.slice(0,6)"
              />
              <div class="code" @click="getCode">{{ codeTitle }}</div>
            </div>
          </div>
          <div class="login-btn" @click="Login">登录</div>
          <div class="tips">
            <p>指定福利彩票销售场所代兑点登录</p>
            <p>*如忘记密码请联系管理员处理</p>
          </div>
        </div>
      </div>
    </div>
    <toast ref="toastRef" :type="0" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import toast from "@/components/toast/index.vue";
import { login, getSms } from "@/api/index.js";
import { Local } from "@/utils/storage.js";
import { showToast } from "vant";
const form = reactive({
  phone: "",
  password: "",
  smsCode: "",
});
const codeTitle = ref("获取验证码");
const codeTime = ref(60);
const toastRef = ref();
const disabled = ref(false);
const phoneRegex = /^1[3-9]\d{9}$/;
function Login() {
  // 验证手机号不为空
  if (form.phone == "") {
    showToast("请输入手机号");
    return;
  } else if (!phoneRegex.test(form.phone)) {
    showToast("请输入正确的手机号格式");
    return;
  }
  if (form.password == "") {
    showToast("请输入密码");
    return;
  }
  if (form.smsCode == "") {
    showToast("请输入验证码");
    return;
  }
  const params = {
    mobile: form.phone,
    password: form.password,
    smsCode: form.smsCode,
  };
  login(params).then((res) => {
    if (res.code == 200) {
      Local.set("token", res.data.token);
      Local.set("userInfo", res.data);
      toastRef.value.open("成功");
    } else {
      showToast(res.msg);
    }
  });
}
function timeWait(time) {
  disabled.value = true;
  setTimeout(function () {
    if (time >= 0) {
      codeTitle.value = "重新获取(" + time + "s)";
      time--;
      timeWait(time);
    } else {
      codeTitle.value = "获取验证码";
      codeTime.value = 60;
      disabled.value = false;
    }
  }, 1000);
}
function getCode() {
  if (disabled.value) return;
  // 验证手机号不为空
  if (form.phone == "") {
    showToast("请输入手机号");
    return;
  } else if (!phoneRegex.test(form.phone)) {
    showToast("请输入正确的手机号格式");
    return;
  }
  disabled.value = true;
  const params = {
    mobile: form.phone,
    type: 0,
  };
  getSms(params).then((res) => {
    if (res.code == 200) {
      showToast("验证码发送成功");
      timeWait(codeTime.value);
    } else {
      showToast(res.msg);
      disabled.value = false;
    }
  });
}
onMounted(() => {});
</script>

<style scoped lang="scss">
.login {
  background-color: #f46f71;
  width: 100vw;
  height: 100vh;
  .login_box {
    width: 100%;
    min-height: 15.22rem;
    background: url("@/assets/img/login-bg.png") top center / 100% 15.22rem
      no-repeat;
    overflow: hidden;
    position: relative;
    .login_logo {
      width: 3.32rem;
      height: 0.66rem;
      margin-top: 1.52rem;
      margin-left: 0.3rem;
    }
    .content-box {
      width: 6.9rem;
      height: 9.47rem;
      background: #f7aeae;
      border-radius: 0.3rem;
      padding: 0.2rem;
      box-sizing: border-box;
      margin: 0.3rem auto 0;
      .content-main {
        width: 100%;
        height: 100%;
        background-color: #fef5f5;
        border-radius: 0.2rem;
        overflow: hidden;
        .title_img {
          width: 5.83rem;
          height: 0.74rem;
          display: block;
          margin: 0.58rem auto 0.6rem;
        }
        .content-item {
          width: 100%;
          text-align: center;
          margin-bottom: 0.4rem;
          display: flex;
          align-items: center;
          .content-title {
            width: 1.47rem;
            font-weight: bold;
            font-size: 0.3rem;
            color: #97221a;
            text-align: right;
            margin-right: 0.2rem;
          }
          .input-box {
            width: 4.76rem;
            height: 0.9rem;
            background: #ffffff;
            border-radius: 0.2rem;
            font-size: 0.32rem;
            color: #333333;
            padding-left: 0.3rem;
            box-sizing: border-box;
            margin-right: 0.27rem;
            &::placeholder {
              color: #c79f9c;
            }
            &.code-box {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            .input-box1 {
              width: 2rem;
              &::placeholder {
                color: #c79f9c;
              }
            }
            .code {
              font-size: 0.32rem;
              color: #ea3a3a;
              margin-right: 0.2rem;
            }
          }
        }
        .login-btn {
          width: 3.2rem;
          height: 0.8rem;
          background: #ea3a3a;
          border-radius: 0.4rem;
          font-weight: bold;
          font-size: 0.32rem;
          color: #ffffff;
          text-align: center;
          line-height: 0.8rem;
          margin: 0.6rem auto 0;
        }
        .tips {
          font-size: 0.28rem;
          color: #ea3a3a;
          text-align: center;
          margin-top: 0.64rem;
        }
      }
    }
  }
}
</style>
