<script setup>
  import { ref } from 'vue'
  import { navigateTo } from '@/utils/router'

  const itemList = ref([
    {
      title: '支付宝',
      key: '101',
      icon: '/static/images/my-index/zfb.png'
    },
    { title: '微信', key: '102', icon: '/static/images/my-index/wx.png' }
  ])

  const onAddCard = key => {
    navigateTo('/pages/my-index/wallet/bank-card/card-details', { key })
  }
</script>

<template>
  <view class="bank-card">
    <view
      v-for="(item, index) in itemList"
      :key="index"
      class="public-card"
      @click="onAddCard(item.key)"
    >
      <view class="left-img">
        <image
          :src="
            item.icon
              ? item.icon
              : 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1227%2F842e0e65j00sp543n001fd000i700iim.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
          "
          mode="aspectFill"
          class="card"
        ></image>
        <text>{{ item.title }}</text>
      </view>
      <view class="right-box">
        <uni-icons type="right" size="16" color="#999999"></uni-icons>
      </view>
    </view>

    <!-- 底部按钮 -->
    <bottom-view>
      <cb-button @click="onAddCard('0')">+添加银行卡</cb-button>
    </bottom-view>
  </view>
</template>

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