<template>
  <u-navbar title="银行卡管理" :autoBack="true" bgColor="#ffffff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }">
    <template #right>
      <image src="/static/images/add.png" class="navadd" mode="scaleToFill" @click="proxy.$h.jumpUrl(`/pages2/money/add`)" />
    </template>
  </u-navbar>
  <view class="bankcard">
    <view class="bankcard-item" v-for="(_, index) in pageList" :key="_.id" @click="ClickBankCardItemHandler(_)">
      <view class="flexA" style="margin-bottom: 110rpx">
        <image :src="proxy.$h.downFile(_.icon) || '/static/images/add.png'" class="bankcard-image" mode="scaleToFill" />
        <view>
          <view class="bankcard-name">{{ _.bank }}</view>
          <view class="bankcard-num">{{ _.bankNumber }}</view>
        </view>
      </view>

      <view class="flexJ">
        <view class="flexA">
          <image src="/static/images/auditsuccess.png" class="bankcard-check" mode="scaleToFill" v-if="_.isDefault == 1" />
          <view class="check" v-else></view>
          <view class="bankcard-text">设为默认</view>
        </view>
        <view class="jiebang flexC" @click.stop=";(showDelBankCardState = true), (BankCardId = _.id)">解绑</view>
      </view>
    </view>
    <u-empty marginTop="60" v-if="!pageList?.length"></u-empty>
  </view>
  <u-modal :show="showDelBankCardState" @confirm="DelBankCardHandler" title="您确定要解绑该银行卡吗？" showCancelButton @cancel="showDelBankCardState = false"></u-modal>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { getBank_list, delete_bank } from '../../api'
import { BankCardItemType } from '../../types'
import { useSelectDataStore } from '../../store/selectData'

type EventType = { type: 'select' | 'edit' }

const Event = ref<EventType>()

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const { SelectBankCardData } = storeToRefs(useSelectDataStore())

const pageList = ref<BankCardItemType[]>()

const showDelBankCardState = ref<boolean>(false)

const BankCardId = ref<string | number>('')

const getBankCardListHandler = async () => {
  const { result }: { result: { records: BankCardItemType[] } } = await getBank_list()

  pageList.value = result.records
}

const DelBankCardHandler = async (id: number | string) => {
  await delete_bank({ id: BankCardId.value })

  showDelBankCardState.value = false

  uni.$u.toast('解绑成功')

  getBankCardListHandler()
}

const ClickBankCardItemHandler = (_: BankCardItemType) => {
  if (Event.value?.type === 'edit') return proxy.$h.jumpUrl(`/pages2/money/add?BankCardInfo=${JSON.stringify(_)}&type=edit`)

  // 选择银行卡后返回回显信息

  SelectBankCardData.value = _

  proxy.$h.backUrl()
}

onShow(() => getBankCardListHandler())
onLoad((e: EventType) => (Event.value = e))
</script>

<style lang="scss" scoped>
page {
  background: #f7f8fa;
}
.navadd {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
}
.bankcard {
  box-sizing: border-box;
  padding: 20rpx 24rpx;
  &-image {
    width: 92rpx;
    height: 92rpx;
    border-radius: 24rpx;
    margin-right: 16rpx;
  }
  &-item {
    box-sizing: border-box;
    padding: 42rpx 24rpx;
    border-radius: 24rpx;
    background: #fff;
    margin-bottom: 22rpx;
  }
  &-name {
    color: #323233;
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 10rpx;
  }
  &-num {
    color: #999999;
    font-size: 26rpx;
  }
  .check {
    width: 32rpx;
    height: 32rpx;
    border: 1rpx solid #666666;
    border-radius: 50%;
  }
  .jiebang {
    width: 102rpx;
    height: 48rpx;
    border-radius: 12rpx;
    background: #f9f9f9;
    color: #666666;
    font-size: 28rpx;
    font-weight: 700;
  }
  &-check {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
  }
  &-text {
    color: #323233;
    font-size: 28rpx;
    font-weight: 700;
    margin-left: 10rpx;
  }
}
</style>