<template>
  <view class="subordinate-container">
    <view class="header">
      <text class="title">我的下级</text>
    </view>
    <view v-if="loading" class="loading-state">
      <text class="loading-text">加载中...</text>
    </view>
    <view v-else-if="subordinates.length === 0" class="empty-state">
      <text class="empty-text">暂无下级用户</text>
    </view>
    <view v-else class="subordinate-grid">
      <view class="subordinate-card" v-for="item in subordinates" :key="item.id">
        <view class="card-content">
          <view class="user-avatar">
            <text class="avatar-text">
              {{ item?.nickname?.charAt?.(0) ?? '' }}
            </text>
          </view>
          <view class="user-info">
            <view class="user-header">
              <text class="user-name">{{ item.nickname }}</text>
              <text class="user-id">ID: {{ item.id }}</text>
            </view>
            <view v-if="item.child && item.child.length > 0" class="child-list">
              <text class="child-count">直接下级: {{ item.child.length }}人</text>
              <view class="child-container">
                <view v-for="child in item.child" :key="child.id" class="child-item">
                  <view class="child-content">
                    <view class="child-avatar">
                      <text class="child-avatar-text">
                        {{ child?.nickname?.charAt?.(0) ?? '' }}
                      </text>
                    </view>
                    <view class="child-info">
                      <text class="child-name">{{ child.nickname }}</text>
                      <text class="child-id">ID: {{ child.id }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getMyInviteListAPI } from '@/service/login'
import type { InviteUserItem } from '@/service/login/type'

defineOptions({
  name: 'SubordinateList',
})

// 加载状态
const loading = ref(true)
// 下级用户数据
const subordinates = ref<InviteUserItem[]>([])

// 获取下级用户列表
const fetchSubordinates = async () => {
  try {
    loading.value = true
    const res = await getMyInviteListAPI()
    if (res.code === 200 && res.data) {
      console.log(666, res)

      subordinates.value = res.data
      loading.value = false
    }
  } catch (error) {
    console.error('获取下级用户列表失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchSubordinates()
})
</script>

<style lang="scss" scoped>
.subordinate-container {
  min-height: 100vh;
  padding: 24rpx;
  background-color: #f5f7fa;

  .header {
    margin-bottom: 32rpx;

    .title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .loading-state,
  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48rpx 0;

    .loading-text,
    .empty-text {
      font-size: 28rpx;
      color: #909399;
    }
  }

  .subordinate-grid {
    display: grid;
    gap: 24rpx;
  }

  .subordinate-card {
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .card-content {
      display: flex;
      align-items: flex-start;
      padding: 24rpx;
    }

    .user-avatar {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 88rpx;
      height: 88rpx;
      margin-right: 24rpx;
      background: linear-gradient(135deg, #4a90e2, #357abd);
      border-radius: 50%;

      .avatar-text {
        font-size: 36rpx;
        font-weight: 600;
        color: #ffffff;
      }
    }

    .user-info {
      flex: 1;

      .user-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;

        .user-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }

        .user-id {
          font-size: 24rpx;
          color: #909399;
        }
      }
    }

    .child-list {
      padding-top: 16rpx;
      margin-top: 16rpx;
      border-top: 2rpx solid #f0f2f5;

      .child-count {
        display: block;
        margin-bottom: 16rpx;
        font-size: 26rpx;
        color: #606266;
      }

      .child-container {
        padding-left: 24rpx;
        border-left: 4rpx solid #e8eaf6;
      }

      .child-item {
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .child-content {
          display: flex;
          align-items: center;
        }

        .child-avatar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;
          background: linear-gradient(135deg, #e8eaf6, #c5cae9);
          border-radius: 50%;

          .child-avatar-text {
            font-size: 28rpx;
            font-weight: 600;
            color: #4a90e2;
          }
        }

        .child-info {
          .child-name {
            margin-right: 12rpx;
            font-size: 28rpx;
            color: #333;
          }

          .child-id {
            font-size: 24rpx;
            color: #909399;
          }
        }
      }
    }
  }
}
</style>
