<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '编辑收款方式',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view class="withdrawal-type-edit-page pb-100 min-h-screen">
    <view class="p-15 m-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
      <view class="flex items-center py-15 text-14">
        <view>开户行</view>
        <input
          class="flex-1 text-right text-14"
          placeholder-class=" text-#889BC6 text-right"
          type="text"
          placeholder="请输入开户行"
          v-model="form.kaihuhang"
        />
      </view>
      <view class="flex items-center py-15 text-14">
        <view>银行卡账号</view>
        <input
          class="flex-1 text-right text-14"
          placeholder-class=" text-#889BC6 text-right"
          type="text"
          placeholder="请输入银行卡账号"
          v-model="form.banknum"
        />
      </view>

      <!-- <view class="flex items-center py-15 text-14">
        <view>备注</view>
        <input
          class="flex-1 text-right text-14"
          placeholder-class=" text-#889BC6 text-right"
          type="text"
          placeholder="请输入备注"
          v-model="form.remark"
        />
      </view> -->
    </view>
    <view class="fixed bottom-0 left-0 right-0 pb-safe">
      <button class="btn-gradient text-white rounded-full m-15 text-16" @click="onAddType">
        提交
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { addBankCardAPI } from '@/service'
import { mergeStep, showModal } from '@/utils'
import { ref } from 'vue'

const form = ref({
  typedata: 1,
  kaihuhang: '',
  name: '',
  banknum: '',
})

const onAddType = mergeStep(async () => {
  if (form.value.typedata === 3) {
    if (!form.value.kaihuhang) {
      return uni.showToast({
        title: '请输入开户行',
        icon: 'none',
      })
    }
  }
  if (!form.value.banknum) {
    return uni.showToast({
      title: '请输入银行卡账号',
      icon: 'none',
    })
  }

  await addBankCardAPI(form.value)
  await showModal('添加成功')
  uni.navigateBack()
})
</script>
<style lang="scss" scoped>
.withdrawal-type-edit-page {
  --wot-input-placeholder-color: #889bc6;
  --wot-cell-wrapper-padding: 0;
}
</style>
