<template>
  <common-layout :bgColor="themeStore.theme.bgColor">
    <view
      class="login-body"
      :style="{ background: themeStore.theme.home.bgColor, height: appStore.windowInfo.screenHeight + 'px' }"
    >
      <view
        :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"
      ></view>
      <LoginHeader :title="$t('login.header.title')"></LoginHeader>
      <view class="login-content">
        <view class="login-content-logo">
          <theme-image class="logo-size" :src="appStore.startImgUrls.loginLogo" mode="aspectFit"></theme-image>
          <text class="login-text" :style="{ color: themeStore.theme.text.normal }">{{ $t("login.header.text") }}</text>
        </view>
        <view class="login-form">
          <view
            class="login-form-item flex-acenter plr30"
            :style="{ background: themeStore.theme.input.bgColor }"
          >
            <view class="login-form-item-icon">
              <view
                class="ft16 fwbold"
                :style="{ color: themeStore.theme.text.theme2 }"
                >{{ appStore.phoneNumberPrefix }}</view
              >
              <!-- <theme-image
              class="segmentation-size"
              src="@/static/account/icon/segmentation.png"
            ></theme-image> -->
            </view>
            <input
              type="number"
              class="phone-input"
              maxlength="10"
              :placeholder="$t('login.placeholder.phone')"
              v-model="loginForm.phone"
              :style="{ color: themeStore.theme.input.text }"
              :placeholder-style="
                JSON.stringify({ color: themeStore.theme.input.placeholder })
              "
            />
          </view>
          <view class="login-form-code">
            <view
              class="login-form-code-item flex-acenter plr30"
              :style="{ background: themeStore.theme.input.bgColor }"
            >
              <view class="login-form-item-icon">
                <view
                  class="ft16 fwbold"
                  :style="{ color: themeStore.theme.text.theme2 }"
                  >OTP</view
                >
                <!--    <theme-image
                class="segmentation-size"
                src="@/static/account/icon/segmentation.png"
              ></theme-image> -->
              </view>
              <input
                type="number"
                class="phone-input"
                :placeholder="$t('login.placeholder.otp')"
                v-model="loginForm.code"
                :style="{ color: themeStore.theme.input.text }"
                :placeholder-style="
                  JSON.stringify({ color: themeStore.theme.input.placeholder })
                "
              />
            </view>
            <view
              class="get-otp-btn"
              :style="{
                color:
                  themeStore.theme.account.withdrawalPassword.getOtpBtn
                    .textColor,
                background:
                  themeStore.theme.account.withdrawalPassword.getOtpBtn
                    .background,
                backgroundSize: '100% 100%',
              }"
              @click="getOtp"
              >{{ btnText }}</view
            >
          </view>
          <view class="login-form-check" @click.stop="checkClick">
            <view
              class="check-block"
              :style="{
                'border-color': themeStore.theme.themeDarkBgColor,
                background: themeStore.theme.themeDarkBgColor,
              }"
            >
              <image
                v-show="isCheck"
                src="@/static/images/check-2.png"
                class="check-image-size"
                mode="aspectFit"
              ></image>
            </view>
            <text
              class="check-text"
              :style="{ color: themeStore.theme.text.normal }"
              >{{ $t("login.tips.checkText") }}</text
            >
          </view>
          <view class="config-btn-block">
            <view
              class="config-btn"
              :style="{
                background: themeStore.theme.account.button.background,
                color: themeStore.theme.account.button.color,
              }"
              @click.stop="submit"
              >{{ $t("login.button.submit") }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </common-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import LoginHeader from "@/components/LoginHeader/LoginHeader.vue";
import { requestGetOtp, requestGuestLogin } from "@/api/login";
import Toast from "@/module/toast/toast.js";
import { useUserStore } from "@/store/useUserStore";
import { useAppStore } from "@/store/useAppStore";
import { useThemeStore } from "@/store/useThemeStore";
import { useI18n } from "vue-i18n";
import { okSpin } from '@/module/third/okspin.js'

const userStore = useUserStore();
const appStore = useAppStore();
const themeStore = useThemeStore();
const { t } = useI18n();

let timer = ref(null);
let time = ref(0);
let btnText = ref(t("login.button.otp"));
let isCheck = ref(true);
let loginForm = reactive({
  phone: "",
  code: "",
});

/**
 * 选中默认选项
 */
const checkClick = () => {
  isCheck.value = !isCheck.value;
};
/**
 * 获取验证码
 */
const getOtp = async () => {
	
  if (time.value == 0) {
    if (loginForm.phone == "") {
      Toast.show(t("login.toast.phone"));
      return;
    }
    Toast.showLoading("Loading");
    const { code, data } = await requestGetOtp({
      tel: loginForm.phone,
    });
    Toast.hideLoading();
    if (code == 200) {
      time.value = data;
      countdown();
    }
  }
};
/**
 * 倒计时
 */
const countdown = () => {
  btnText.value = time.value + "s";
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--;
      btnText.value = time.value + "s";
    } else {
      btnText.value = t("login.button.otp");
      time.value = 0;
      clearInterval(timer.value);
    }
  }, 1000);
};
/**
 * 提交
 */
