<template>
  <div class="conatiner">
    <!-- <div>
        <div>
            <div>
                <div style="padding: 20px 10px;">平台收益</div>
                <div style="display:flex;padding: 20px 10px;">
                    <div>
                        本月收益总额：{{ incomeData.monthIncome }}
                    </div>
                    <div>
                        今日收益总额:{{ incomeData.todayIncome }}
                    </div>
                    <div>
                        收益总额:{{ incomeData.totalIncome }}
                    </div>
                    <div>
                        年度收益总额:{{ incomeData.yearIncome }}
                    </div>
                </div>
            </div>

            <div>
                <div style="padding: 20px 10px;">收益趋势</div>
                <div style="display:flex; padding: 20px 10px;">
                    <div>
                        收益环比增长{{ trendData.momTrend }}
                    </div>
                    <div>
                        收益同比增长:{{ trendData.yoyTrend }}
                    </div>
                </div>
            </div>
            <div>
                <div style="padding: 20px 10px;">用户数据</div>
                <div style="display:flex; padding: 20px 10px;">
                    <div>
                        本月新增用户数{{userData.monthUserCount  }}
                    </div>
                    <div>
                        用户总数:{{ userData.userCount }}
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <template>
  <div class="dashboard">
    <div class="dashboard__container">
      <!-- 平台收益 -->
      <div class="dashboard__section">
        <div class="dashboard__title">平台收益</div>
        <div class="dashboard__cards">
          <div class="income-card">
            <div class="income-card__icon income-card__icon--blue">
              ¥
            </div>
            <div class="income-card__content">
              <div class="income-card__label">本月收益总额</div>
              <div class="income-card__value">{{ incomeData.monthIncome }}</div>
            </div>
          </div>

          <div class="income-card">
            <div class="income-card__icon income-card__icon--green">
              ¥
            </div>
            <div class="income-card__content">
              <div class="income-card__label">今日收益总额</div>
              <div class="income-card__value">{{ incomeData.todayIncome }}</div>
            </div>
          </div>

          <div class="income-card">
            <div class="income-card__icon income-card__icon--purple">
              ¥
            </div>
            <div class="income-card__content">
              <div class="income-card__label">收益总额</div>
              <div class="income-card__value">{{ incomeData.totalIncome }}</div>
            </div>
          </div>

          <div class="income-card">
            <div class="income-card__icon income-card__icon--orange">
              ¥
            </div>
            <div class="income-card__content">
              <div class="income-card__label">年度收益总额</div>
              <div class="income-card__value">{{ incomeData.yearIncome }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 收益趋势 -->
      <div class="dashboard__section">
        <div class="dashboard__title">收益趋势</div>
        <div class="trend-cards">
          <div class="trend-card">
            <div class="trend-card__icon">
              <span class="trend-arrow" :class="{'trend-arrow--down': trendData.momTrend < 0}"></span>
            </div>
            <div class="trend-card__content">
              <div class="trend-card__label">收益环比增长</div>
              <div class="trend-card__value" :class="{'trend-card__value--negative': trendData.momTrend < 0}">
                {{ trendData.momTrend }}%
              </div>
            </div>
          </div>

          <div class="trend-card">
            <div class="trend-card__icon">
              <span class="trend-arrow" :class="{'trend-arrow--down': trendData.yoyTrend < 0}"></span>
            </div>
            <div class="trend-card__content">
              <div class="trend-card__label">收益同比增长</div>
              <div class="trend-card__value" :class="{'trend-card__value--positive': trendData.yoyTrend > 0}">
                {{ trendData.yoyTrend }}%
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户数据 -->
      <div class="dashboard__section">
        <div class="dashboard__title">用户数据</div>
        <div class="user-cards">
          <div class="user-card">
            <div class="user-card__icon">
              <span class="user-icon"></span>
            </div>
            <div class="user-card__content">
              <div class="user-card__label">本月新增用户数</div>
              <div class="user-card__value">{{ userData.monthUserCount }}</div>
            </div>
          </div>

          <div class="user-card">
            <div class="user-card__icon">
              <span class="users-icon"></span>
            </div>
            <div class="user-card__content">
              <div class="user-card__label">用户总数</div>
              <div class="user-card__value">{{ userData.userCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  </div>
</template>

<script>
import { getIncome, getTrend, getUserData } from "@/api/dataStatistics/index";

export default {
  name: "dataStatistics",
  data() {
    return {
        incomeData:{},
        trendData:{},
        userData:{}
    };
  },
  created() {
    this.onGetIncome()
    this.onGetTrend()
    this.onGetUserData()

  },
  methods: {
    onGetIncome() {
        getIncome({}).then((res) => {
          this.incomeData = res.data
        });
    },
    onGetTrend() {
        getTrend({}).then((res) => {
            this.trendData = res.data
          
        });
    },
    onGetUserData() {
        getUserData({}).then((res) => {
            this.userData = res.data
         
        });
    },
  },
};
</script>
<style lang="scss" scoped>
// 变量定义
$primary-blue: #1e88e5;
$primary-green: #43a047;
$primary-purple: #8e24aa;
$primary-orange: #fb8c00;
$text-primary: #2c3e50;
$text-secondary: #666;
$background-light: #f5f6fa;
$card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

// Mixins
@mixin card-base {
  background: #fff;
  border-radius: 12px;
  box-shadow: $card-shadow;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard {
  min-height: 100vh;
  background-color: $background-light;
  padding: 24px;

  &__container {
    max-width: 1200px;
    margin: 0 auto;
  }

  &__section {
    @include card-base;
    margin-bottom: 24px;
    overflow: hidden;
  }

  &__title {
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
    border-bottom: 1px solid #eee;
  }

  &__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;
  }
}

.income-card {
  display: flex;
  align-items: center;
  padding: 20px;
  @include card-base;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }

  &__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    @include flex-center;
    margin-right: 16px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;

    &--blue { background: $primary-blue; }
    &--green { background: $primary-green; }
    &--purple { background: $primary-purple; }
    &--orange { background: $primary-orange; }
  }

  &__content {
    flex: 1;
  }

  &__label {
    font-size: 14px;
    color: $text-secondary;
    margin-bottom: 4px;
  }

  &__value {
    font-size: 24px;
    font-weight: 600;
    color: $text-primary;
  }
}

.trend-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.trend-card {
  display: flex;
  align-items: center;
  padding: 20px;
  @include card-base;

  &__icon {
    width: 48px;
    height: 48px;
    @include flex-center;
    margin-right: 16px;
  }

  &__content {
    flex: 1;
  }

  &__label {
    font-size: 14px;
    color: $text-secondary;
    margin-bottom: 8px;
  }

  &__value {
    font-size: 24px;
    font-weight: 600;

    &--positive { color: $primary-green; }
    &--negative { color: #ff4757; }
  }
}

.trend-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid $primary-green;

  &--down {
    transform: rotate(180deg);
    border-bottom-color: #ff4757;
  }
}

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 20px;
  @include card-base;

  &__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: $primary-blue;
    @include flex-center;
    margin-right: 16px;
  }

  &__content {
    flex: 1;
  }

  &__label {
    font-size: 14px;
    color: $text-secondary;
    margin-bottom: 4px;
  }

  &__value {
    font-size: 24px;
    font-weight: 600;
    color: $text-primary;
  }
}

.user-icon, .users-icon {
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
  }
}

.users-icon {
  &::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -8px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 16px;

    &__cards, 
    .trend-cards,
    .user-cards {
      grid-template-columns: 1fr;
    }
  }
}
</style>
