<template>
  <!-- 错误状态 -->
  <ElCard shadow="never" v-if="errorMsg" class="commission-summary-widget error-state">
    <div class="error-content">
      <i class="el-icon-warning" style="font-size: 48px; color: var(--el-color-warning)"></i>
      <p>{{ errorMsg }}</p>
    </div>
  </ElCard>

  <!-- 正常显示 -->
  <div v-else class="commission-summary-widget">
    <div class="stats-container">
      <ElCard shadow="hover" class="stat-card-wrapper">
        <div class="stat-card">
          <div
            class="stat-icon"
            style="background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%)"
          >
            <i class="iconfont-sys">&#xe722;</i>
          </div>
          <div class="stat-content">
            <div class="stat-label">预充值余额</div>
            <div class="stat-value">{{ formatMoney(summary.main_balance) }}</div>
          </div>
        </div>
      </ElCard>
      <ElCard shadow="hover" class="stat-card-wrapper">
        <div class="stat-card">
          <div
            class="stat-icon"
            style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
          >
            <i class="iconfont-sys">&#xe71d;</i>
          </div>
          <div class="stat-content">
            <div class="stat-label">总佣金</div>
            <div class="stat-value">{{ formatMoney(summary.total_commission) }}</div>
          </div>
        </div>
      </ElCard>
      <ElCard shadow="hover" class="stat-card-wrapper">
        <div class="stat-card">
          <div
            class="stat-icon"
            style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
          >
            <i class="iconfont-sys">&#xe71e;</i>
          </div>
          <div class="stat-content">
            <div class="stat-label">可提现佣金</div>
            <div class="stat-value">{{ formatMoney(summary.available_commission) }}</div>
          </div>
        </div>
      </ElCard>
      <ElCard shadow="hover" class="stat-card-wrapper">
        <div class="stat-card">
          <div
            class="stat-icon"
            style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
          >
            <i class="iconfont-sys">&#xe720;</i>
          </div>
          <div class="stat-content">
            <div class="stat-label">冻结佣金</div>
            <div class="stat-value">{{ formatMoney(summary.frozen_commission) }}</div>
          </div>
        </div>
      </ElCard>
      <ElCard shadow="hover" class="stat-card-wrapper">
        <div class="stat-card">
          <div
            class="stat-icon"
            style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
          >
            <i class="iconfont-sys">&#xe71f;</i>
          </div>
          <div class="stat-content">
            <div class="stat-label">提现中佣金</div>
            <div class="stat-value">{{ formatMoney(summary.withdrawing_commission) }}</div>
          </div>
        </div>
      </ElCard>
      <ElCard shadow="hover" class="stat-card-wrapper">
        <div class="stat-card">
          <div
            class="stat-icon"
            style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
          >
            <i class="iconfont-sys">&#xe721;</i>
          </div>
          <div class="stat-content">
            <div class="stat-label">已提现佣金</div>
            <div class="stat-value">{{ formatMoney(summary.withdrawn_commission) }}</div>
          </div>
        </div>
      </ElCard>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { CommissionService } from '@/api/modules'
  import type { MyCommissionSummary } from '@/types/api/commission'
  import { useUserStore } from '@/store/modules/user'
  import { formatMoney } from '@/utils/business/format'

  defineOptions({ name: 'CommissionSummaryWidget' })

  const userStore = useUserStore()

  // 获取当前用户的 shop_id
  const currentShopId = computed(() => userStore.userInfo?.shop_id)

  // 错误信息
  const errorMsg = ref<string>('')

  // 佣金概览
  const summary = ref<MyCommissionSummary>({
    main_balance: 0,
    total_commission: 0,
    available_commission: 0,
    frozen_commission: 0,
    withdrawing_commission: 0,
    withdrawn_commission: 0
  })

  // 加载佣金概览
  const loadSummary = async () => {
    if (!currentShopId.value) {
      errorMsg.value = '当前账号未关联店铺'
      return
    }

    try {
      // 调用 fund-summary 接口，通过 shop_id 过滤获取自己的数据
      const res = await CommissionService.getShopFundSummary({
        page: 1,
        pageSize: 1
      })
      if (res.code === 0 && res.data.items && res.data.items.length > 0) {
        // 从结果中找到当前用户的店铺数据
        const myShopData = res.data.items.find(item => item.shop_id === currentShopId.value)
        if (myShopData) {
          summary.value = {
            main_balance: myShopData.main_balance || 0,
            total_commission: myShopData.total_commission,
            available_commission: myShopData.available_commission,
            frozen_commission: myShopData.frozen_commission,
            withdrawing_commission: myShopData.withdrawing_commission,
            withdrawn_commission: myShopData.withdrawn_commission
          }
          errorMsg.value = ''
        } else {
          errorMsg.value = '未找到佣金数据'
        }
      } else {
        errorMsg.value = res.msg || '获取佣金概览失败'
      }
    } catch (error: any) {
      console.error('获取佣金概览失败:', error)
      // 尝试从错误响应中提取 msg
      if (error?.response?.data?.msg) {
        errorMsg.value = error.response.data.msg
      } else {
        errorMsg.value = '获取佣金概览失败'
      }
    }
  }

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

<style lang="scss" scoped>
  .commission-summary-widget {
    &.error-state {
      .error-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: var(--el-text-color-secondary);

        p {
          margin-top: 12px;
          font-size: 14px;
          color: var(--el-text-color-primary);
        }
      }
    }

    .stats-container {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .stat-card-wrapper {
      flex: 1;
      min-width: 180px;

      :deep(.el-card__body) {
        padding: 16px;
      }
    }

    .stat-card {
      display: flex;
      gap: 12px;
      align-items: center;

      .stat-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        font-size: 20px;
        color: white;
        border-radius: 8px;
      }

      .stat-content {
        flex: 1;
        min-width: 0;

        .stat-label {
          margin-bottom: 4px;
          font-size: 12px;
          color: var(--el-text-color-secondary);
          white-space: nowrap;
        }

        .stat-value {
          overflow: hidden;
          font-size: 18px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  @media (width <= 1400px) {
    .commission-summary-widget {
      .stats-container {
        gap: 12px;
      }

      .stat-card-wrapper {
        min-width: 160px;
      }

      .stat-card {
        .stat-content {
          .stat-value {
            font-size: 16px;
          }
        }
      }
    }
  }

  @media (width <= 1200px) {
    .commission-summary-widget {
      .stat-card-wrapper {
        flex: 1 1 calc(33.333% - 12px);
        min-width: 200px;
      }
    }
  }

  @media (width <= 768px) {
    .commission-summary-widget {
      .stats-container {
        gap: 12px;
      }

      .stat-card-wrapper {
        flex: 1 1 calc(50% - 8px);
        min-width: 150px;
      }
    }
  }

  @media (width <= 480px) {
    .commission-summary-widget {
      .stat-card-wrapper {
        flex: 1 1 100%;
      }
    }
  }
</style>
