<template>
  <view class="content">
    <LoginInput
      title="手机号"
      v-model:value="forgetInfo.phone"
      place="请输入注册手机号"
      :rules="{ name: 'phone', rule: 'REG_Phone' }"
      pd="50rpx 50rpx 35rpx 50rpx"
    >
      <view class="sms-tips" v-if="forgetInfo.phone.length == 11" @tap="createInterval">
        <text v-if="smsNumber != 60">{{ smsNumber }}s</text>
        {{ smsNumber !== 60 ? "后可重新发送" : "发送验证码" }}
      </view>
    </LoginInput>
	  <LoginInput
	    title="图形验证码"
	    v-model:value="forgetInfo.vercode"
	    place="请输入图形验证码"
	    pd="0rpx 50rpx 35rpx 50rpx"
	  >
	  <view style="padding-top: 5px;">
	  	<image :src="forgetInfo.imgCodeUrl" style="width: 200rpx; height: 110rpx;margin-left: 10rpx;" @click="getCode" mode=""></image>
	  </view>
	  </LoginInput>
    <LoginInput
      pd="0 50rpx 50rpx 50rpx"
      v-model:value="forgetInfo.verificationCode"
      :rules="{ name: 'verificationCode', rule: 'REG_NotNUll' }"
      title="短信验证码"
      place="请输入短信验证码"
    ></LoginInput>
    <JButton pd="0 50rpx 50rpx 50rpx" pdTop="0" @HandleTouch="nextTo">下一步</JButton>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { Base64 } from "js-base64"
import { validateArray } from "@/hooks/rules"
import { $sendMessage, $login, $phoneCodeLogin, $retrievePassword,$isCode} from "@/http/apiManager.js";
import LoginInput from "@/components/newComponents/LoginInput/LoginInput.vue";
import JInput from "@/components/newComponents/JInput/JInput.vue"
import LoginTextUp from "@/components/JeepayLogin/LoginTextUp.vue"
import JButton from "@/components/newComponents/JButton/JButton.vue" //自定义按钮
const forgetInfo = ref({
  phone: "",
  imgCodeUrl:'',
  vercodeToken:'',
  vercode:'',
  verificationCode:'',
})
const smsNumber = ref(60)
let interval = null
// 创建定时器
let createInterval = () => {
  if (forgetInfo.value.phone.length != 11)
    return uni.showToast({
      title: "手机格式不正确",
      icon: "error",
      mask: true,
    })
  if (interval) return
  console.log("执行")
  sendMsg()
  interval = setInterval(() => {
    openInterval()
  }, 1000)
}

const getCode=()=>{
	$isCode().then(res=>
	{
		console.log(res);
		forgetInfo.value.imgCodeUrl=res.bizData.imageBase64Data
		forgetInfo.value.vercodeToken=res.bizData.vercodeToken
	})
}
getCode()

// smsNumber -1 倒计时
const openInterval = () => {
  smsNumber.value--
  if (smsNumber.value <= 0) {
    smsNumber.value = 60
    clearInterval(interval)
    interval = null
  }
}

// 发送短信验证码"
const sendMsg = () => {
  if (interval) return
  $sendMessage({
    phone: forgetInfo.value.phone,
    smsType: "retrieve",
	vercodeToken:forgetInfo.value.vercodeToken,
	vercode:forgetInfo.value.vercode
  })
    .then((res) => {
      const { bizData } = res
      uni.showToast({
        title: "发送成功",
        icon: "success",
        mask: true,
      })
    })
    .catch((err) => {
      clearInterval(interval)
      interval = null
    })
}

const nextTo = () => {
  if (validateArray(forgetInfo.value)) {
    $retrievePassword({
      phone: Base64.encode(forgetInfo.value.phone),
      code: Base64.encode(forgetInfo.value.verificationCode),
    }).then(() => {
      uni.navigateTo({
        url:
          "./setNewPassword" +
          "?verificationCode=" +
          forgetInfo.value.verificationCode +
          "&phone=" +
          forgetInfo.value.phone,
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.sms-tips {
  font-size: 28rpx;
  color: $primaryColor;
  margin-right: 30rpx;
}
</style>
