<template>
  <view
    class="phone-binding-body"
    :style="{
      background: themeStore.theme.home.bgColor,
      backgroundSize: '100% 100%',
    }"
  >
    <view
      :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"
    ></view>
    <Header :title="$t('account.header.phoneBindingTitle')"></Header>
    <view class="content-body">
      <view class="phone-binding-logo">
        <theme-image class="logo-image" :src="appStore.startImgUrls.loginLogo" mode="aspectFit" />
      </view>
      <view class="phone-binding-form">
        <view
          class="phone-binding-form-item"
          :style="{
            borderColor:
              themeStore.theme.account.phoneBinding.formItemBorderColor,
            backgroundColor:
              themeStore.theme.account.phoneBinding.formItemBgColor,
          }"
        >
          <view class="phone-binding-form-item-icon">
            <view
              class="icon-size ft16"
              :style="{ color: themeStore.theme.text.theme2 }"
              >{{ appStore.phoneNumberPrefix }}</view
            >
            <theme-image
              class="segmentation-size"
              v-if="themeStore.theme.account.phoneBinding.isShowDivisionImage"
              src="@/static/account/icon/segmentation.png"
            ></theme-image>
          </view>
          <input
            type="number"
            v-model="phone"
            maxlength="10"
            class="phone-input"
            :style="{
              color: themeStore.theme.account.phoneBinding.text.inputColor,
            }"
            :placeholder="$t('login.placeholder.phone')"
          />
        </view>
        <view class="phone-binding-form-code">
          <view
            class="phone-binding-form-code-item"
            :style="{
              borderColor:
                themeStore.theme.account.phoneBinding.formItemBorderColor,
              backgroundColor:
                themeStore.theme.account.phoneBinding.formItemBgColor,
            }"
          >
            <view class="phone-binding-form-item-icon">
              <view
                class="icon-size ft16"
                :style="{ color: themeStore.theme.text.theme2 }"
              >
								OTP
							</view>
              <theme-image
                class="segmentation-size"
                v-if="themeStore.theme.account.phoneBinding.isShowDivisionImage"
                src="@/static/account/icon/segmentation.png"
              ></theme-image>
            </view>
            <input
              type="number"
              v-model="verificationCode"
              class="phone-input"
              :style="{
                color: themeStore.theme.account.phoneBinding.text.inputColor,
              }"
              :placeholder="$t('login.placeholder.otp')"
            />
          </view>
          <view
            class="get-otp-btn"
            :style="{
              color: themeStore.theme.account.phoneBinding.getOtpBtn.textColor,
              backgroundColor:
                themeStore.theme.account.phoneBinding.getOtpBtn.background,
            }"
            @click="getOtp"
          >
            {{ btnText }}
          </view>
        </view>
        <view class="phone-binding-form-check">
          <view
            @click="checkClick"
            class="check-block"
            :style="{
              backgroundColor:
                themeStore.theme.account.phoneBinding.check.bgColor,
              borderColor:
                themeStore.theme.account.phoneBinding.check.borderColor,
            }"
          ></view>
          <text
            class="check-text"
            :style="{
              color: themeStore.theme.account.phoneBinding.text.normal,
            }"
            >I agree all statements in Terms and Conditions</text
          >
          <theme-image
            @click="checkClick"
            v-show="isCheck"
            src="@/static/account/Check.png"
            class="check-image-size"
          ></theme-image>
        </view>
        <view class="config-btn-block">
          <view
            class="config-btn"
            :style="{
              color: themeStore.theme.button.linearGoldenText,
              background: themeStore.theme.button.linearGolden,
            }"
            @click="config"
          >
            {{ $t("account.button.confirmCapital") }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

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

let isCheck = ref(true);
let timer = ref(null);
let time = ref(0);
let btnText = ref(t("account.button.otp"));
let verificationCode = ref("");
let phone = ref("");
/**
 * 选中默认选项
 */
const checkClick = () => {
  isCheck.value = !isCheck.value;
};

/**
 * 获取验证码
 */
const getOtp = async () => {
  if (time.value == 0) {
    if (phone.value == "") {
      Toast.show(t("account.phoneBinding.toast.phone"));
      return;
    }
		Toast.showLoading("Loading");
    const { code, data } = await requestGetOtp({
      tel: phone.value,
    });
		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("account.button.otp");
      time.value = 0;
      clearInterval(timer.value);
    }
  }, 1000);
};

/**
 * 提交
 */
const config = async () => {
  if (isCheck.value) {
    if (phone.value == "") {
      Toast.show("The phone number cannot be empty");
      return;
    }
    if (verificationCode.value == "") {
      Toast.show("The Verification code cannot be empty");
      return;
    }

    Toast.showLoading("Loading");
    const { code, data } = await bindPhoneApi({
      mobile: phone.value,
      verificationCode: verificationCode.value,
      referralCode: appStore.inviteCode,
    });
    Toast.hideLoading();
    if (code == 200) {
      Toast.showLoading("Loading");
      await userStore.getUserTotalInfo();
      Toast.hideLoading();
			Toast.showSuccess()
			setTimeout(() => {
				uni.navigateBack();
			}, 1000)
    }
  } else {
    isCheck.value = true;
  }
};
</script>

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

  .content-body {
    padding: 0rpx 50rpx;
  }

  .phone-binding-logo {
    width: 100%;
    height: 553rpx;
    box-sizing: border-box;
    padding-top: 140rpx;
    display: flex;
    justify-content: center;
    .logo-image {
      width: 386rpx;
      height: 209rpx;
    }
  }

  .phone-binding-form {
    width: 100%;
    box-sizing: border-box;

    .whild-ui-label {
      font-weight: bold;
      font-size: 30rpx;
    }
    .phone-binding-form-code {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;

      .get-otp-btn {
        width: 220rpx;
        height: 90rpx;
        // background: #5d1916;
        border-radius: 45rpx;
        // color: #f5736d;
        font-size: 36rpx;
        text-align: center;
        line-height: 90rpx;
				flex-shrink: 0;
      }
      .phone-binding-form-code-item {
        width: 405rpx;
        height: 90rpx;
        // background: rgba(20, 1, 1, 0.6);
        border-radius: 45rpx;
        border: 3px solid;
        display: flex;
        justify-content: flex-start;
      }
    }

    .phone-binding-form-check {
      width: 100%;
      margin-top: 39rpx;
      position: relative;
      display: flex;
      justify-content: flex-start;
      .check-block {
        width: 32rpx;
        height: 34rpx;
        // background: #3a0614;
        border-radius: 10rpx;
        border: 3px solid;
      }
      .check-text {
        margin-left: 15rpx;
        font-size: 24rpx;
        // color: #fff;
      }
      .check-image-size {
        width: 37rpx;
        height: 36rpx;
        display: block;
        position: absolute;
        left: 0;
        top: -8rpx;
      }
    }
    .phone-binding-form-item {
      width: 100%;
      height: 90rpx;
      // background: rgba(20, 1, 1, 0.6);
      border-radius: 45rpx;
      border: 3px solid;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .phone-binding-form-item-icon {
      width: 120rpx;
      display: flex;
      box-sizing: border-box;
      align-items: center;
			font-size: 32rpx;
			flex-shrink: 0;
			
      .icon-size {
				flex: 1;
				text-align: center;
      }
      .segmentation-size {
				flex-shrink: 0;
        width: 4rpx;
        height: 68rpx;
      }
    }

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

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