<template>
  <div class="account-page">
    <div class="account-container">
      <!-- 标题 -->
      <div class="section-title">
        <div class="title-bar"></div>
        <div class="title-text">账户管理</div>
      </div>
      
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 账户余额卡片 -->
        <div class="balance-card">
          <div class="balance-header">
            <h2 class="balance-title">账户余额</h2>
            <div class="balance-actions">
              <div class="dropdown-container">
                <select class="balance-dropdown" v-model="selectedDetail">
                  <option value="details">明细</option>
                  <option value="withdraw-records">提现记录</option>
                  <option value="balance-details">余额明细</option>
                </select>
              </div>
              <button class="withdraw-btn">提现</button>
            </div>
          </div>
          
          <div class="balance-main">
            <div class="balance-amount">
              <div class="wallet-icon">
                <img src="../../assets/account-mananger/余额.svg" alt="钱包图标" class="wallet-icon-img" />
              </div>
              <div class="amount-info">
                <div class="amount-label">可提现金额（元）</div>
                <div class="amount-value">¥180.00</div>
              </div>
            </div>
          </div>
          
          <!-- 统计卡片组 -->
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-icon">
                <img src="../../assets/account-mananger/总金额.svg" alt="总余额图标" class="stat-icon-img" />
              </div>
              <div class="stat-info">
                <div class="stat-label">总余额（元）</div>
                <div class="stat-value">¥20.00</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <img src="../../assets/account-mananger/推广.svg" alt="推广佣图标" class="stat-icon-img" />
              </div>
              <div class="stat-info">
                <div class="stat-label">推广佣（元）</div>
                <div class="stat-value">¥20.00</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <img src="../../assets/account-mananger/昨日.svg" alt="昨日收益图标" class="stat-icon-img" />
              </div>
              <div class="stat-info">
                <div class="stat-label">昨日收益（元）</div>
                <div class="stat-value">¥20.00</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <img src="../../assets/account-mananger/累计svg.svg" alt="累计收益图标" class="stat-icon-img" />
              </div>
              <div class="stat-info">
                <div class="stat-label">累计收益（元）</div>
                <div class="stat-value">¥20.00</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 收益卡片组 -->
        <div class="revenue-cards">
          <div class="revenue-card content-revenue">
            <div class="revenue-header">
              <h3 class="revenue-title">内容收益</h3>
            </div>
            <div class="revenue-main">
              <div class="revenue-icon">
                <img src="../../assets/account-mananger/内容.svg" alt="内容收益图标" class="revenue-icon-img" />
              </div>
              <div class="revenue-info">
                <div class="revenue-amount">¥0.00</div>
                <div class="revenue-desc">工作流、视频等创作收益</div>
              </div>
            </div>
          </div>
          
          <div class="revenue-card promotion-revenue">
            <div class="revenue-header">
              <h3 class="revenue-title">推广收益</h3>
            </div>
            <div class="revenue-main">
              <div class="revenue-icon">
                <img src="../../assets/account-mananger/推广.svg" alt="推广收益图标" class="revenue-icon-img" />
              </div>
              <div class="revenue-info">
                <div class="revenue-amount">¥0.00</div>
                <div class="revenue-desc">工作流、视频等创作收益</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 下拉框选择项
const selectedDetail = ref('details')
</script>

<style scoped>
.account-page {
  width: 100%;
  min-height: 100%;
}

/* 🔧 关键修复：覆盖个人中心的main-content设置 */
:deep(.main-content) {
  margin-top: 0 !important;      /* 移除60px上边距 */
  margin-bottom: 0 !important;   /* 移除20px下边距 */
  padding: 0 !important;         /* 移除24px上下内边距 */
  min-height: auto !important;   /* 移除478px最小高度限制 */
  flex: none !important;         /* 不占据剩余空间，只包含内容 */
}

.account-container {
  width: 100%;
  max-width: 1025px; /* 🔧 限制最大宽度，防止右侧被截断 */
  box-sizing: border-box;
  margin: 0; /* 确保没有外边距 */
  padding: 0; /* 确保没有内边距 */
}

/* 页面标题 - 与个人中心整体风格保持一致 */
.section-title {
  display: flex;
  align-items: center;
  margin: 0 0 20px 0; /* 只保留底部边距，移除可能的顶部边距 */
  gap: 12px;
}

.title-bar {
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, #4A90E2 0%, #2E5FBF 100%);
  border-radius: 2px;
}

.title-text {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #333;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 减少行间距 */
  width: 100%; /* 确保占满宽度 */
}

