<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-bank-select container">
    <view class="title">
      {{ $t('xuanZeDaoZhangYinHangZhangHu') }}
    </view>
    <view class="bank-list">
      <view
        v-for="(item,index) in bankList"
        :key="item.cardNo"
        :style="index===bankList.length-1 ? 'margin-bottom:0' : ''"
        class="bank-item"
      >
        <text class="bank-name">
          {{ item.bankName }}（{{ item.cardNoSlice }}）
        </text>
        <text
          v-if="item.isDefault"
          class="sign-default"
        >
          {{ $t('moRenZhangHu') }}
        </text>
        <text
          v-else
          class="default-set"
          @tap="setDefaultBank(item)"
        >
          {{ $t('sheWeiMoRen') }}
        </text>
        <view
          v-if="index===checkIndex"
          class="icon-chosen"
        >
          <view class="icon">
            <image src="@/static/images/check.png" />
          </view>
        </view>
        <text
          v-else
          class="icon-unchosen"
          @tap="selectBank(index)"
        />
      </view>
    </view>
    <view
      v-if="bankList.length<5"
      class="button-add"
      @tap="navigate(0)"
    >
      <text>{{ $t('tianJiaYinHangKa') }}</text>
    </view>
    <view
      class="button-manage"
      @tap="navigate(1)"
    >
      {{ $t('guanLiYinHangKa') }}
    </view>
  </view>
</template>
<script setup>
const paySettlementType = uni.getStorageSync('bbcPaySettlementType')
const bankList = ref([])
const checkIndex = ref(null)
onLoad((option) => {
  checkIndex.value = +option.currentIndex
})
onShow(() => {
  getBankData()
  uni.setNavigationBarTitle({
    title: $t('xuanZeYinHangKa')
  })
})

/**
 * 获取银行卡信息
 */
const getBankData = () => {
  uni.showLoading({
    title: $t('jiaZaiZhong')
  })
  const params = {
    url: '/shop/shopBankCard/getShopBankCardList',
    method: 'GET'
  }
  http.request(params).then(({ data }) => {
    data.forEach(item => {
      item.cardNoSlice = item.cardNo.slice(0, 4)
    })
    bankList.value = data
    uni.hideLoading()
  })
}
/**
 * 设置默认银行卡
 */
const setDefaultBank = (item) => {
  const params = {
    url: '/shop/shopBankCard/setDefault',
    method: 'PUT',
    data: item
  }
  http.request(params).then(() => {
    getBankData()
  })
}
/**
 * 选择银行事件
 */
const selectBank = (index) => {
  checkIndex.value = index
  uni.$emit('page-withdraw-setCurrentIndex', index)
  util.pageBack()
}
/**
 * 跳转
 */
const navigate = (type) => {
  if (paySettlementType === 1) {
    uni.navigateTo({
      url: '/package-settings/pages/allinpay-store-account/allinpay-store-account'
    })
    return
  }
  switch (type) {
    case 0: {
      uni.navigateTo({ url: '/package-settings/pages/store-settings-account/store-settings-account' })
      break
    }
    case 1: {
      uni.navigateTo({ url: '/package-settings/pages/store-settings-financial/store-settings-financial' })
      break
    }
  }
}

</script>

<style lang="scss" scoped>
@use './bank-select.scss';
</style>