const submit = async () => {
  if (loginForm.phone == "") {
    Toast.show(t("login.toast.phone"));
    return;
  }
  if (loginForm.code == "") {
    Toast.show(t("login.toast.oth"));
    return;
  }
  Toast.showLoading("Loading");
	okSpin.register()
  const isSuccess = await userStore.optLogin({
    phoneNumber: loginForm.phone,
    verifyCode: loginForm.code,
  });
  Toast.hideLoading();
  if (!isSuccess) {
    return;
  }
  // uni.reLaunch({
  //   url: "/pages/home/Home"
  // });
  uni.switchTab({
    url: "/pages/home/Home",
  });
};
</script>

<style lang="scss" scoped>
.login-body {
  width: 100vw;
  background-size: 100% 100%;

  .login-content {
    width: 100%;
    // height: calc(100% - 88rpx);

    .login-content-logo {
      width: 100%;
      box-sizing: border-box;
      padding-top: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .logo-size {
        width: 360rpx;
        height: 300rpx;
      }
      .login-text {
        font-size: 36rpx;
        color: #fff;
        margin-top: 60rpx;
      }
    }
  }

  .login-form {
    width: 100%;
    box-sizing: border-box;
    padding: 0 50rpx;
    margin-top: 60rpx;

    .login-form-code {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;

      .get-otp-btn {
        width: 240rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        border-radius: 45rpx;
        font-size: 36rpx;
        flex-shrink: 0;
        margin-left: 20rpx;
      }

      .login-form-code-item {
        flex: 1;
        height: 90rpx;
        border-radius: 45rpx;
        display: flex;
      }
    }

    .login-form-check {
      width: 100%;
      margin-top: 40rpx;
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .check-block {
        width: 36rpx;
        height: 36rpx;
        border-radius: 10rpx;
        border: 1px solid #d22726;
      }
      .check-text {
        margin-left: 18rpx;
        font-size: 24rpx;
        color: #fff;
      }
      .check-image-size {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .login-form-item {
      width: 100%;
      height: 90rpx;
      border-radius: 45rpx;
      display: flex;
      justify-content: flex-start;
    }
    .login-form-item-icon {
      width: 100rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;

      .icon-size {
        width: 72rpx;
        height: 35rpx;
      }
      .segmentation-size {
        width: 4rpx;
        height: 68rpx;
      }
    }

    .phone-input {
      flex: 1;
      height: 84rpx;
      line-height: 84rpx;
      border: none;
      outline: none;
      font-size: 28rpx;
      color: #fff;
      box-sizing: border-box;
      padding-left: 8rpx;
    }
    .phone-input::-webkit-input-placeholder {
      font-size: 26rpx;
      color: #913735;
    }
    .config-btn-block {
      width: 100%;
      box-sizing: border-box;
      margin-top: 60rpx;

      .config-btn {
        width: 100%;
        height: 90rpx;
        border-radius: 45rpx;
        font-size: 30rpx;
        text-align: center;
        line-height: 90rpx;
      }
    }
  }
}
</style>
