<template>
  <view class="sms-wrapper">
    <LoginInput pd="0 50rpx" v-model:value="loginInfo.phone" title="手机号" type="number" place="请输入登录名/手机号">
      <view class="sms-tips" v-if="loginInfo.phone.length == 11" @tap="createInterval">
        <text v-if="smsNumber != 60">{{ smsNumber }}s</text>
        {{ smsNumber !== 60 ? '后可重新发送' : '发送验证码' }}
      </view>
    </LoginInput>
	<LoginInput
	  title="图形验证码"
	  v-model:value="loginInfo.vercode"
	  place="请输入图形验证码"
	  pd="50rpx 50rpx 0rpx 50rpx"
	>
	<view style="padding-top: 5px;">
		<image :src="loginInfo.imgCodeUrl" style="width: 200rpx; height: 110rpx;margin-left: 10rpx;" @click="getCode" mode=""></image>
	</view>
	</LoginInput>
    <LoginInput v-model:value="loginInfo.verificationCode" title="短信验证码" type="number" place="请输入短信验证码"></LoginInput>
    <LoginButton @login="phoneCodeLogin" :isRegister="true"></LoginButton>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { $sendMessage, $login, $userInfo, $phoneCodeLogin, $getCompanyInfo,$isCode } from '@/http/apiManager.js'

import { Base64 } from 'js-base64'
import LoginInput from '@/components/newComponents/LoginInput/LoginInput'
import LoginButton from './LoginButton'
const emits = defineEmits(['successLogin'])
const loginInfo = reactive({
  phone: '',
  imgCodeUrl:'',
  vercode:'',
  vercodeToken:'',
})
const smsNumber = ref(60)
let interval = null
// 创建定时器
let createInterval = () => {
  if (interval) return
  sendMsg()
  interval = setInterval(() => {
    openInterval()
  }, 1000)
}

const getCode=()=>{
	$isCode().then(res=>
	{
		console.log(res);
		loginInfo.imgCodeUrl=res.bizData.imageBase64Data
		loginInfo.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: loginInfo.phone,
    smsType: 'auth',
	vercodeToken:loginInfo.vercodeToken,
	vercode:loginInfo.vercode
  })
    .then((res) => {
      const { bizData } = res
      uni.showToast({
        title: '发送成功',
        icon: 'success',
        mask: true,
      })
    })
    .catch((err) => {
      smsNumber.value = 60
      clearInterval(interval)
    })
}
// 验证码登录
const phoneCodeLogin = () => {
  if (!loginInfo.phone.length != 11 && !loginInfo.verificationCode) {
    uni.showToast({
      title: '请输入手机号和验证码',
      icon: 'none',
    })
  } else {
    $phoneCodeLogin({
      phone: Base64.encode(loginInfo.phone),
      code: Base64.encode(loginInfo.verificationCode),
      // #ifdef APP-PLUS
      lt: Base64.encode('APP'),
      // #endif
      // #ifdef H5 || MP-WEIXIN
      lt: Base64.encode('LITE'),
      // #endif
    }).then((res) => {
      const { bizData } = res
      emits('successLogin', bizData.iToken)
    })
  }
}
</script>

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