<template>
  <view class="code-from-root">
    <jx-input>
      <template #left>
        <jx-icon icon="shoujihao" color="#aaa" :size="36"></jx-icon>
      </template>
      <template #middle>
        <uni-easyinput
          primaryColor="#aaa"
          class="input"
          :inputBorder="false"
          type="number"
          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="number"
          v-model="code"
          placeholder="请输入验证码"
        />
      </template>
      <template #right>
        <text class="send-code" @tap="sendCode">{{ codeText }}</text>
      </template>
    </jx-input>
  </view>

  <view class="code-login-btn" @tap="codeLogin">登录</view>
</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 { ref, Ref } from 'vue'
import login from '@/api/https/login'
import { jx_throttles } from '@/utils/tools'
import { store } from '@/store'

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) {
    // 提示用户未勾选
    let time: any = null
    store.commit('serveInfo/setIsAgreementIf', false)
    clearTimeout(time)
    uni.vibrateShort({})
    time = setTimeout(() => {
      store.commit('serveInfo/setIsAgreementIf', true)
    }, 200)
    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: 'mobile',
    authID: phone.value,
  }
  let res = await login.applets_login(data)
  if (res.code == 0) {
    emit('codeLogin', res.data)
  } else {
    console.log('ZSW-res', res)
    if (res.desc.indexOf('row') == -1) {
      uni.jxAlert({
        title: '提示',
        content: `登录失败：${res.desc || res.data}`,
      })
    } else {
      uni.jxAlert({
        title: '提示',
        content: `登录失败：对不起该账号未绑定门店，请联系官方客服进行绑定！`,
      })
    }
  }
}

/**
 * 发送验证码
 */
const codeText = ref<string>('发送验证码')
function sendCode() {
  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 = {
      authToken: '85e60d6a-f1f8-4837-9c7d-d7072b0ba1c6',
      authID: 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)
    }
  },
})
</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%;
    line-height: 80rpx !important;
  }

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

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