<template>
  <clinic-salesperson-page-layout :title="pageTitle" :show-back="true">
    <view class="page">
      <view class="summary">
        <view class="sum-row">
          <text class="label">邀请分成比例</text>
          <text class="val">{{ summary.inviter_split }}%</text>
        </view>
        <view class="sum-row">
          <text class="label">累计带来收益</text>
          <text class="val amount">¥{{ summary.invite_total_amount }}</text>
        </view>
        <view class="sum-row">
          <text class="label">待结算 / 已结算</text>
          <text class="val">¥{{ summary.invite_pending_amount }} / ¥{{ summary.invite_settled_amount }}</text>
        </view>
      </view>

      <view v-if="!list.length && !loading" class="empty">暂无收益明细</view>
      <view v-for="item in list" :key="item.id" class="row">
        <view class="top">
          <text class="order">{{ item.order_no }}</text>
          <text class="status">{{ item.settlement_id > 0 ? '已结算' : '待结算' }}</text>
        </view>
        <text class="patient">{{ item.patient_name }} {{ item.patient_mobile }}</text>
        <text class="drug">{{ item.drug_name }} ×{{ item.qty }}</text>
        <view class="bottom">
          <text class="amount">¥{{ item.commission_amount }}</text>
          <text class="time">{{ item.created_at }}</text>
        </view>
      </view>
    </view>
  </clinic-salesperson-page-layout>
</template>

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

export default {
  components: { ClinicSalespersonPageLayout },
  data() {
    return {
      sourceSalespersonId: 0,
      nickName: '',
      summary: {
        inviter_split: '0.00',
        invite_total_amount: '0.00',
        invite_pending_amount: '0.00',
        invite_settled_amount: '0.00',
      },
      list: [],
      loading: false,
    }
  },
  computed: {
    pageTitle() {
      return this.nickName ? `${this.nickName} 的收益明细` : '收益明细'
    },
  },
  onLoad(options) {
    this.sourceSalespersonId = Number(options.source_salesperson_id || 0)
    this.nickName = decodeURIComponent(options.nick_name || '')
    this.summary = {
      inviter_split: options.inviter_split || '0.00',
      invite_total_amount: options.invite_total_amount || '0.00',
      invite_pending_amount: options.invite_pending_amount || '0.00',
      invite_settled_amount: options.invite_settled_amount || '0.00',
    }
    this.loadList()
  },
  methods: {
    async loadList() {
      if (this.sourceSalespersonId <= 0) return
      this.loading = true
      try {
        const wrap = await getClinicSalespersonCommissionList({
          page: 1,
          pageSize: 100,
          commission_source: 1,
          source_salesperson_id: this.sourceSalespersonId,
        })
        if (wrap && wrap.ok) this.list = wrap.data?.items || []
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.summary {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-radius: 12rpx;
  padding: 24rpx; margin-bottom: 20rpx;
}
.sum-row { display: flex; justify-content: space-between; margin-bottom: 12rpx; font-size: 26rpx; }
.sum-row:last-child { margin-bottom: 0; }
.label { color: #666; }
.val { color: #333; font-weight: 500; }
.val.amount { color: #4db6a8; font-weight: 600; }
.empty { text-align: center; color: #999; padding: 80rpx 0; }
.row { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
.top { display: flex; justify-content: space-between; align-items: center; }
.order { font-size: 26rpx; font-weight: 600; }
.status { font-size: 22rpx; color: #999; }
.patient { display: block; font-size: 24rpx; color: #666; margin-top: 8rpx; }
.drug { display: block; font-size: 24rpx; color: #666; margin-top: 4rpx; }
.bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 12rpx; }
.amount { font-size: 28rpx; color: #4db6a8; font-weight: 600; }
.time { font-size: 22rpx; color: #999; }
</style>
