<template>
  <common-layout>
    <view class="login-body" :style="{
      background: themeStore2.theme.home.bgColor,
      backgroundSize: '100% 100%',
    }">
      <view :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></view>
      <LoginHeader :title="$t('login.header.title')"></LoginHeader>
      <view class="login-content">
        <view class="flex-scenter">
          <theme-image class="login-logo" :src="appStore.startImgUrls.loginLogo" mode="aspectFit"></theme-image>
        </view>
        <view class="login-form">
          <view class="login-form-header" :style="{ borderBottomColor: themeStore.lightGreyBg }">
            <text class="login-form-header-item" :style="{
              color: active == 0 ? themeStore.tabs.highlight : themeStore.tabs.normal,
              borderBottomColor:
                active == 0 ? themeStore.inputBorderColor : 'none',
            }" :class="active == 0 ? 'active' : ''" @click="checkActive(0)">{{ t("login.header.Password") }}</text>
            <text class="login-form-header-item" :style="{
              color: active == 1 ? themeStore.tabs.highlight : themeStore.tabs.normal,
              borderBottomColor:
                active == 1 ? themeStore.inputBorderColor : 'none',
            }" :class="active == 1 ? 'active' : ''" @click="checkActive(1)">{{ t("login.header.OTP") }}</text>
          </view>
          <view class="login-form-content">
            <template v-if="active == 1">
              <view class="login-form-input-item" :style="{
                background: themeStore.inputeItemBg,
                borderRadius: themeStore.borderRadius,
                border: themeStore.inputItemBorderColor,
              }">
                <view class="login-form-input-item-label" :style="{
                  color:
                    otpForm.phone != ''
                      ? themeStore.text.labelValue
                      : themeStore.text.labelNoValue,
                }">+91</view>
                <input type="text" v-model="otpForm.phone" maxlength="10" class="input-style input-style-width" :style="{
                  color: themeStore.text.normal,
                }" :placeholder-style="JSON.stringify({ color: themeStore.text.tipTextColor })
                  " :placeholder="$t('login.placeholder.phone')" />
              </view>
              <view class="login-form-otp-content m-top">
                <view :style="{
                  width: themeStore.isRedUl == 0 ? '405rpx' : '444rpx',
                }">
                  <view class="login-form-input-item" :style="{
                    background: themeStore.inputeItemBg,
                    borderRadius: themeStore.borderRadius,
                    border: themeStore.inputItemBorderColor,
                  }">
                    <view v-if="themeStore.isRedUl == 1" class="login-form-input-item-label" :style="{
                      color:
                        otpForm.otp != ''
                          ? themeStore.text.labelValue
                          : themeStore.text.labelNoValue,
                    }">{{ t("login.button.otp") }}</view>
                    <input type="text" v-model="otpForm.otp" class="input-style input-style-width" :style="{
                      color: themeStore.text.normal,
                      paddingLeft: themeStore.isRedUl == 0 ? '46rpx' : '0',
                    }" :class="themeStore.isRedUl == 0
                        ? 'input-style-red-width'
                        : 'input-style-width'
                      " :placeholder-style="JSON.stringify({
                      color: themeStore.text.tipTextColor,
                    })
                      " :placeholder="$t('login.placeholder.loginOtp')" />
                  </view>
                </view>
                <view class="get-otp-btn" :style="{
                  background: themeStore.intervalBg,
                  color: themeStore.text.btnTextColor,
                  borderRadius: themeStore.borderRadius,
                  width: themeStore.isRedUl == 0 ? '276rpx' : '185rpx',
                }" @click="getOtp">{{ btnText }}</view>
              </view>
            </template>
            <template v-if="active == 0">
              <view class="login-form-input-item" :style="{
                background: themeStore.inputeItemBg,
                borderRadius: themeStore.borderRadius,
                border: themeStore.inputItemBorderColor,
              }">
                <input type="text" v-model="passwordForm.number" class="input-style" :style="{
                  color: themeStore.text.normal,
                  paddingLeft: themeStore.isRedUl == 0 ? '46rpx' : '0',
                }" :class="themeStore.isRedUl == 0
                    ? 'input-style-red-width1'
                    : 'input-style-width1'
                  " :placeholder-style="JSON.stringify({ color: themeStore.text.tipTextColor })
                  " :placeholder="$t('login.placeholder.passwordLogin')" />
              </view>
              <view class="login-form-otp-content m-top">
                <view class="login-form-input-item" :style="{
                  background: themeStore.inputeItemBg,
                  borderRadius: themeStore.borderRadius,
                  border: themeStore.inputItemBorderColor,
                }">
                  <input :type="isPassword ? 'password' : 'text'" v-model="passwordForm.password"
                    class="input-style input-style-width1" :style="{
                      color: themeStore.text.normal,
                      paddingLeft: themeStore.isRedUl == 0 ? '46rpx' : '0',
                    }" :placeholder-style="JSON.stringify({ color: themeStore.text.tipTextColor })
                    " :placeholder="$t('login.placeholder.password')" />
                  <theme-image :src="isPassword
                      ? '@/static/login/hidden.png'
                      : '@/static/login/show.png'
                    " mode="scaleToFill" @click="checkIsPassword" class="suffix-size" />
                </view>
              </view>
            </template>
            <view class="btn-text-list" :style="{
              color: themeStore.text.normal,
            }">
              <text @click="goRegister">{{ t("login.button.register") }}</text>
              <text @click="goForgetPassword">{{
                t("login.button.forgetPassword")
                }}</text>
            </view>
            <view class="submit" @click.stop="submit" :style="{
              background: themeStore2.theme.button.linearGolden,
              color: themeStore2.theme.button.linearGoldenText
            }">{{ t("login.button.submit") }}</view>
          </view>
        </view>
        <LoginFotter></LoginFotter>
      </view>
    </view>
  </common-layout>
