<template>
  <view class="page-container">

    <view class="header-section">
      <view class="asset-card">

      
        <view class="card-row top-row">
          <view class="row-left">
            <text class="label-text">账本总额 (CNY)</text>
            <view class="eye-btn">
              <uni-icons type="eye-filled" size="18" color="rgba(255,255,255,0.7)"></uni-icons>
            </view>
          </view>

       
        </view>

        <view class="card-row main-row">
          <text class="currency-symbol">¥</text>
          <text class="big-number">{{ assetData.totalValue.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</text>
        </view>

        <view class="card-row bottom-row">
          <view class="stat-col">
            <text class="stat-label">今日账面变动</text>
          <text class="stat-value">{{ assetData.todayProfit >= 0 ? '+' : '' }}¥{{ assetData.todayProfit.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</text>
        </view>
        <view class="stat-col align-right">
          <text class="stat-label">历史总变动</text>
          <text class="stat-value">{{ assetData.totalReturnRate >= 0 ? '+' : '' }}{{ assetData.totalReturnRate }}%</text>
          </view>
        </view>

      </view>
    </view>

    <view class="part-add-portfolio">
      <view class="dashed-btn" @click="goConfig">
        <uni-icons type="plus" size="20" color="#9CA3AF"></uni-icons>
        <text class="btn-text">新建组合</text>
      </view>
    </view>


    <view class="part-holdings-list">

      <view class="section-header">
        <text class="section-title">当前记录组合</text>
      </view>

      <view 
        v-for="holding in holdings" 
        :key="holding.id"
        class="holding-card" 
        @click="goDetail(holding.id)"
      >
        <view class="card-top">
          <view class="flex-row items-center gap-2">
            <view class="strategy-icon" :class="holding.iconBgClass">
              <text class="icon-text" :class="holding.iconTextClass">{{ holding.iconChar }}</text>
            </view>
            <view class="flex-col">
              <text class="card-name">{{ holding.name }}</text>
              <text class="card-tags">{{ holding.tags }}</text>
            </view>
          </view>
          <view class="status-badge" :class="holding.statusType === 'green' ? 'bg-green-50' : 'bg-gray-100'">
            <text class="status-text" :class="holding.statusType === 'green' ? 'text-green-600' : 'text-gray-500'">● {{ holding.status }}</text>
          </view>
        </view>

        <view class="card-divider"></view>

        <view class="card-bottom">
          <view class="data-col">
            <text class="data-label">当前估值</text>
            <text class="data-val">¥ {{ holding.value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</text>
          </view>
          <view class="data-col align-right">
            <text class="data-label">历史总变动</text>
            <text class="data-val" :class="holding.returnType === 'positive' ? 'text-red' : 'text-green'">{{ holding.returnRate >= 0 ? '+' : '' }}{{ holding.returnRate }}%</text>
          </view>
        </view>
      </view>

      <view style="height: 100rpx;"></view>

    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { api } from '../../utils/api';

// 资产数据
const assetData = ref({
  totalValue: 0,
  todayProfit: 0,
  totalReturnRate: 0
});

// 持仓组合数据
const holdings = ref([]);

// 从后端API获取资产数据的函数
const fetchAssetData = async () => {
  try {
    const response = await api.assets.getAssetData();
    if (response.code === 200) {
      assetData.value = response.data;
    }
  } catch (error) {
    console.error('获取资产数据失败:', error);
  }
};

// 从后端API获取持仓组合数据的函数
const fetchHoldingsData = async () => {
  try {
    const response = await api.assets.getHoldings();
    if (response.code === 200) {
      holdings.value = response.data;
    }
  } catch (error) {
    console.error('获取持仓数据失败:', error);
  }
};

// 页面加载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchAssetData(),
    fetchHoldingsData()
  ]);
});

const goConfig = () => {
  uni.navigateTo({ url: '/pages/config/config' });
};

const goDetail = (holdingId) => {
  uni.navigateTo({ url: `/pages/detail/detail?id=${holdingId}` });
};

const goStrategies = () => {
  uni.switchTab({ url: '/pages/strategies/strategies' });
};
</script>

<style scoped>
/* 通用布局 */
.page-container {
  min-height: 100vh;
  background-color: #F9FAFB;
  /* 浅灰色背景，与添加按钮背景一致 */
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.gap-2 {
  gap: 16rpx;
}

.mt-2 {
  margin-top: 16rpx;
}

/* 字体颜色工具类 */
.text-white {
  color: #fff;
}

.text-gray-500 {
  color: #6B7280;
}

.text-green-600 {
  color: #059669;
}

.text-green-700 {
  color: #047857;
}

.text-blue-700 {
  color: #1D4ED8;
}

.text-red {
  color: #EF4444;
}

/* 涨 */
.text-green {
  color: #10B981;
}

/* 跌 */

/* ============================ */
/* Part 1: 资产卡片样式 (精修版) */
/* ============================ */
.header-section {
  padding: 20rpx 32rpx;
  background-color: #F9FAFB;
  /* 浅灰色背景，与页面背景一致 */
}

.asset-card {
  background-color: #064E3B;
  /* 深墨绿色 */
  border-radius: 40rpx;
  padding: 40rpx 48rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(6, 78, 59, 0.25);
  min-height: 320rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* 内容行通用设置 */
.card-row {
  position: relative;
  z-index: 1;
}

/* 第一行：顶部布局 (关键修复：两端对齐) */
.top-row {
  display: flex;
  justify-content: space-between;
  /* 让铃铛靠右 */
  align-items: center;
  margin-bottom: 20rpx;
}

.row-left {
  display: flex;
  align-items: center;
}

.label-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.eye-btn {
  margin-left: 12rpx;
  opacity: 0.8;
}


/* 第二行：大数字 */
.main-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 30rpx;
}

.currency-symbol {
  font-size: 40rpx;
  color: #FFFFFF;
  font-weight: bold;
  margin-right: 8rpx;
  font-family: 'DIN Alternate', sans-serif;
}

.big-number {
  font-size: 68rpx;
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: 1rpx;
  font-family: 'DIN Alternate', sans-serif;
}

/* 第三行：底部数据 */
.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.stat-col {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.align-right {
  align-items: flex-end;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.stat-value {
  font-size: 36rpx;
  color: #FFFFFF;
  font-weight: 700;
  font-family: 'DIN Alternate', sans-serif;
}

/* ============================ */
/* Part 2: 添加组合按钮样式      */
/* ============================ */
.part-add-portfolio {
  padding: 10rpx 32rpx 30rpx 32rpx;
}

.dashed-btn {
  width: 100%;
  height: 96rpx;
  background-color: #F9FAFB;
  border: 2rpx dashed #D1D5DB;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.2s;
}

.dashed-btn:active {
  background-color: #F3F4F6;
  border-color: #9CA3AF;
}

.btn-text {
  font-size: 28rpx;
  color: #6B7280;
  font-weight: 500;
}

/* ============================ */
/* Part 3: 持仓列表样式          */
/* ============================ */
.part-holdings-list {
  padding: 0 32rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-left: 8rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 800;
  color: #1F2937;
}

.view-all {
  font-size: 24rpx;
  color: #064E3B;
  font-weight: 600;
  margin-right: 4rpx;
}

/* 卡片样式 */
.holding-card {
  background-color: #FFFFFF;
  border: 1rpx solid #E5E7EB;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.holding-card:active {
  transform: translateY(2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.strategy-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-green-100 {
  background-color: #D1FAE5;
}

.bg-blue-100 {
  background-color: #DBEAFE;
}

.bg-green-50 {
  background-color: #ECFDF5;
}

.bg-gray-100 {
  background-color: #F3F4F6;
}

.icon-text {
  font-size: 36rpx;
  font-weight: 800;
}

.card-name {
  font-size: 30rpx;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 6rpx;
}

.card-tags {
  font-size: 22rpx;
  color: #9CA3AF;
}

.status-badge {
  padding: 6rpx 16rpx;
  border-radius: 100rpx;
}

.status-text {
  font-size: 20rpx;
  font-weight: 600;
}

.card-divider {
  height: 1rpx;
  background-color: #F3F4F6;
  margin: 24rpx 0;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
}

.data-col {
  display: flex;
  flex-direction: column;
}

.data-label {
  font-size: 22rpx;
  color: #9CA3AF;
  margin-bottom: 8rpx;
}

.data-val {
  font-size: 32rpx;
  font-weight: 700;
  font-family: 'DIN Alternate', sans-serif;
  color: #1F2937;
}
</style>