<template>
	<v-page class="layout-main">
		<v-header title="帳單"></v-header>
		
		<view class="tab-header">
		  <view class="tab-list">
		    <view class="tab-item" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }" @click="switchTab(tab.id)">
		      {{ tab.name }}
		    </view>
		  </view>
		</view>
		
		<view class="main-card">
			<scroll-view class="scroll-area" scroll-y="true">
				<view v-if="activeTab == 'Deposit'">
					<records :types="types == '' ? 'recharge' : types"></records>
				</view>
				<view v-if="activeTab == 'Withdraw'">
					<records :types="types == '' ? 'draw' : types"></records>
				</view>
				<view v-if="activeTab == 'Transfer'">
					<bill :types="'Transfer'"></bill>
				</view>
				<view v-if="activeTab == 'Instant Exchange'"></view>
			</scroll-view>
		</view>
	</v-page>
</template>

<script>
	import records from "../assets/records";
	import bill from "../transfer/bill";
	
	export default {
		components: {
			records,
			bill
		},
		data() {
			return {
				activeTab: 'Deposit', // 当前激活的 Tab
				types:'',
				tabs: [
				  { id: 'Deposit', name: '充值' },
				  { id: 'Withdraw', name: '提現' },
				  { id: 'Transfer', name: '劃轉' },
				  { id: 'Instant Exchange', name: '閃兌' }
				],
			}
		},
		methods: {
			// 切换 Tab 方法
			switchTab(tabId) {
			  this.activeTab = tabId;
			  if(tabId == 'Deposit'){
				this.types = 'recharge'
			  }else if(tabId == 'Withdraw'){
				this.types = 'draw'
			  }
			},
		}
	}
</script>

<style scoped>
.tab-header {
  padding: 0 10rpx;
  // background-color: #f7f8fa;
  flex-shrink: 0; 
}

.tab-list {
  display: flex;
  align-items: center;
}

.tab-item {
  font-size: 32rpx;
  color: #666;
  padding: 20rpx 30rpx;
  position: relative;
  transition: all 0.2s;
}

.tab-item.active {
  color: #00b578; /* 绿色文字 */
  font-weight: bold;
}

/* 激活状态下的绿色小横线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30rpx;
  right: 30rpx;
  height: 4rpx;
  background-color: #00b578;
  border-radius: 4rpx;
}

.main-card {
  /* background-color: #ffffff; */
  overflow: hidden;
}
.scroll-area {
  height: 1120rpx; /* 让 scroll-view 完美填满 main-card 的高度 */
  width: 100%;
}
</style>