/* 账户余额卡片 */
.balance-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px; /* 稍微减少内边距 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  width: 100%; /* 确保占满可用宽度 */
  box-sizing: border-box;
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.balance-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.balance-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.balance-dropdown {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  min-width: 80px;
  transition: border-color 0.3s ease;
}

.balance-dropdown:focus {
  outline: none;
  border-color: #4A90E2;
}

.balance-dropdown:hover {
  border-color: #4A90E2;
}

.withdraw-btn {
  padding: 8px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.withdraw-btn:hover {
  background: #34495e;
  transform: translateY(-1px);
}

/* 余额主要区域 */
.balance-main {
  margin-bottom: 32px; /* 减少底部边距 */
}

.balance-amount {
  display: flex;
  align-items: center;
  gap: 20px; /* 稍微减少间距 */
}

.wallet-icon {
  flex-shrink: 0;
}

.amount-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amount-label {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.amount-value {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 强制4列等宽布局 */
  gap: 16px; /* 减少间距以节省空间 */
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px; /* 减少图标与文字间距 */
  padding: 12px 8px; /* 减少内边距，增加左右padding */
  border-radius: 8px; /* 添加圆角 */
  background: rgba(74, 144, 226, 0.03); /* 添加淡色背景 */
  transition: background 0.3s ease;
}

.stat-item:hover {
  background: rgba(74, 144, 226, 0.06);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 13px;
  color: #999;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 收益卡片组 - 第二行布局 */
.revenue-cards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC端强制2列等宽布局，平分宽度 */
  gap: 20px;
  width: 100%; /* 确保与第一行余额卡片宽度一致 */
}

.revenue-card {
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 32px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%; /* 确保卡片占满分配的空间 */
  box-sizing: border-box; /* 包含padding在内的盒模型 */
  min-height: 160px; /* 🎯 调整最小高度适应20px标题 */
}

.revenue-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.content-revenue {
  background: white url('../../assets/account-mananger/内容卡片.svg') no-repeat center center;
  background-size: cover;
}

.promotion-revenue {
  background: white url('../../assets/account-mananger/推广卡片.svg') no-repeat center center;
  background-size: cover;
}

.revenue-header {
  margin-bottom: 20px;  /* 🎯 调整间距适应20px标题 */
  text-align: left;     
  width: 100%;          
}

.revenue-title {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-size: 20px;      /* 🎯 调整为20px，比金额(28px)小，更协调 */
  font-weight: bold;    /* 🎯 保持加粗 */
  color: #1a1a1a;       /* 深色文字 */
  margin: 0;
  line-height: 1.3;     /* 调整行高适应字体 */
  letter-spacing: 0;    
  text-align: left;     
  display: block;       
}

.revenue-main {
  display: flex;
  align-items: center;
  gap: 24px;
}

.revenue-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left; /* 🎯 确保金额和描述文字左对齐 */
  align-items: flex-start; /* 🎯 确保子元素左对齐 */
}

.revenue-amount {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  text-align: left; /* 🎯 明确设置金额左对齐 */
  width: 100%; /* 确保占满容器宽度 */
}

.revenue-desc {
  font-size: 13px;
  color: #666;
  text-align: left; /* 🎯 明确设置描述文字左对齐 */
  width: 100%; /* 确保占满容器宽度 */
}

/* SVG图标样式 */
.wallet-icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.stat-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.revenue-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* 图标占位符 (保留以防需要) */
.icon-placeholder {
  border-radius: 8px;
  background: #f5f5f5;
  border: 2px dashed #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
  position: relative;
}

.icon-placeholder::after {
  content: '图标';
}

.icon-placeholder.small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.icon-placeholder.medium {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.icon-placeholder:not(.small):not(.medium) {
  width: 80px;
  height: 80px;
  border-radius: 12px;
}

.icon-placeholder.blue {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #1976d2;
}

.icon-placeholder.orange {
  background: #fff3e0;
  border-color: #ff9800;
  color: #f57c00;
}

/* 中等宽度屏幕优化 - 专门针对个人中心受限宽度 */
@media (max-width: 1400px) {
  .account-container {
    max-width: 950px; /* 1400px屏幕下的可用宽度 */
  }
}

@media (max-width: 1200px) {
  .account-container {
    max-width: 850px; /* 1200px屏幕下的可用宽度 */
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr); /* 在中等宽度下改为2列 */
    gap: 12px;
  }
  
  .stat-item {
    padding: 10px 6px;
    gap: 10px;
  }
  
  /* 保持2行布局：第二行两个收益卡片平分宽度 */
  .revenue-cards {
    grid-template-columns: 1fr 1fr; /* 继续保持2列等宽布局 */
    gap: 16px; /* 稍微减少间距 */
  }
  
  .revenue-card {
    padding: 24px; /* 减少收益卡片内边距 */
    min-height: 140px; /* 🎯 中等屏幕下调整最小高度适应18px标题 */
  }
  
  .revenue-header {
    margin-bottom: 20px; /* 中等屏幕下适当标题间距 */
    text-align: left;    
  }
  
  .revenue-title {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 18px;     /* 🎯 中等屏幕下调整为18px，更匹配 */
    font-weight: bold;   /* 🎯 保持加粗 */
    color: #1a1a1a;      
    text-align: left;    
    line-height: 1.3;    /* 调整行高 */
  }
  
  .revenue-main {
    gap: 18px; /* 减少图标与内容间距 */
  }
  
  .revenue-info {
    text-align: left; /* 🎯 中等屏幕下确保左对齐 */
  }
  
  .revenue-amount {
    text-align: left; /* 🎯 中等屏幕下金额左对齐 */
  }
  
  .revenue-desc {
    text-align: left; /* 🎯 中等屏幕下描述文字左对齐 */
  }
}

@media (max-width: 900px) {
  .account-container {
    max-width: none; /* 移动端移除宽度限制 */
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  
  .balance-card {
    padding: 24px 20px;
  }
  
  .balance-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .balance-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .balance-amount {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .amount-value {
    font-size: 28px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr); /* 保持2列布局 */
    gap: 12px;
  }
  
  .stat-item {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px 6px; /* 调整移动端内边距 */
  }
  
  /* 移动端改为垂直排列 */
  .revenue-cards {
    grid-template-columns: 1fr; /* 移动端垂直排列 */
    gap: 16px;
  }
  
  .revenue-card {
    padding: 24px 20px;
    min-height: auto; /* 移动端取消最小高度限制 */
  }
  
  .revenue-header {
    margin-bottom: 18px; /* 移动端适当减少标题间距 */
    text-align: left;    
    width: 100%;         
  }
  
  .revenue-title {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 18px;     /* 🎯 移动端调整为18px，比金额(24px)小 */
    font-weight: bold;   /* 🎯 保持加粗 */
    color: #1a1a1a;      
    text-align: left;    
    display: block;      
    line-height: 1.3;    /* 调整行高 */
  }
  
  .revenue-main {
    flex-direction: column;
    gap: 16px;
    text-align: left; /* 🎯 移动端也保持左对齐 */
    align-items: flex-start; /* 🎯 确保子元素左对齐 */
  }
  
  .revenue-amount {
    font-size: 24px;
    text-align: left; /* 🎯 移动端金额左对齐 */
  }
  
  .revenue-desc {
    text-align: left; /* 🎯 移动端描述文字左对齐 */
  }
  
  /* 移动端图标尺寸调整 */
  .wallet-icon-img {
    width: 60px;
    height: 60px;
  }
  
  .revenue-icon-img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  
  .balance-card {
    padding: 20px 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr); /* 小屏仍保持2列 */
    gap: 8px;
  }
  
  .stat-item {
    padding: 8px 4px; /* 进一步减少内边距 */
  }
  
  /* 继续保持移动端垂直布局 */
  .revenue-cards {
    grid-template-columns: 1fr; /* 小屏继续垂直排列 */
    gap: 12px;
  }
  
  .revenue-card {
    padding: 20px 16px;
  }
  
  .revenue-header {
    margin-bottom: 16px; /* 小屏设备下适当标题间距 */
    text-align: left;    
    width: 100%;         
  }
  
  .revenue-title {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 16px;     /* 🎯 小屏设备下调整为16px，保持层次 */
    font-weight: bold;   /* 🎯 保持加粗 */
    color: #1a1a1a;      
    text-align: left;    
    display: block;      
    line-height: 1.3;    /* 调整行高 */
  }
  
  .title-text {
    font-size: 18px;
  }
  
  .revenue-info {
    text-align: left; /* 🎯 小屏下确保左对齐 */
  }
  
  .revenue-amount {
    text-align: left; /* 🎯 小屏下金额左对齐 */
  }
  
  .revenue-desc {
    text-align: left; /* 🎯 小屏下描述文字左对齐 */
  }
  
  /* 小屏设备图标尺寸进一步调整 */
  .wallet-icon-img {
    width: 50px;
    height: 50px;
  }
  
  .stat-icon-img {
    width: 32px;
    height: 32px;
  }
  
  .revenue-icon-img {
    width: 45px;
    height: 45px;
  }
  
  .balance-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .dropdown-container,
  .withdraw-btn {
    width: 100%;
  }
  
  .balance-dropdown {
    width: 100%;
  }
}
</style>
