<template>
  <div class="member-container">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="$router.back()">
        <i class="arrow-left"></i>
      </div>
      <div class="title">我的团队</div>
    </div>

    <div class="content">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="card-header">
          <div class="header-title">团队信息</div>
        </div>
        <div class="user-info">
          <div class="avatar">
            <img src="@/assets/hongqi.png" alt="红旗">
          </div>
          <div class="account-info">
            <div class="account-item">
              <span class="label">账号：</span>
              <span class="value">{{ userInfo.mobile }}</span>
            </div>
            <div class="invite-code">
              <span class="label">邀请码：</span>
              <span class="value">{{ userInfo.salt }}</span>
              <button class="copy-btn" @click="copyInviteCode">复制</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 团队统计 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="header-title">团队统计</div>
        </div>
        <div class="team-stats">
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.totleone || 0 }}</div>
            <div class="stat-label">一级人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.totletwo || 0 }}</div>
            <div class="stat-label">二级人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.totlethree || 0 }}</div>
            <div class="stat-label">三级人数</div>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="function-card">
        <div class="card-header">
          <div class="header-title">团队管理</div>
        </div>
        <div class="function-list">
          <div class="function-item" @click="$router.push('/share')">
            <div class="function-content">
              <div class="function-text">邀请好友</div>
              <div class="function-desc">分享邀请码，邀请好友加入</div>
            </div>
            <i class="arrow-right"></i>
          </div>
          <div class="function-item" @click="$router.push('/team-detail')">
            <div class="function-content">
              <div class="function-text">团队明细</div>
              <div class="function-desc">查看团队成员详细信息</div>
            </div>
            <i class="arrow-right"></i>
          </div>
          <div class="function-item" @click="$router.push('/asset-center')">
            <div class="function-content">
              <div class="function-text">收益记录</div>
              <div class="function-desc">查看团队收益明细</div>
            </div>
            <i class="arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/home';
import { getBankInfo } from '@/api/profile';

export default {
  name: 'Member',
  data() {
    return {
      userInfo: {},
      bankInfo: {}
    }
  },
  created() {
    this.getUserInfo();
    // this.getBankInfo();
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await getUserInfo();
        this.userInfo = res.data;
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    async getBankInfo() {
      try {
        const res = await getBankInfo();
        this.bankInfo = res.data;
      } catch (error) {
        console.error('获取银行卡信息失败:', error);
      }
    },
    copyInviteCode() {
      if (this.userInfo.salt) {
        navigator.clipboard.writeText(this.userInfo.salt)
          .then(() => {
            alert('邀请码已复制');
          })
          .catch(() => {
            alert('复制失败，请手动复制');
          });
      }
    }
  }
}
</script>

<style scoped>
.member-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #2f9580 0%, #4fb3a1 100%);
}

.nav-bar {
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 15px;
}

.back-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.arrow-left {
  width: 12px;
  height: 12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 600;
}

.content {
  padding: 20px;
  min-height: calc(100vh - 56px);
}

.user-card,
.stats-card,
.function-card {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: linear-gradient(135deg, #2f9580 0%, #4fb3a1 100%);
  padding: 16px 20px;
}

.header-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.user-info {
  padding: 24px 20px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 64px;
  height: 64px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  border: 3px solid #2f9580;
}

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

.account-info {
  flex: 1;
}

.account-item {
  margin-bottom: 12px;
  font-size: 15px;
}

.invite-code {
  display: flex;
  align-items: center;
  font-size: 15px;
}

.label {
  color: #6b7280;
  font-weight: 500;
}

.value {
  color: #374151;
  font-weight: 600;
  margin-right: 12px;
}

.copy-btn {
  padding: 6px 16px;
  background: #2f9580;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: #268371;
  transform: scale(1.05);
}

.team-stats {
  padding: 24px 20px;
  display: flex;
  gap: 20px;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 20px 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.stat-item:hover {
  border-color: #2f9580;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(47, 149, 128, 0.2);
}

.stat-num {
  font-size: 24px;
  font-weight: 700;
  color: #2f9580;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.function-list {
  padding: 8px 0;
}

.function-item {
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #f3f4f6;
}

.function-item:last-child {
  border-bottom: none;
}

.function-item:hover {
  background: #f8f9fa;
}

.function-content {
  flex: 1;
}

.function-text {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.function-desc {
  font-size: 13px;
  color: #6b7280;
}

.arrow-right {
  width: 8px;
  height: 8px;
  border-right: 2px solid #9ca3af;
  border-top: 2px solid #9ca3af;
  transform: rotate(45deg);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nav-bar {
    height: 50px;
    padding: 0 12px;
  }
  
  .back-btn {
    width: 36px;
    height: 36px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .content {
    padding: 16px;
  }
  
  .card-header {
    padding: 12px 16px;
  }
  
  .header-title {
    font-size: 15px;
  }
  
  .user-info {
    padding: 20px 16px;
  }
  
  .avatar {
    width: 56px;
    height: 56px;
    margin-right: 16px;
  }
  
  .avatar img {
    width: 32px;
    height: 32px;
  }
  
  .account-item,
  .invite-code {
    font-size: 14px;
  }
  
  .account-item {
    margin-bottom: 10px;
  }
  
  .copy-btn {
    padding: 4px 12px;
    font-size: 11px;
  }
  
  .team-stats {
    padding: 20px 16px;
    gap: 12px;
  }
  
  .stat-item {
    padding: 16px 12px;
  }
  
  .stat-num {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .stat-label {
    font-size: 13px;
  }
  
  .function-item {
    padding: 16px;
  }
  
  .function-text {
    font-size: 15px;
  }
  
  .function-desc {
    font-size: 12px;
  }
}
</style> 