<template>
  <div class="account-balance">
    <!-- 余额展示区域 -->
    <div class="balance-section">
      <div class="balance-title">
        <span>我的金币（元）</span>
        <el-tag size="small" type="primary">资产和使用</el-tag>
      </div>
      <div class="balance-amount">{{ userStaticInfo?.currencyCount || 0 }}</div>
      <div class="balance-actions">
        <el-button type="primary" @click="handlePay">充值</el-button>
        <el-button>提现</el-button>
      </div>
      <div class="balance-tip">提示：最低提现金额：100 元，一元=10金币</div>
    </div>

    <!-- 交易记录区域 -->
    <div class="transaction-section">
      <div class="transaction-tabs">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="交易记录" name="purchase">
            <!-- 组件 -->
            <PayRecords></PayRecords>
          </el-tab-pane>
          <el-tab-pane label="提现管理" name="withdraw">
            <div class="text-center color-#999 pa-10px">暂无数据</div>
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="date-filter">
          <span>当前时期：</span>
          <el-date-picker v-model="currentMonth" type="month" format="YYYY.MM" value-format="YYYY.MM" placeholder="选择月份" />
        </div> -->
      </div>
    </div>
    <!-- 充值弹窗 -->
    <Pay v-if="payVisible" v-model="payVisible" @refresh="fetchUserStatistics"></Pay>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import Pay from './components/pay.vue'
  import PayRecords from './components/pay-records.vue'
  import { getUserStatistics } from '~/api/personal-center/index'
  import type { UserStatisticsCountRespVO } from '~/api/personal-center/types'

  const activeTab = ref('purchase')
  // const currentMonth = ref('2025.03')

  // 获取用户统计信息
  const userStaticInfo = ref<UserStatisticsCountRespVO>()
  const fetchUserStatistics = async () => {
    const res = await getUserStatistics()
    userStaticInfo.value = res.data
  }
  fetchUserStatistics()

  const payVisible = ref(false)
  const handlePay = () => {
    payVisible.value = true
    // router.push({ path: '/personal/trading/center' })
  }
</script>

<style scoped>
  .account-balance {
    width: 913px;
    /* min-height: 100vh; */
    background: #ffffff;
  }

  .balance-section {
    background: white;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
  }

  .balance-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #666;
  }

  .balance-amount {
    font-size: 32px;
    font-weight: bold;
    margin: 20px 0;
  }

  .balance-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }

  .balance-tip {
    color: #999;
    font-size: 12px;
  }

  .transaction-section {
    background: white;
    padding: 20px 25px;
    border-radius: 8px;
    border-radius: 6px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
  }

  .transaction-tabs {
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; */
  }

  .date-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
  }

  .amount {
    color: #409eff;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  :deep(.el-pagination .el-pager li.is-active) {
    background-color: #409eff;
    color: white;
  }

  :deep(.el-input__wrapper) {
    background-color: transparent;
  }
</style>
