<template>
  <!-- 银行卡信息 -->
  <view class="page-bind-bank-card">
    <!-- 添加银行卡 -->
    <view
      v-if="!isSubmitSuccess"
      class="bank-card-info"
    >
      <view>
        <view class="card-content top-card">
          <view class="card-item">
            <view class="tit">
              银行卡号
            </view>
            <view class="con">
              <input
                v-model="dataForm.cardNo"
                type="text"
                placeholder="请输入您的银行卡号"
                maxlength="19"
                class="con-input"
              >
            </view>
          </view>
          <view class="card-item">
            <view class="tit">
              手机号码
            </view>
            <view class="con verification-code-box">
              <view class="con-txt">
                <input
                  v-model="dataForm.phone"
                  type="number"
                  maxlength="11"
                  placeholder="请输入银行预留号码"
                  class="con-input"
                >
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 按钮 -->
      <view class="foot-btn">
        <!-- 添加/变更银行卡数据 -->
        <view
          class="active-btn"
          @tap="onDataFormSubmit"
        >
          提交绑定
        </view>
      </view>
    </view>

    <!-- 成功 -->
    <view
      v-if="isSubmitSuccess"
      class="success-page"
    >
      <view class="icon">
        <image
          src="../../static/images/bank-card.png"
          class="img"
        />
      </view>
      <view class="tips">
        恭喜，绑定成功！
      </view>
      <view
        class="btn"
        @tap="onBack"
      >
        返回
      </view>
    </view>
  </view>
</template>

<script setup>

const dataForm = reactive({
  cardNo: '', // 银行卡号
  phone: '', // 银行预留手机号
  cardCheck: 8 // 绑卡方式
})

// 是否提交成功
const isSubmitSuccess = ref(false)

/**
   * 生命周期函数--监听页面加载
   */
onLoad(() => {
  isSubmitSuccess.value = false
})

/**
 * 添加/变更银行卡
 */
const onDataFormSubmit = () => {
  if (!dataForm.cardNo || !dataForm.cardNo.trim()) {
    dataForm.cardNo = ''
    uni.showToast({
      title: '请输入银行卡号',
      duration: 1500,
      icon: 'none'
    })
    return
  }
  if (!dataForm.phone) {
    uni.showToast({
      title: '请输入银行预留手机号',
      duration: 1500,
      icon: 'none'
    })
    return
  }
  if (!util.checkPhoneNumber(dataForm.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      duration: 1500,
      icon: 'none'
    })
    return
  }
  uni.showLoading()
  const params = {
    url: '/mall4cloud_payment/allinpay/member/apply_bind_bank_card',
    method: 'POST',
    data: dataForm,
    dontTrunLogin: true
  }
  http.request(params).then(() => {
    uni.hideLoading()
    isSubmitSuccess.value = true
  }).catch(errMsg => {
    uni.hideLoading()
    if (errMsg.msg.indexOf('该银行卡已绑定') > -1) {
      uni.showModal({
        title: '提示',
        content: '该银行卡已绑定',
        showCancel: false,
        success: modalRes => {
          if (modalRes.confirm) {
            isSubmitSuccess.value = false
          }
        }
      })
      return
    }
    uni.showModal({
      title: '提示',
      content: errMsg.msg,
      showCancel: false,
      success: modalRes => {
        if (modalRes.confirm) {
          isSubmitSuccess.value = false
        }
      }
    })
  })
}

const onBack = () => {
  uni.navigateBack()
}

</script>

<style lang="scss" scoped>
@use "./bind-bank-card.scss";
</style>
