﻿<template>
  <div class="page-container-flex">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="交易记录" placeholder>
      <template #right>
        <van-button 
          v-if="tabActive === 'email'"
          size="small" 
          type="primary" 
          :loading="syncing"
          @click="emailRecordRef.handleSync()"
        >
          立即同步
        </van-button>
      </template>
    </van-nav-bar>
    <van-tabs v-model:active="tabActive" animated>
      <van-tab title="账单记录" name="balance" />
      <van-tab title="邮件记录" name="email" />
    </van-tabs>

    <TransactionsRecord v-if="tabActive === 'balance'" ref="transactionsRecordRef"/>
    <EmailRecord v-else-if="tabActive === 'email'" ref="emailRecordRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TransactionsRecord from './TransactionsRecord.vue';
import EmailRecord from './EmailRecord.vue';
const tabActive = ref('balance');

const transactionsRecordRef = ref(null);
const emailRecordRef = ref(null);

</script>

<style scoped>
:deep(.van-pull-refresh) {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}
</style>