<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
    <template #top>
      <navbar />
      <view class="pl-38rpx text-54rpx text-#000 font-bold">{{ t('pages-user.card.listCard') }}</view>
    </template>
    <view class="px-38rpx pt-30rpx">
      <view class="animate-in fade-in animate-ease-in animate-duration-300" v-show="!loading">
        <wd-radio-group v-model="selectedCard" shape="dot" @change="cardChange" checked-color="#000">
          <template v-for="(item, index) in dataList">
            <wd-swipe-action>
              <view class="h-96rpx mb-28rpx px-32rpx py-28rpx rounded-48rpx border-#DBDBDB border-solid border-1px">
                <wd-radio :value="index">{{ item.cardNumber }}</wd-radio>
              </view>
              <template #right>
                <view class="center h-full pl-20rpx">
                  <wd-icon @click="handleDelete(item)" name="delete1" color="#333" size="32rpx"></wd-icon>
                </view>
              </template>
            </wd-swipe-action>
          </template>
        </wd-radio-group>
      </view>
      <view class="animate-in fade-in animate-ease-out animate-duration-300" v-if="loading">
        <view class="" :class="[i > 1 && 'mt-10rpx']" v-for="i in 10" :key="i">
          <view class="flex items-center flex items-center py-38rpx px-30rpx bg-#fff">
            <view class="flex-1">
              <wd-skeleton
                  animation="gradient"
                  :row-col="[{ width: '114rpx' }, { width: '284rpx' }]"
              />
            </view>
            <view class="shrink-0 ml-20rpx flex">
              <wd-skeleton animation="gradient" :row-col="[{ size: '52rpx', type: 'circle' }]" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="px-30rpx bg-white py-18rpx">
        <view class="flex items-center gap-22rpx">
          <wd-button custom-class="w-full !h-92rpx !text-#14181B !rounded-16rpx !font-500 !text-30rpx !bg-white !border-#14181B !border-solid !border-1px" block
                     @click="handleAdd">
            {{ t('pages-user.card.add') }}
          </wd-button>
          <wd-button custom-class="w-full !h-92rpx !text-#fff !rounded-16rpx !text-32rpx" block
                     @click="handleSubmit">
            {{ t('common.confirm') }}
          </wd-button>
        </view>

        <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
      </view>
    </template>
  </z-paging>
</template>
<script lang="ts" setup>
import {useConfigStore} from "@/store";
import {debounce} from "throttle-debounce";
import Config from "@/config";
const { t } = useI18n();
import {appUserCardListPost} from "@/service";

function deleteCreditCardApi() {}

const {proxy} = getCurrentInstance() as any
const configStore = useConfigStore()

const eventChannel = proxy.getOpenerEventChannel();


const creditCard = ref(null)
const selectedCard = ref(null)
const {paging, dataList, queryList, loading} = usePage<any>((pageNum: number, pageSize: number) =>
    appUserCardListPost({
      params: {
        pageNum,
        pageSize,
      }
    }),
)

function cardChange(value) {
  console.log(value)
  console.log('value', dataList.value[value.value])
  creditCard.value = dataList.value[value.value]
}
function submit() {
  console.log('submit', selectedCard.value)
  console.log('submit', creditCard.value)
  if (!creditCard.value) {
    uni.showToast({
      icon: 'none',
      title: 'Please choose a credit card',
    })
    return
  }
  eventChannel.emit('selectedCard', creditCard.value);
  uni.navigateBack()
}


// 提交
const handleSubmit = debounce(Config.debounceLongTime, submit, {
  atBegin: true
})

function handleAdd() {
  uni.navigateTo({
    url: '/pages-user/pages/add-card/index'
  })
}
function handleDelete(item) {
  // 删除信用卡
  // deleteCreditCardApi({
  //   id: item.id,
  //   cardNumber: item.cardNumber,
  //   cardId: item.cardId,
  // }).then(() => {
  //   uni.showToast({
  //     title: 'Delete successfully',
  //     icon: 'none',
  //   })
  //   setTimeout(() => {
  //     paging.value?.refresh()
  //   }, 1000)
  // }).catch(() => {
  //   uni.showToast({
  //     title: 'Delete failed',
  //     icon: 'none',
  //   })
  // })
}

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


onShow(() => {
  nextTick(() => {
    paging.value?.refresh()
  })
})
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
:deep(.wd-radio) {
  margin-top: 0 !important;
}
</style>
