<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { reactive } from 'vue'
  import CardInput from '../../components/card-input.vue'

  const stateData = reactive({
    title: '',
    state: '0'
  })

  const formData = reactive({
    // 银行卡名称
    name: '',
    // 开户行名称
    khName: '',
    // 银行卡号
    cardNum: '',
    // 微信/支付宝号
    codeName: '',
    // 图片链接
    img: ''
  })
  onLoad(e => {
    const titltData = {
      0: '添加银行卡',
      101: '添加支付宝账户',
      102: '添加微信账户'
    }[e.key]
    stateData.title = titltData
    stateData.state = e.key
  })
</script>

<template>
  <view>
    <nav-bar isTopBg isPlaceholder :title="stateData.title"></nav-bar>

    <view
      v-if="!['101', '102'].includes(stateData.state)"
      class="card-details"
    >
      <CardInput v-model="formData.name" title="银行名称"></CardInput>
      <CardInput v-model="formData.khName" title="开户行"></CardInput>
      <CardInput v-model="formData.cardNum" title="银行卡号"></CardInput>
    </view>

    <view v-else class="card-details">
      <CardInput
        v-model="formData.codeName"
        :title="`${
          stateData.state === '101' ? '支付宝账号' : '微信账号'
        }`"
      ></CardInput>
      <CardInput :is-input="false" title="收款码">
        <cb-file-picker v-model="formData.img"></cb-file-picker>
      </CardInput>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../../styles/index.scss';
  .card-details {
    padding: 32rpx 24rpx;
  }
</style>
