<template>
  <view class="code-from-root">
    <jx-input>
      <template #left>
        <jx-icon icon="shoujihao" color="#aaa8" :size="36"></jx-icon>
      </template>
      <template #middle>
        <uni-easyinput
          primaryColor="#aaa"
          class="input"
          :inputBorder="false"
          type="text"
          v-model="phone"
          placeholder="请输入手机号"
        />
      </template>
    </jx-input>
  </view>

  <view class="code-from-root">
    <jx-input>
      <template #left>
        <jx-icon icon="yanzhengma2" color="#aaa"></jx-icon>
      </template>
      <template #middle>
        <uni-easyinput
          primaryColor="#aaa"
          class="input"
          :inputBorder="false"
          maxlength="6"
          type="text"
          v-model="code"
          placeholder="请输入验证码"
        />
      </template>
      <template #right>
        <text class="send-code" @tap="sendCode">{{ codeText }}</text>
      </template>
    </jx-input>
  </view>

  <button class="code-login-btn" @tap="codeLogin">登录</button>
</template>

<script lang="ts" setup>
import jxIcon from '@/components/jx-icon/jx-icon.vue'
import jxInput from '@/components/jx-input/jx-input.vue'
import toast from '@/utils/toast'
import { onBeforeUnmount, ref, Ref } from 'vue'
import { jx_throttles } from '@/utils/tools'
import { store } from '@/store'
import login from '@/api/https/login'
import useGlobalFunc from '@/composables/useGlobalFunc'
const { isUserAgreementFn } = useGlobalFunc()

const phone: Ref<string> = ref('')
const code: Ref<string> = ref('')

const emit = defineEmits<{
  (e: 'codeLogin', data: AnyObject): void
}>()

async function codeLogin() {
  if (!store.state.serveInfo.isAgreement) {
    isUserAgreementFn()
    return false
  }
  let phoneRuler = /^(?:(?:\+|00)86)?1\d{10}$/
  if (!phoneRuler.test(phone.value) && phone.value != '91112345678')
    return toast('手机号不规范')
  if (code.value.length < 6) return toast('验证码不规范')
  let data = {
    authSecret: code.value,
    authType: 'yzm',
    authID: phone.value,
    auth_id_type:'phone_number'
  }
  await store.dispatch('serveInfo/wxLogin',{authType:'yzm',isJudg:false,obj:data})
  // let res = await login.applets_login(data)
  // if (res.code == 0) {
  //   emit('codeLogin', res.data)
  // } else {
  //   toast(res.desc)
  // }
}

/**
 * 发送验证码
 */
const codeText = ref<string>('发送验证码')
function sendCode() {
  if (!store.state.serveInfo.isAgreement) {
    store.commit('serveInfo/setIsAgreementIf', true)
    return false
  }
  let phoneRuler = /^(?:(?:\+|00)86)?1\d{10}$/
  if (!phoneRuler.test(phone.value) && phone.value != '91112345678')
    return toast('手机号不规范')
  sendCodeThroottle()
}

/**
 * 节流
 */
let sendCodeTimer: any = null
const sendCodeThroottle = jx_throttles({
  time: 60000,
  success: async () => {
    const data = {
      authType: 'yzm',
      phone: phone.value,
    }
    let phoneCode = await login.send_verify_code(data)
    if (phoneCode.code == 0) {
      toast('验证码发送成功')
      let num = 60
      sendCodeTimer = setInterval(() => {
        codeText.value = `${num--}秒后重发`
        if (num <= 0) {
          codeText.value = '重新发送'
          num = 60
          clearInterval(sendCodeTimer)
        }
      }, 1000)
    } else {
      toast('发送失败', 2)
    }
  },
})

onBeforeUnmount(() => {
  clearInterval(sendCodeTimer)
})
</script>

<style lang="scss" scoped>
.code-from-root {
  border-bottom: 2rpx solid rgb(234, 234, 234);
  line-height: 70rpx;
  margin-bottom: 30rpx;

  input {
    width: 100%;
  }

  .send-code {
    white-space: nowrap;
    color: #aaa;
    font-size: 28rpx;
  }
}

.code-login-btn {
  border-radius: 100rpx;
  margin-top: 60rpx;
  color: rgb(255, 255, 255);
  background-color: $jx-login;
}
</style>