<template>
  <view class="bind-card">
    <uv-form labelPosition="left" :model="cardInfo" ref="form">
      <uv-form-item
        label="手机号"
        prop="userInfo.name"
        borderBottom
        labelWidth="90"
        :customStyle="customStyle"
      >
        <uv-input
          maxlength="11"
          type="number"
          v-model="cardInfo.bankPhone"
          border="none"
          clearable
        />
      </uv-form-item>
      <uv-form-item
        label="银行卡号"
        prop="userInfo.name"
        borderBottom
        labelWidth="90"
        :customStyle="customStyle"
      >
        <uv-input type="number" v-model="cardInfo.bankCardNumber" border="none" clearable />
      </uv-form-item>
    </uv-form>
    <view class="tips">提示：需绑定本人Ⅰ类银行账户的借记卡，否则无法发放佣金。</view>
    <button class="btn" @click="submitFn">确定</button>
  </view>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/store/login'
import { reactive } from 'vue'
import { isValidPhoneNumber, isValidBankCard } from '@/utils'
import { saveBankInfoApi } from '@/service/modules/auth'

const loginStore = useLoginStore()

const customStyle = {
  height: '120rpx'
}

const cardInfo = reactive({
  bankPhone: loginStore.currentUserInfo.bankPhone,
  bankCardNumber: loginStore.currentUserInfo.bankCardNumber
})

const submitFn = async () => {
  if (!isValidPhoneNumber(cardInfo.bankPhone)) {
    return uni.showToast({
      icon: 'none',
      title: '请检查手机号'
    })
  }
  if (!isValidBankCard(cardInfo.bankCardNumber)) {
    return uni.showToast({
      icon: 'none',
      title: '请检查银行卡号'
    })
  }
  const data = {
    userId: loginStore.currentUserInfo.userId,
    bankPhone: cardInfo.bankPhone,
    bankCardNumber: cardInfo.bankCardNumber
  }
  const res = await saveBankInfoApi(data)
  if (res.code === 0) {
    uni.showToast({
      icon: 'none',
      title: '保存成功'
    })
  }
  await loginStore.getUserInfoByCode()
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.bind-card {
  padding: 30rpx;
  .tips {
    margin-top: 40rpx;
    color: #888;
    font-size: 24rpx;
    text-align: center;
  }
  .btn {
    margin-top: 150rpx;
    background-color: #6eb657;
    border-radius: 50rpx;
    color: #fff;
  }
}
</style>
