<template>
  <view class="d-flex flex-col">
	  <v-header class="nav_bar" :title="$t('base.h4')"></v-header>
	  <view class="layout-main">
		<scroll-view scroll-y="true" class="scroll_height">
			<view class="container">
				
			  <!-- 1. 顶部全局切换 Tab -->
			  <view class="global-tabs">
			    <view 
			      class="tab-item" 
			      :class="{ active: mainTab === 'stock' }" 
			      @click="switchMainTab('stock')"
			    >
			      <text>{{$t('automation.a3')}}</text>
			      <view class="line" v-if="mainTab === 'stock'"></view>
			    </view>
			    <view 
			      class="tab-item" 
			      :class="{ active: mainTab === 'crypto' }" 
			      @click="switchMainTab('crypto')"
			    >
			      <text>{{$t('automation.a4')}}</text>
			      <view class="line" v-if="mainTab === 'crypto'"></view>
			    </view>
			  </view>
			
			  <!-- 2. 黑色资产信息面板 -->
			  <view class="black-panel">
			    <view class="panel-header">
			      <view class="title-box">
			        <text class="title">{{$t('automation.a1')}}</text>
			        <text class="subtitle">{{$t('automation.a2')}}</text>
			      </view>
			    </view>
			
			    <view class="asset-grid">
			      <view class="grid-item w-60">
			        <text class="label">{{$t('automation.a5')}}</text>
			        <text class="value">{{ currentAccount.total }} {{ currency }}</text>
			      </view>
			      <view class="grid-item w-40 text-right" @click="goToRecord">
			        <text class="link-text">{{$t('automation.a6')}} ></text>
			      </view>
			
			      <view class="grid-item w-60 mt-20">
			        <text class="label">{{$t('automation.a7')}}</text>
			        <text class="value">{{ currentAccount.usable }} {{ currency }}</text>
			      </view>
			      <view class="grid-item w-40 mt-20 text-right">
			        <text class="label">{{$t('automation.a8')}}</text>
			        <text class="value text-green">{{ currentAccount.todayProfit }} {{ currency }}</text>
			      </view>
			
			      <view class="grid-item w-60 mt-20">
			        <text class="label">{{$t('automation.a32')}}</text>
			        <text class="value text-green">{{ currentAccount.totalProfit }} {{ currency }}</text>
			      </view>
			    </view>
			
			    <view class="action-buttons">
			      <view class="action-btn" @click="openModal('deposit')">{{$t('automation.a10')}} ></view>
			      <view class="action-btn" @click="openModal('withdraw')">{{$t('automation.a11')}} ></view>
			    </view>
			  </view>
			
			  <!-- 3. 白色内容区域 -->
			  <view class="white-panel">
			    <!-- 内部 Tab -->
			    <view class="sub-tabs">
			      <view 
			        class="sub-tab-item" 
			        :class="{ active: subTab === 'market' }" 
			        @click="subTab = 'market'"
			      >
			        {{$t('automation.a33')}}
			      </view>
			      <view class="sub-tab-item right-tab">
					<v-link class="tolink" tag="view" to="/pages/ellasAlpha/history">
						<text class="icon-history">🕒</text> {{$t('automation.a12')}}
					</v-link>
			      </view>
			    </view>
			
			    <!-- 市场列表 -->
			    <view class="list-container" v-if="subTab === 'market'">
			      <view class="list-header">
			        <text class="col-name">{{ mainTab === 'stock' ? $t('automation.a3') : $t('automation.a13') }}</text>
			        <text class="col-price">{{$t('automation.a14')}}</text>
			        <text class="col-change">{{$t('automation.a15')}}</text>
			      </view>
			
			      <view class="list-row" v-for="(item, index) in currentList" :key="index">
			        <view class="col-name row-flex">
			          <!-- 占位图标 -->
			          <view class="coin-icon" :style="{ backgroundColor: item.color }">{{ item.symbol.charAt(0) }}</view>
			          <view class="coin-info">
			            <text class="coin-name">{{ item.name }}</text>
			          </view>
			        </view>
			        <view class="col-price">
			          <text class="price-text">{{ item.price }}</text>
			        </view>
			        <view class="col-change">
			          <text :class="['change-text', item.change > 0 ? 'text-green' : 'text-red']">
			            {{ item.change > 0 ? '+' : '' }}{{ item.change }}%
			          </text>
			        </view>
			      </view>
			    </view>
			
			    <!-- 历史订单 -->
			    <!-- <view class="history-container" v-if="subTab === 'history'">
			      <view class="empty-state">暫無資料</view>
			    </view> -->
			  </view>
			
			  <!-- ================= 弹窗遮罩与内容 ================= -->
			  <view class="modal-mask" v-if="modalType !== ''" @click="closeModal"></view>
			  
			  <view class="modal-content" v-if="modalType !== ''">
			    <view class="modal-header">
			      <text class="modal-title">{{ modalType === 'deposit' ? $t('automation.a10') : $t('automation.a11') }}</text>
			      <text class="modal-close" @click="closeModal">✕</text>
			    </view>
			    
			    <view class="modal-body">
			      <view class="input-label">
			        <text class="text-red">*</text> <text>{{$t('common.money')}}</text>
			      </view>
			      <input 
			        class="amount-input" 
			        type="digit" 
			        :placeholder="$t('automation.a31')" 
			        v-model="formAmount"
			      />
			      
			      <!-- 存入资金的提示 -->
			      <view class="tips-box" v-if="modalType === 'deposit'">
			        <text class="tip-text">{{$t('automation.a5')}}: {{ currentAccount.total }} {{ currency }}</text>
			        <text class="tip-text">{{$t('automation.a28')}}: {{ currency }}</text>
			      </view>
			
			      <!-- 提取资金的提示 -->
			      <view class="tips-box" v-if="modalType === 'withdraw'">
			        <text class="tip-text">{{$t('common.d22')}}: {{ currentAccount.usable }} {{ currency }}</text>
			      </view>
			    </view>
			
			    <view class="modal-footer">
			      <view class="btn-cancel" @click="closeModal">{{$t('automation.a29')}}</view>
			      <view class="btn-confirm" @click="confirmAction">{{$t('automation.a30')}}</view>
			    </view>
			  </view>
			
			</view>
		</scroll-view>
	  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mainTab: 'stock', // 'stock' 或 'crypto'
      subTab: 'market', // 'market' 或 'history'
      modalType: '', // '' | 'deposit' | 'withdraw'
      formAmount: '',

      // 账户资产数据
      accountData: {
        stock: {
          total: '0.00',
          usable: '0.00',
          todayProfit: '0.00',
          totalProfit: '0.00'
        },
        crypto: {
          total: '209,000.00',
          usable: '90,000.00',
          todayProfit: '0.00',
          totalProfit: '0.00'
        }
      },

      // 列表数据
      marketData: {
        stock: [
          { name: 'Micron Technology...', symbol: 'MU', price: '996.00', change: -7.74, color: '#2980b9' },
          { name: 'Nvidia Corp', symbol: 'NVDA', price: '218.66', change: 1.82, color: '#27ae60' },
          { name: 'Broadcom Inc. Com...', symbol: 'AVGO', price: '418.91', change: -12.59, color: '#c0392b' },
          { name: 'Marvell Technology', symbol: 'MRVL', price: '316.43', change: 4.90, color: '#8e44ad' },
          { name: 'Alphabet Inc. Class ...', symbol: 'GOOGL', price: '372.19', change: 3.68, color: '#f39c12' },
          { name: 'Advanced Micro De...', symbol: 'AMD', price: '523.20', change: -3.56, color: '#34495e' },
        ],
        crypto: [
          { name: 'SOL/USDC', symbol: 'SOL', price: '65.40', change: -5.26, color: '#000000' },
          { name: 'BTC/USDC', symbol: 'BTC', price: '62,533.25', change: -1.61, color: '#f39c12' },
          { name: 'GALA/USDC', symbol: 'GALA', price: '0.00', change: -5.19, color: '#7f8c8d' },
          { name: 'FIL/USDC', symbol: 'FIL', price: '0.78', change: -8.95, color: '#3498db' },
          { name: 'GRT/USDC', symbol: 'GRT', price: '0.02', change: -6.22, color: '#9b59b6' },
        ]
      }
    };
  },
  computed: {
    currency() {
      return this.mainTab === 'stock' ? 'USDT' : 'USDC';
    },
    currentAccount() {
      return this.accountData[this.mainTab];
    },
    currentList() {
      return this.marketData[this.mainTab];
    }
  },
  methods: {
    switchMainTab(tab) {
      this.mainTab = tab;
    },
    openModal(type) {
      this.formAmount = '';
      this.modalType = type;
    },
    closeModal() {
      this.modalType = '';
    },
    confirmAction() {
      if (!this.formAmount) {
        uni.showToast({ title: this.$t("automation.a31"), icon: 'none' });
        return;
      }
      uni.showToast({ title: this.$t("assets.e4"), icon: 'success' });
      this.closeModal();
    },
    goToRecord() {
      // uni.showToast({ title: '跳轉到資金記錄', icon: 'none' });
    }
  }
};
</script>