</template>

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

const userStore = useUserStore();
const appStore = useAppStore();
const themeStore2 = useThemeStore();
const themeStore = useThemeStore().theme.loginV2;
const { t } = useI18n();
let active = ref(0);
let isPassword = ref(true);
let otpForm = reactive({
  phone: "",
  otp: "",
});
let passwordForm = reactive({
  number: "",
  password: "",
});

let timer = ref(null);
let time = ref(0);
let btnText = ref(t("login.button.send"));
/**
 * 切换方式
 */
const checkActive = (type) => {
  active.value = type;
  otpForm.otp = "";
  otpForm.phone = "";
  timer.value = null;
  time.value = 0;
  btnText.value = t("login.button.send");
  passwordForm.number = "";
  passwordForm.password = "";
};
/**
 * 获取验证码
 */
const getOtp = async () => {

  if (time.value == 0) {
    if (otpForm.phone == "") {
      Toast.show(t("login.toast.phone"));
      return;
    }
    Toast.showLoading("Loading");
    const { code, data } = await requestGetOtp({
      tel: otpForm.phone,
    });
    Toast.hideLoading();
    if (code == 200) {
      time.value = data;
      countdown();
    }
  }
};
/**
 * 密码显示隐藏
 */
const checkIsPassword = () => {
  isPassword.value = !isPassword.value;
};
/**
 * 倒计时
 */
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 goRegister = () => {
  uni.navigateTo({
    url: `/pages/Login/Register`,
  });
};
/**
 * 忘记密码
 */
const goForgetPassword = () => {
  userStore.isChangePassword = 1;
  uni.navigateTo({
    url: `/pages/Login/ForgetPassword`,
  });
};
/**
 * 提交
 */
const submit = async () => {
  if (active.value == 0) {
    if (!passwordForm.number) {
      Toast.show(t("login.toast.idOrPhone"));
      return;
    }
    if (!passwordForm.password) {
      Toast.show(t("login.toast.password"));
      return;
    }
    Toast.showLoading("Loading");
    const isSuccess = await userStore.idPasswordLogin({
      phoneNumber: passwordForm.number,
      password: passwordForm.password,
    });
    Toast.hideLoading();
    if (!isSuccess) {
      return;
    }

    uni.reLaunch({
      url: "/pages/home/Home",
    });
  }
  if (active.value == 1) {
    if (!otpForm.phone) {
      Toast.show(t("login.toast.phone"));
      return;
    }
    if (!otpForm.otp) {
      Toast.show(t("login.toast.oth"));
      return;
    }
    Toast.showLoading("Loading");
    const isSuccess = await userStore.optLogin({
      phoneNumber: otpForm.phone,
      verifyCode: otpForm.otp,
    });
    Toast.hideLoading();
    if (!isSuccess) {
      return;
    }

    uni.reLaunch({
      url: "/pages/home/Home",
    });
  }
};
</script>

<style lang="scss" scoped>
.login-body {
  width: 100vw;
  height: 100vh;

  .login-content {
    width: 100%;
    height: calc(100% - 88rpx);
    box-sizing: border-box;
    padding-top: 142rpx;

    .login-logo {
      width: 280rpx;
      height: 160rpx;
    }

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

      .login-form-header {
        width: 100%;
        height: 68rpx;
        border-bottom: 1rpx solid;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;

        .login-form-header-item {
          font-size: 30rpx;
          // color: #211e21;
          height: 100%;
          font-weight: bold;
          margin: 0 8rpx;
        }

        .active {
          // color: #126e51;
          font-size: 36rpx;
          border-bottom: 2rpx solid;
        }
      }

      .login-form-content {
        width: 100%;
        box-sizing: border-box;
        padding: 38rpx 12rpx;

        .login-form-otp-content {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }

        .login-form-input-item {
          width: 100%;
          height: 90rpx;
          // background: #f0f0f0;
          border-radius: 30rpx;
          box-sizing: border-box;
          padding: 0 30rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .login-form-input-item-label {
            width: 102rpx;
            font-weight: bold;
            font-size: 30rpx;
            // color: rgba(49, 140, 112, 0.5);
            line-height: 32rpx;
          }

          .input-style-width {
            width: calc(100% - 102rpx);
          }

          .input-style-red-width {
            width: 100%;
          }

          .input-style-width1 {
            width: calc(100% - 45rpx);
          }

          .input-style-red-width1 {
            width: calc(100% - 48rpx);
          }

          .input-style {
            height: 90rpx;
            border: none;
            outline: none;
            // color: #211e21;
            line-height: 90rpx;
            font-weight: 500;
            font-size: 28rpx;
          }

          .input-style::placeholder {
            // color: #9d9d9e;
          }
        }

        .get-otp-btn {
          width: 185rpx;
          height: 90rpx;
          // background: #dce9e5;
          border-radius: 30rpx;
          font-weight: bold;
          font-size: 30rpx;
          // color: #639f8c;
          line-height: 90rpx;
          text-align: center;
        }

        .suffix-size {
          width: 48rpx;
          height: 35rpx;
        }

        .m-top {
          margin-top: 27rpx;
        }

        .submit {
          margin-top: 121rpx;
          width: 100%;
          height: 90rpx;
          // background: #126e51;
          border-radius: 45rpx;
          text-align: center;
          line-height: 90rpx;
          font-weight: bold;
          font-size: 30rpx;
          // color: #ffffff;
        }

        .btn-text-list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 51rpx;
          font-weight: bold;
          font-size: 24rpx;
          // color: #211e21;
        }
      }
    }
  }
}
</style>
