<template>
  <mobile-sub-layout
    :title="$t('account.header.withdrawalPasswordTitle')"
    :lineHeight="4"
    :bgColor="themeStore2.theme.bgColor"
  >
    <view class="withdraw-password-body">
      <view
        class="withdraw-password-content"
        :style="{ backgroundColor: themeStore.lightBgColor }"
      >
        <template v-for="(item, index) in WithdrawPasswordList" :key="index">
          <view
            class="withdraw-password-item-lable"
            :style="{ color: themeStore.text.normal }"
            :class="index != 0 ? 'm-top' : ''"
          >
						{{ item.label }}
					</view>
          <view
            class="withdraw-password-item-value"
            :style="{
              backgroundColor: themeStore.passwordItemBgColor,
              borderColor: themeStore.passwordItemBorderColor
            }"
          >
            <view class="withdraw-password-item-value-icon-content">
              <theme-image
                class="withdraw-password-item-value-icon"
								mode="aspectFit"
                :src="item.icon"
              ></theme-image>
              <theme-image
                v-if="themeStore.isShowDivisionImage"
                class="withdraw-password-item-value-segmentation"
                src="@/static/account/icon/segmentation.png"
              ></theme-image>
            </view>
            <input
              :type="item.type"
              :style="{ color: themeStore.text.inputColor }"
              :placeholder-style="
                JSON.stringify({ color: themeStore.text.placeHolderColor })
              "
              v-model="form[item.fieldName]"
              class="withdraw-password-item-value-input"
              :placeholder="item.placeholder"
            />
          </view>
        </template>

        <view
          class="withdraw-password-item-lable m-top"
          :style="{ color: themeStore.text.normal }"
          >{{ $t("account.withdrawalPassword.label.phone") }}</view
        >
        <view
          class="withdraw-password-item-value"
          :style="{
            backgroundColor: themeStore.passwordItemBgColor,
            borderColor: themeStore.passwordItemBorderColor
          }"
        >
          <view class="withdraw-password-item-value-icon-content">
            <view
              class="ft16 withdraw-password-item-value-icon"
              :style="{ color: themeStore2.theme.text.theme2 }"
            >
						  {{ appStore.phoneNumberPrefix }}
						</view>
            <theme-image
              class="withdraw-password-item-value-segmentation"
              src="@/static/account/icon/segmentation.png"
              mode="aspectFit"
            ></theme-image>
          </view>
          <input
            type="text"
            v-model="form.mobile"
            :disabled="!form.canModifyPwd"
            maxlength="10"
            :style="{ color: themeStore.text.inputColor }"
            :placeholder-style="
              JSON.stringify({ color: themeStore.text.placeHolderColor })
            "
            class="withdraw-password-item-value-input"
            :placeholder="$t('account.withdrawalPassword.label.phone')"
          />
        </view>
        <view class="m-top withdraw-password-item-code">
          <view
            class="withdraw-password-item-code-value"
            :style="{
              backgroundColor: themeStore.passwordItemBgColor,
              borderColor: themeStore.passwordItemBorderColor,
            }"
          >
            <view class="withdraw-password-item-value-icon-content">
              <view
                class="ft16 withdraw-password-item-value-icon"
                :style="{ color: themeStore2.theme.text.theme2 }"
              >
                OTP
              </view>
              <theme-image
                class="withdraw-password-item-value-segmentation"
                src="@/static/account/icon/segmentation.png"
                mode="aspectFit"
              ></theme-image>
            </view>
            <input
              type="text"
              v-model="form.verificationCode"
              class="withdraw-password-item-value-input"
              :style="{ color: themeStore.text.inputColor }"
              :placeholder-style="
                JSON.stringify({ color: themeStore.text.placeHolderColor })
              "
              :placeholder="
                $t('account.withdrawalPassword.label.otpPlaceholder')
              "
            />
          </view>
          <view
            class="get-otp-btn"
            :style="{
              color: themeStore.getOtpBtn.textColor,
              background: themeStore.btnBlockBgColor,
            }"
            @click="getOtp"
          >
            {{ btnText }}
          </view>
        </view>
      </view>
    </view>
    <view
      class="submit-btn-block"
      :style="{ backgroundColor: themeStore2.theme.bgColor }"
    >
      <view
        class="submit-btn"
        :style="{ background: themeStore2.theme.button.normal, color: themeStore2.theme.button.textNormal }"
        @click="submit"
        >{{ $t("account.button.confirm") }}</view
      >
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import { WithdrawPasswordList } from "../constants/withdrawPassword.js";
import { ref, reactive, onMounted } from "vue";
import { setWithdrawalPasswordApi } 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.js";

