<script setup>
  import { ref } from 'vue'
  import { navigateTo } from '@/utils/router'
  import { onShow } from '@dcloudio/uni-app'
  import { getUserBankList, deleteUserPayPwd } from '@/api/my-index'
  import { useUI } from '@/utils/use-ui'

  /** 是否第三方进入 */
  const IS_THIRD_PAY = ['0', '101', '102']
  const itemList = ref([])
  const { showToast, showDialog } = useUI()

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

  const getList = async type => {
    itemList.value = []
    const res = await getUserBankList()

    itemList.value = [
      {
        bankName: '支付宝',
        key: '101',
        icon: '/static/images/my-index/zfb.png'
      },
      {
        bankName: '微信',
        key: '102',
        icon: '/static/images/my-index/wx.png'
      },
      ...res.data
    ]
    if (type === 1) {
      showToast('删除成功', 'success')
    }
  }

  const onDelete = async id => {
    const res = await showDialog('提示', '确定要删除吗？')
    if (!res) return
    await deleteUserPayPwd(id)
    await getList(1)
  }

  onShow(() => {
    getList()
  })
</script>

<template>
  <view class="bank-card">
    <uni-swipe-action>
      <uni-swipe-action-item
        v-for="(item, index) in itemList"
        :key="index"
        :disabled="!!item.key"
        class="card-box"
      >
        <view
          class="public-card"
          @click="onAddCard(item.key || item.cardId)"
        >
          <view class="left-img">
            <image
              v-if="item.icon"
              :src="item.icon"
              mode="aspectFill"
              class="card"
            ></image>
            <text>{{ item.bankName }}</text>
          </view>
          <view class="right-box">
            <text v-if="item.cardNumber">{{ item.cardNumber }}</text>
            <uni-icons type="right" size="16" color="#999999"></uni-icons>
          </view>
        </view>
        <template v-slot:right>
          <view
            class="public-uni-swipe-action-right"
            @click="onDelete(item.cardId)"
          >
            <uni-icons type="trash" size="18" color="#ffffff"></uni-icons>
            <text class="iocn-name">删除</text>
          </view>
        </template>
      </uni-swipe-action-item>
    </uni-swipe-action>

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

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

  .card-box + .card-box {
    margin-top: 16rpx;
  }
</style>
