<template>
  <div class="points-page">
    <div class="overview">
      <el-card shadow="never" class="summary-card">
        <div class="summary-item">
          <div class="num">{{ summary.totalPoints ?? 0 }}</div>
          <div class="lbl">{{ $t('points.title') }}</div>
        </div>
        <div class="summary-divider" />
        <div class="summary-item">
          <div class="num">{{ summary.rewardCount ?? 0 }}</div>
          <div class="lbl">{{ $t('points.rewards') }}</div>
        </div>
      </el-card>
    </div>

    <el-card shadow="never" class="detail-card">
      <template #header><span class="title">{{ $t('points.detail') }}</span></template>
      <el-table :data="details" v-loading="loading" border stripe>
        <el-table-column :label="$t('points.pointsSource')" prop="source" width="140" />
        <el-table-column :label="$t('points.pointsOrder')" prop="orderNo" width="160" />
        <el-table-column :label="$t('points.pointsChange')" width="120">
          <template #default="{ row }">
            <span :class="['change', row.changeAmount >= 0 ? 'plus' : 'minus']">
              {{ row.changeAmount >= 0 ? "+" : "" }}{{ row.changeAmount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('points.pointsDesc')" prop="description" min-width="200" />
        <el-table-column :label="$t('points.pointsTime')" prop="createdAt" width="170" />
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="loadDetails"
          @current-change="loadDetails"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getPoints, getPointsDetails } from "@/service/modular/hospital";

const summary = ref({});
const details = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);

const loadSummary = async () => {
  summary.value = await getPoints();
};

const loadDetails = async () => {
  loading.value = true;
  try {
    const res = await getPointsDetails({ page: page.value, pageSize: pageSize.value });
    details.value = res?.list || res || [];
    total.value = res?.total || details.value.length;
  } finally {
    loading.value = false;
  }
};

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

<style scoped lang="scss">
.points-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.overview .summary-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 28px;
  }
  .summary-item {
    text-align: center;
    .num {
      font-size: 32px;
      font-weight: 700;
      color: #5b8ff9;
    }
    .lbl {
      margin-top: 8px;
      color: #909399;
      font-size: 13px;
    }
  }
  .summary-divider {
    width: 1px;
    height: 60px;
    background: #ebeef5;
  }
}
.detail-card .title {
  font-size: 16px;
  font-weight: 600;
}
.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.change {
  font-weight: 600;
  &.plus {
    color: #67c23a;
  }
  &.minus {
    color: #f56c6c;
  }
}
</style>
