<template>
  <clinic-salesperson-page-layout title="我的收益" :show-back="true">
    <view class="page">
      <view class="card" v-for="item in cards" :key="item.label">
        <text class="label">{{ item.label }}</text>
        <text class="value">{{ item.value }}</text>
      </view>
    </view>
  </clinic-salesperson-page-layout>
</template>

<script>
import ClinicSalespersonPageLayout from '@/subPackages/sub_clinic_salesperson/components/clinic-salesperson-page-layout.vue'
import { getClinicSalespersonMyInfo } from '@/api/clinicSalesperson.js'

export default {
  components: { ClinicSalespersonPageLayout },
  data() {
    return { cards: [] }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const wrap = await getClinicSalespersonMyInfo()
      if (!wrap || !wrap.ok) return
      const stats = wrap.data?.stats || {}
      this.cards = [
        { label: '累计服务费', value: `¥${stats.money || '0.00'}` },
        { label: '待结算', value: `¥${stats.pending_amount || '0.00'}` },
        { label: '已结算', value: `¥${stats.settled_amount || '0.00'}` },
        { label: '累计获客', value: `${stats.user_number || 0} 人` },
      ]
    },
  },
}
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 32rpx; margin-bottom: 20rpx; display: flex; justify-content: space-between; }
.label { color: #666; font-size: 28rpx; }
.value { font-size: 32rpx; font-weight: 600; color: #333; }
</style>
