<script setup lang="ts">
/**
 * 提现管理顶部账户区：拉取余额/银行卡，渲染紧凑账户卡并挂载申请/绑卡弹窗
 */
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import { message } from 'ant-design-vue';

import { getAdminAccountBalance, getMyCard } from '#/views/system/admin/api';

import AccountInfoCard from './account-info-card.vue';
import SaveMyCard from './card-modal.vue';
import FormModalDemo from './withdrawal-modal.vue';

defineOptions({
  name: 'Statistics',
});

const props = defineProps({
  gridApi: {
    required: true,
  },
});

const userStore = useUserStore();
const userType = computed(() =>
  Number((userStore.userInfo as Record<string, any> | null)?.roles?.user_type),
);
/** 门店账号无「未确认收货」冻结概念，不展示该卡片（提现冻结走「审核中金额」） */
const isStoreUser = computed(() => userType.value === 1);
/** 平台账号需展示累计代付手续费 */
const isPlatformUser = computed(() => userType.value === 2);

const balance = ref(0);
const pendingEarnings = ref(0);
const settledEarnings = ref(0);
const totalEarnings = ref(0);
const withdrawnAmount = ref(0);
const withdrawnFrozenAmount = ref(0);
const frozenAmount = ref(0);
const fee = ref(0);
const myCard = ref<Record<string, any> | null>(null);

/**
 * 拉取余额与银行卡，供账户卡展示
 * 平台 charge 映射为累计代付手续费
 */
function showCard() {
  showMyCard();
  getAdminAccountBalance().then((res) => {
    balance.value = res.balance;
    pendingEarnings.value = res.pending_earnings;
    settledEarnings.value = res.settled_earnings;
    totalEarnings.value = res.total;
    withdrawnAmount.value = res.withdrawn;
    withdrawnFrozenAmount.value = res.withdrawn_frozen;
    frozenAmount.value = res.frozen;
    fee.value = res.charge;
  });
}

function showMyCard() {
  getMyCard().then((res) => {
    res.user_name =
      res?.user_name || res?.store?.name || res?.supplier?.name || res?.platform?.name;
    myCard.value = res;
  });
}

showCard();

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});
const [saveMyCardModal, saveMyCardApi] = useVbenModal({
  connectedComponent: SaveMyCard,
});

function refresh() {
  message.success('刷新成功');
  showCard();
}

const showModal = (data = {}) => {
  formModalApi.setData({
    values: data,
    balance,
    gridApi: props.gridApi,
    showCard,
  });
  formModalApi.open();
};

const showCardModal = () => {
  saveMyCardApi.setData({
    values: myCard.value,
    balance,
    gridApi: props.gridApi,
    showCard,
  });
  saveMyCardApi.open();
};
</script>

<template>
  <div>
    <FormModal />
    <saveMyCardModal />
    <AccountInfoCard
      :my-card="myCard"
      :is-store-user="isStoreUser"
      :is-platform-user="isPlatformUser"
      :balance="balance"
      :pending-earnings="pendingEarnings"
      :total-earnings="totalEarnings"
      :withdrawn-amount="withdrawnAmount"
      :withdrawn-frozen-amount="withdrawnFrozenAmount"
      :frozen-amount="frozenAmount"
      :fee="fee"
      @apply="showModal"
      @edit-card="showCardModal"
      @refresh="refresh"
    />
  </div>
</template>