<style scoped>
/* 基础容器，允许原生滚动 */
.container {
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 50rpx; /* 底部留白 */
}
.scroll_height{
	height: calc(100vh - 45px);
}

/* ================= 1. 顶部 Tab ================= */
.global-tabs {
  display: flex;
  background-color: #ffffff;
  height: 90rpx;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #999;
  position: relative;
}
.tab-item.active {
  color: #333;
  font-weight: bold;
}
.tab-item .line {
  position: absolute;
  bottom: 0;
  width: 60rpx;
  height: 6rpx;
  background-color: #000;
  border-radius: 4rpx;
}

/* ================= 2. 黑色面板 ================= */
.black-panel {
  background-color: #000000;
  color: #ffffff;
  padding: 40rpx 30rpx;
}
.panel-header {
  margin-bottom: 40rpx;
}
.title {
  font-size: 44rpx;
  font-weight: bold;
  display: block;
}
.subtitle {
  font-size: 24rpx;
  color: #aaaaaa;
  margin-top: 10rpx;
  display: block;
}

/* 资产网格布局 */
.asset-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40rpx;
}
.grid-item {
  display: flex;
  flex-direction: column;
}
.w-60 { width: 60%; }
.w-40 { width: 40%; }
.mt-20 { margin-top: 30rpx; }
.text-right { text-align: right; align-items: flex-end; }

