<template>
  <!-- Main Neon Green Card -->
  <div
    class="mt-4 flex flex-col justify-center gap-[10px] md:mt-0 md:h-[668px] md:flex-row md:gap-[20px]"
  >
    <!-- Left Column -->
    <div class="h-full w-[345px]">
      <Transition name="fade" mode="out-in">
        <UserInfo />
      </Transition>
    </div>

    <!-- Middle Column -->
    <div class="flex h-full w-[345px] flex-col gap-[10px] md:gap-[20px]">
      <DownloadStats />
      <QuickTools />
    </div>

    <!-- Right Column -->
    <div class="flex h-full w-[345px] flex-col gap-[10px] md:gap-[20px]">
      <ProxyData />
      <div class="">
        <SalesData @show-history="orderDetailsModalRef?.show()" />
      </div>
      <div class="">
        <RefundData @show-history="refundDetailsModalRef?.show()" />
      </div>
    </div>

    <OrderDetailsModal ref="orderDetailsModalRef" />
    <WithdrawalLogDialog
      ref="refundDetailsModalRef"
      title="退费记录"
      biz-type="commission_refund"
      amount-label="退费金额"
      empty-text="暂无退费记录"
      show-content
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UserInfo from '@/pages/UserCenter/components/UserInfo/index.vue'
import DownloadStats from '@/pages/UserCenter/components/DownloadStats/index.vue'
import QuickTools from '@/pages/UserCenter/components/QuickTools/index.vue'
import ProxyData from '@/pages/UserCenter/components/ProxyData/index.vue'
import SalesData from '@/pages/UserCenter/components/SalesData/index.vue'
import RefundData from '@/pages/UserCenter/components/RefundData/index.vue'
import OrderDetailsModal from '@/pages/UserCenter/components/OrderDetails/index.vue'
import WithdrawalLogDialog from '@/pages/UserCenter/components/UserInfo/components/WithdrawalLogDialog.vue'

const orderDetailsModalRef = ref<InstanceType<typeof OrderDetailsModal> | null>(null)
const refundDetailsModalRef = ref<InstanceType<typeof WithdrawalLogDialog> | null>(null)
</script>

<style scoped></style>
