<script setup lang="ts">
import { ref } from 'vue';

import { type AnalysisOverviewItem, useVbenModal } from '@vben/common-ui';
import { AnalysisOverview } from '@vben/common-ui';
import { SvgCakeIcon } from '@vben/icons';

import { Button, Card, message } from 'ant-design-vue';

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

import SaveMyCard from '../components/card-modal.vue';
import FormModalDemo from '../components/withdrawal-modal.vue';

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

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

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 arrivedAmount = ref(0);
const fee = ref(0);
const isShow = ref(false);
const myCard = ref();

const overviewItems = ref<AnalysisOverviewItem[]>([]);

/**
 * 获取余额卡片列表数据
 */
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; // 已提现金额
    // arrivedAmount.value = res.data.arrived_amount.toNumber();
    fee.value = res.charge;
    overviewItems.value = [
      {
        icon: SvgCakeIcon,
        title: '累计收益',
        totalTitle: '累计收益',
        totalValue: totalEarnings.value,
        value: totalEarnings.value,
      },
      {
        icon: 'fluent-emoji:balance-scale',
        title: '账户余额',
        totalTitle: '账户余额',
        totalValue: balance.value,
        value: balance.value,
      },
      {
        icon: 'game-icons:frozen-orb',
        title: '冻结金额（用户未确认收货）',
        totalTitle: '冻结金额（用户未确认收货）',
        totalValue: frozenAmount.value,
        value: frozenAmount.value,
      },
      {
        icon: 'fxemoji:hourglassflowingsand',
        title: '待结算收益',
        totalTitle: '待结算收益',
        totalValue: pendingEarnings.value,
        value: pendingEarnings.value,
      },
      {
        icon: 'fluent-emoji:alarm-clock',
        title: '审核中金额',
        totalTitle: '审核中金额',
        totalValue: withdrawnFrozenAmount.value,
        value: withdrawnFrozenAmount.value,
      },
      {
        icon: 'flat-color-icons:ok',
        title: '已提现金额',
        totalTitle: '已提现金额',
        totalValue: withdrawnAmount.value,
        value: withdrawnAmount.value,
      },
      // {
      //   icon: SvgCardIcon,
      //   title: '已提现金额',
      //   totalTitle: '已提现金额',
      //   totalValue: withdrawnAmount.value,
      //   value: withdrawnAmount.value,
      // },
      // {
      //   icon: 'flat-color-icons:ok',
      //   title: '到账金额',
      //   totalTitle: '到账金额',
      //   totalValue: arrivedAmount.value,
      //   value: arrivedAmount.value,
      // },
      // {
      //   icon: 'icon-park:flash-payment',
      //   title: '手续费',
      //   totalTitle: '手续费',
      //   totalValue: fee.value,
      //   value: fee.value,
      // },
    ];
  });
}
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();
}

function updateShowStatus() {
  isShow.value = !isShow.value;
}

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>
  <Card
    :title="`${myCard?.user_name || myCard?.store?.name || myCard?.supplier?.name}--账户信息`"
    class="p-5"
  >
<!--    <template #extra>-->
<!--      <Button type="link" @click="updateShowStatus">{{ isShow === false ? '展开' : '收起' }}</Button>-->
<!--    </template>-->
    <FormModal />
    <saveMyCardModal />
    <Button class="ml-5" type="primary" @click="showModal"> 申请提现 </Button>
    <Button class="ml-3" type="primary" @click="showCardModal">
      编辑账户
    </Button>
    <Button type="link" @click="refresh">刷新</Button>
    <AnalysisOverview :items="overviewItems" :my-card="myCard" class="mt-5" />
  </Card>
</template>