.label {
  font-size: 24rpx;
  color: #aaaaaa;
  margin-bottom: 10rpx;
}
.value {
  font-size: 32rpx;
  font-weight: bold;
}
.link-text {
  font-size: 24rpx;
  color: #ffffff;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  padding-top: 30rpx;
  /* border-top: 1rpx solid #333333; */
}
.action-btn {
  font-size: 28rpx;
  color: #ffffff;
  padding: 10rpx 40rpx;
}

/* ================= 3. 白色面板区域 ================= */
.white-panel {
  background-color: #ffffff;
  padding: 0 30rpx;
}

/* 内部 Tabs */
.sub-tabs {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  /* border-bottom: 1rpx solid #eeeeee; */
}
.sub-tab-item {
  font-size: 30rpx;
  color: #666666;
}
.sub-tab-item.active {
  color: #333333;
}
.right-tab {
  display: flex;
  align-items: center;
  color: #999999;
}
.icon-history {
  margin-right: 10rpx;
  font-size: 28rpx;
}

/* 列表头部 */
.list-header {
  display: flex;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #999999;
  border-bottom: 1rpx solid #f5f5f5;
}
.col-name { flex: 4; }
.col-price { flex: 3; text-align: left; }
.col-change { flex: 2; text-align: right; }

/* 列表行 */
.list-row {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f9f9f9;
}
.row-flex {
  display: flex;
  align-items: center;
}
.coin-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}
.coin-name {
  font-size: 28rpx;
  color: #333333;
}
.price-text {
  font-size: 28rpx;
  color: #333333;
}
.change-text {
  font-size: 28rpx;
}

/* 颜色公共类 */
.text-green { color: #00d26a; }
.text-red { color: #ff4d4f; }

/* 历史记录空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 0;
  color: #999999;
  font-size: 28rpx;
}

/* ================= 4. 弹窗样式 ================= */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}
.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  background-color: #ffffff;
  border-radius: 20rpx;
  z-index: 999;
  overflow: hidden;
}
.modal-header {
  position: relative;
  text-align: center;
  padding: 40rpx 0 20rpx;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.modal-close {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  font-size: 40rpx;
  color: #999;
}
.modal-body {
  padding: 20rpx 40rpx;
}
.input-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.amount-input {
  height: 80rpx;
  border: 1rpx solid #dddddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
.tips-box {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}
.tip-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.modal-footer {
  display: flex;
  padding: 40rpx;
  justify-content: space-between;
}
.btn-cancel, .btn-confirm {
  width: 46%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 10rpx;
  font-size: 30rpx;
}
.btn-cancel {
  border: 2rpx solid #2979ff;
  color: #2979ff;
  background-color: #fff;
}
.btn-confirm {
  background-color: #2979ff;
  color: #fff;
}
</style>