<template>
  <view class="page-bind-mobile">
    <view class="bind-mobile">
      <view class="top-bg">
        <view class="bgc">
          <view class="tit1">
            绑定手机
          </view>
          <view class="tit2">
            保障您的账户余额安全
          </view>
          <image
            class="img"
            src="../../static/images/phone-slices.png"
          />
        </view>
      </view>
      <view class="content">
        <view class="info-item">
          <view class="tit">
            手机号
          </view>
          <view class="con flex">
            <view class="info">
              <input
                v-model="dataForm.mobile"
                maxlength="11"
                type="text"
                placeholder="请输入您的手机号"
              >
            </view>
            <view
              v-if="show"
              class="btn-text"
              @tap="onSendCode"
            >
              发送验证码
            </view>
            <view
              v-if="!show"
              class="btn-text"
            >
              {{ count }}s
            </view>
          </view>
        </view>
        <view class="info-item">
          <view class="tit">
            验证码
          </view>
          <view class="con">
            <input
              v-model="dataForm.validCode"
              type="text"
              placeholder="短信验证码"
            >
          </view>
        </view>
      </view>
      <view class="footer">
        <view
          class="confirm-btn"
          @tap="onBindMobile"
        >
          确认绑定
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

const dataForm = reactive({
  mobile: '', // 手机号
  validCode: '' // 验证码
})
const count = ref('')
let timer = null
const show = ref(true)
let isRealnameVerification = 0 // 是否实名认证页面进入 0：否  1：是
onLoad((options) => {
  if (options && options.isRealnameVerification) {
    // 是否实名认证页面进入 0：否  1：是
    isRealnameVerification = Number(options.isRealnameVerification)
  }
})

const onSendCode = () => {
  if (!dataForm.mobile) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!util.checkPhoneNumber(dataForm.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
      mask: true
    })
    return
  }
  uni.showLoading()
  const params = {
    url: '/mall4cloud_payment/allinpay/member/send_verification_code',
    method: 'POST',
    data: {
      phone: dataForm.mobile,
      verificationCodeType: 9
    }
  }
  http.request(params).then(() => {
    uni.hideLoading()
    uni.showToast({
      title: '验证码发送成功',
      icon: 'none'
    })
    const timeCount = 60
    if (!timer) {
      count.value = timeCount
      show.value = false
      timer = setInterval(() => {
        if (count.value > 0 && count.value <= timeCount) {
          count.value--
        } else {
          clearInterval(timer)
          timer = null
          show.value = true
        }
      }, 1000)
    }
  }
  )
}
const onBindMobile = () => {
  if (!dataForm.mobile) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!util.checkPhoneNumber(dataForm.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
      mask: true
    })
    return
  }
  if (!dataForm.validCode || !dataForm.validCode.trim()) {
    uni.showToast({
      title: '请输入短信验证码',
      duration: 1500,
      icon: 'none'
    })
    return
  }
  const params = {
    url: '/mall4cloud_payment/allinpay/member/bind_phone',
    method: 'POST',
    data: {
      phone: dataForm.mobile,
      verificationCodeType: 9,
      verificationCode: dataForm.validCode
    }
  }
  http.request(params).then(() => {
    uni.showToast({
      title: '绑定成功',
      icon: 'none',
      success: () => {
        setTimeout(() => {
          if (isRealnameVerification === 1) {
            // 实名认证页面进入则需要返回实名认证页面的上一个页面
            uni.navigateBack({
              delta: 2
            })
            return
          }
          uni.navigateBack()
        }, 1500)
      }
    })
  }
  )
}

</script>

<style lang="scss" scoped>
@use './bind-mobile.scss';
</style>