const { t } = useI18n();
const themeStore = useThemeStore().theme.account.withdrawalPassword;
const themeStore2 = useThemeStore();
const userStore = useUserStore()
const appStore = useAppStore();

let form = reactive({
  withdrawPasswd: "",
  withdrawPasswdRepeat: "",
  mobile: userStore.userInfo.mobile ? userStore.userInfo.mobile.substring(2) : '',
  verificationCode: "",
	canModifyPwd: userStore.userInfo.mobile ? false : true
});

let timer = ref(null);
let time = ref(0);
let btnText = ref(t("account.button.otp"));

const getOtp = async () => {
  if (time.value == 0) {
    if (form.mobile == "") {
      Toast.show(t("account.withdrawalPassword.toast.phone"));
      return;
    }
    const { code, data } = await requestGetOtp({
      tel: form.mobile,
    });
    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 submit = async () => {
  if (form.withdrawPasswd == "") {
    Toast.show(t("account.withdrawalPassword.toast.withdrawPasswd"));
    return;
  }
  if (form.withdrawPasswd !== form.withdrawPasswdRepeat) {
    Toast.show(t("account.withdrawalPassword.toast.withdrawPasswdRepeat"));
    return;
  }

  if (form.mobile == "") {
    Toast.show(t("account.withdrawalPassword.toast.phone"));
    return;
  }

  if (form.verificationCode == "") {
    Toast.show(t("account.withdrawalPassword.toast.verificationCode"));
    return;
  }

	Toast.showLoading('Loading')
  const { code, data } = await setWithdrawalPasswordApi({
    withdrawPasswd: form.withdrawPasswd,
    withdrawPasswdRepeat: form.withdrawPasswdRepeat,
    mobile: form.canModifyPwd ? form.mobile : null,
    verificationCode: form.verificationCode,
  });
	Toast.hideLoading()
  if (code == 200) {
		Toast.showSuccess()
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
  }
}
</script>

<style lang="scss" scoped>
.withdraw-password-body {
  width: 100vw;
  box-sizing: border-box;
  padding-top: 10rpx;

  .m-top {
    margin-top: 50rpx;
  }
  .withdraw-password-content {
    width: 100%;
    height: 100%;
    // background: #610606;
    box-sizing: border-box;
    padding: 30rpx;
    padding-bottom: 151rpx;
    .withdraw-password-item-lable {
      width: 100%;
      height: 25rpx;
      line-height: 25rpx;
      font-size: 30rpx;
      // color: #fff;
    }
    .withdraw-password-item-value {
      width: 100%;
      height: 90rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // background: #3d0303;
      border-radius: 20rpx;
      border: 3px solid;
      box-sizing: border-box;
      margin-top: 40rpx;
    }
    .withdraw-password-item-code {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .withdraw-password-item-code-value {
        // width: 370rpx;
        height: 90rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 20rpx;
        border: 3px solid;
        box-sizing: border-box;
				flex: 1;
      }
      .get-otp-btn {
        width: 250rpx;
				flex-shrink: 0;
        height: 90rpx;
        background-size: 100% 100%;
        color: #fff;
        line-height: 90rpx;
        text-align: center;
        border-radius: 30rpx;
        font-size: 36rpx;
				margin-left: 30rpx;
      }
    }
    .withdraw-password-item-value-icon-content {
			flex-shrink: 0;
      width: 120rpx;
      height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .withdraw-password-item-value-icon {
				flex: 1;
        width: 110rpx;
        height: 60rpx;
				line-height: 60rpx;
				text-align: center;
      }
      .withdraw-password-item-value-segmentation {
				flex-shrink: 0;
        width: 4rpx;
        height: 68rpx;
      }
    }

    .withdraw-password-item-value-input {
			flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      border: none;
      outline: none;
      font-size: 26rpx;
      // color: #fff;
      box-sizing: border-box;
      padding-left: 30rpx;
    }
    .withdraw-password-item-value-input::placeholder {
      font-size: 28rpx;
      // color: #963333;
    }
  }
}
.submit-btn-block {
  width: 100%;
  height: 151rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  // background: #820708;
  position: fixed;
  bottom: 0;
  left: 0;
  .submit-btn {
    width: 100%;
    height: 90rpx;
    // background: linear-gradient(90deg, #f78b22, #e34e04);
    border-radius: 45rpx;
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>
