<script lang="ts" setup>
import {getCurrentInstance, onMounted} from 'vue';
import {appUserBankDeletePost, appUserBankListPost} from "@/service";
import {useConfigStore} from "@/store";

const configStore = useConfigStore()
const {t} = useI18n()

const paging = ref()
const dataList = ref([])

function queryList(pageNum: number, pageSize: number) {
  appUserBankListPost({
    params: {
      pageSize,
      pageNum,
    }
  }).then((res: any) => {
    paging.value?.complete(res.rows)
  }).catch(() => {
    paging.value?.complete(false)
  })
}

function handleDelete(item) {
  appUserBankDeletePost({
    body: {
      id: item.id,
    }
  }).then(res => {
    uni.showToast({
      title: t('toast.deleteSuccess'),
      icon: 'none',
    })
    setTimeout(() => {
      paging.value?.refresh()
    }, 1000)
  })
}

onShow(() => {
  paging.value?.refresh()
})

const selectedCard = ref({
  id: '',
})

function selectedCardFn(item) {
  selectedCard.value = item
}

function confirmSure() {
  if (!selectedCard.value.id) {
    uni.showToast({
      title: t('pages-user.income.toast.pleaseSelectACard'),
      icon: 'none',
    })
    return
  }
  console.log(selectedCard.value)
  eventChannel.value.emit('refreshBankList', selectedCard.value);
  setTimeout(() => {
    uni.navigateBack({
      delta: 1,
    })
  }, 500)
}

function navigateTo(url: string) {
  uni.navigateTo({url})
}

const eventChannel = ref(null)
onMounted(() => {
  const instance = getCurrentInstance().proxy
  eventChannel.value = instance.getOpenerEventChannel();
})

</script>
<template>
  <z-paging ref="paging" v-model="dataList" :paging-style="{ bottom: '0' }" bg-color="#F5F5F5" @query="queryList">
    <template #top>
      <navbar :title="t('pages-user.income.withdraw.cardListTitle')"/>
    </template>
    <wd-swipe-action v-for="(item, index) in dataList" :key="index">
      <view class="bg-white px-30rpx pb-35rpx pt-40rpx flex-center-sb" @click="selectedCardFn(item)">
        <view>
          <view class="text-30rpx text-#333 font-bold leading-30rpx mb-18rpx">{{ item.bankName }}</view>
          <view class="text-24rpx text-#999 leading-24rpx">{{ item.card }}</view>
        </view>
        <view>
          <image v-if="item.id === selectedCard.id" class="shrink-0 w-40rpx h-40rpx" src="@img/chef/152.png"/>
          <image v-else class="shrink-0 w-40rpx h-40rpx" src="@img/chef/134.png"/>
        </view>
      </view>
      <template #right>
        <view class="px-32rpx h-full center !bg-gradient-to-r from-#F54100 to-#F70000 text-28rpx text-#fff"
              @click="handleDelete(item)">
          {{ t('common.delete') }}
        </view>
      </template>
    </wd-swipe-action>

    <template #bottom>
      <view class="px-20rpx flex items-center py-10rpx shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)]">
        <wd-button block
                   custom-class="!w-50% !h-98rpx !rounded-16rpx !mr-20rpx !text-28rpx !text-#000 !bg-transparent !border-solid !border-1rpx !border-#000"
                   @click="navigateTo('/pages-user/pages/income/add-bank')">
          {{ t('pages-user.recipe.index.add') }}
        </wd-button>
        <wd-button block custom-class="!w-50% !h-98rpx !text-28rpx !rounded-16rpx" @click="confirmSure">
          {{ t('common.confirm') }}
        </wd-button>
      </view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </template>
  </z-paging>
</template>
<style lang="scss" scoped>

</style>
