<template>
	<mobile-sub-layout :title="isChangePassword == 0 ? $t('login.header.changePassword') : $t('login.header.forgetPassword')" :lineHeight="4">
		<view class="forget-password-container">
			<view
				class="login-form-input-item"
				:style="{
					background: themeStore.inputeItemBg,
					border: themeStore.inputItemBorderColor,
				}"
			>
				<view
					class="login-form-input-item-label"
					:style="{
						color:
							form.phone != ''
								? themeStore.text.labelValue
								: themeStore.text.labelNoValue,
					}"
					>+91</view
				>
				<input
					v-model="form.phone"
					:style="{
						color: themeStore.text.normal,
					}"
					maxlength="10"
					:placeholder-style="
						JSON.stringify({ color: themeStore.text.tipTextColor })
					"
					class="input-style input-style-width1"
					:placeholder="$t('login.placeholder.phone')"
				/>
				<theme-image
					src="@/static/search/icon-search-clear.png"
					mode="scaleToFill"
					@click="clearPhone"
					class="suffix-size1"
				/>
			</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,
							border: themeStore.inputItemBorderColor,
						}"
					>
						<view
							v-if="themeStore.isRedUl == 1"
							class="login-form-input-item-label"
							:style="{
								color:
									form.otp != ''
										? themeStore.text.labelValue
										: themeStore.text.labelNoValue,
							}"
							>{{ t("login.button.otp") }}</view
						>
						<input
							type="text"
							v-model="form.otp"
							: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 })
							"
							class="input-style"
							:placeholder="$t('login.placeholder.loginOtp')"
						/>
					</view>
				</view>
				<view
					class="get-otp-btn"
					:style="{
						background: themeStore.intervalBg,
						color: themeStore.text.btnTextColor,
						width: themeStore.isRedUl == 0 ? '276rpx' : '185rpx',
					}"
					@click="getOtp"
					>{{ btnText }}</view
				>
			</view>
			<view
				class="login-form-input-item m-top"
				:style="{
					background: themeStore.inputeItemBg,
					border: themeStore.inputItemBorderColor,
				}"
			>
				<view style="width: 102rpx" v-if="themeStore.isRedUl == 1"
					><theme-image
						src="@/static/login/password.png"
						class="password-size"
						mode="scaleToFill"
				/></view>
				<input
					:type="isPassword ? 'password' : 'text'"
					v-model="form.password"
					:style="{
						color: themeStore.text.normal,
						paddingLeft: themeStore.isRedUl == 0 ? '46rpx' : '0',
					}"
					:placeholder-style="
						JSON.stringify({ color: themeStore.text.tipTextColor })
					"
					:class="
						themeStore.isRedUl == 0
							? 'input-style-red-width1'
							: 'input-style-width1'
					"
					class="input-style"
					:placeholder="$t('login.placeholder.phone')"
				/>
				<theme-image
					:src="
						isPassword != ''
							? '@/static/login/hidden.png'
							: '@/static/login/show.png'
					"
					mode="scaleToFill"
					@click="checkIsPassword"
					class="suffix-size"
				/>
			</view>
			<view
				class="submit"
				:style="{
					background: themeStore2.theme.button.linearGolden,
					color: themeStore2.theme.button.linearGoldenText
				}"
				@click="submit"
				>{{ t("login.button.clickSubmit") }}
			</view>
			<view
				class="tips"
				v-if="isChangePassword == 0"
				:style="{
					color: themeStore.text.normal,
				}"
			>
				<view>{{ t("login.tips.changePasswordTipTitle") }}</view>
				<view>{{ t("login.tips.changePasswordTipText") }}</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import Toast from "@/module/toast/toast.js";
import { requestGetOtp, changePasswordApi } 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 themeStore = useThemeStore().theme.loginV2;
const themeStore2 = useThemeStore()

const { t } = useI18n();

let isChangePassword = ref(userStore.isChangePassword);
let isPassword = ref(true);
let form = reactive({
  phone: "",
  otp: "",
  password: "",
});

let timer = ref(null);
let time = ref(0);
let btnText = ref(t("login.button.send"));

/**
 * 密码显示隐藏
 */
const checkIsPassword = () => {
  isPassword.value = !isPassword.value;
};
/**
 * 跳转协议
 */
const clearPhone = () => {
  form.phone = "";
};

/**
 * 获取验证码
 */
const getOtp = async () => {
  if (time.value == 0) {
    if (form.phone == "") {
      Toast.show(t("login.toast.phone"));
      return;
    }
    Toast.showLoading("Loading");
    const { code, data } = await requestGetOtp({
      tel: form.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 (form.phone == "") {
    Toast.show(t("login.toast.phone"));
    return;
  }
  if (form.otp == "") {
    Toast.show(t("login.toast.oth"));
    return;
  }
  if (form.password == "") {
    Toast.show(t("login.toast.password"));
    return;
  }
  Toast.showLoading("Loading");
  const { code, data } = await changePasswordApi({
    mobile: form.phone,
    password: form.password,
    verificationCode: form.otp,
  });
	Toast.hideLoading()
  if (code == 200) {
    if (isChangePassword.value == 0) {
      uni.reLaunch({
        url: "/pages/account/Account",
      });
    } else {
      uni.reLaunch({
        url: "/pages/Login/LoginV2",
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.forget-password-container{
	width: 100%;
	box-sizing: border-box;
	padding: 80rpx 30rpx;
	
	.login-form-otp-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.input-style-red-width {
		width: 100%;
	}
	.input-style-width1 {
		width: calc(100% - 150rpx);
	}
	.input-style-red-width1 {
		width: calc(100% - 48rpx);
	}
	.login-form-input-item {
		width: 100%;
		height: 90rpx;
		// background: #f0f0f0;
		border: 2rpx solid;
		border-radius: 15rpx;
		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-width1 {
			width: calc(100% - 150rpx);
		}
		.input-style {
			height: 90rpx;
			border: none;
			outline: none;
			// color: #211e21;
			line-height: 90rpx;
			font-weight: 500;
			font-size: 28rpx;
		}

		.password-size {
			width: 39rpx;
			height: 43rpx;
		}
	}

	.m-top {
		margin-top: 30rpx;
	}
	.suffix-size {
		width: 48rpx;
		height: 35rpx;
	}
	.suffix-size1 {
		width: 50rpx;
		height: 50rpx;
	}
	.get-otp-btn {
		width: 185rpx;
		height: 90rpx;
		// background: #dce9e5;
		border-radius: 16rpx;
		font-size: 30rpx;
		// color: #639f8c;
		line-height: 90rpx;
		text-align: center;
		margin-left: 30rpx;
	}
	.submit {
		margin-top: 100rpx;
		width: 100%;
		height: 90rpx;
		// background: #126e51;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		// color: #ffffff;
	}
	.tips {
		margin-top: 60rpx;
		font-size: 24rpx;
		line-height: 1.5;
	}
}
</style>
