<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Page, useVbenModal } from "@vben/common-ui";

import { Card, Col, Image, Row, Spin } from 'ant-design-vue';

import { getSelfMyInfoApi } from '#/views/business/clinic-salesperson/api';

import QrCodePreview from '#/views/business/store/settings/components/SalespersonQrCodePreview.vue';
import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
  connectedComponent: QrCodePreview,
});

const loading = ref(true);
const info = ref<any>(null);

onMounted(async () => {
  try {
    info.value = await getSelfMyInfoApi();
  } finally {
    loading.value = false;
  }
});


function openQrCode(item: any) {
  QrCodePreviewApi.setData({ values: item });
  QrCodePreviewApi.open();
}
</script>

<template>
  <Page auto-content-height title="我的收益">
    <QrCodePreviewModal />
    <Spin :spinning="loading">
      <template v-if="info">
        <Card class="mb-4" title="基本信息">
          <p>姓名：{{ info.salesperson?.nick_name }}</p>
          <p>手机：<SensitiveText :record="info.salesperson" field="phone" /></p>
          <p>所属诊所：{{ info.store?.name }}</p>
          <div v-if="info.qr_code" class="mt-3">
            <p class="mb-2">推广二维码</p>
            <Image :src="info.qr_code" :preview="false" :width="160" @click="openQrCode({
              qr_code: {
                qr_code: info.qr_code,
                store: info.store,
              },
              type: 'salesperson',
              nick_name: info.salesperson?.nick_name,
            })" />
          </div>
        </Card>

        <Row :gutter="16">
          <Col :span="6">
            <Card>
              <div class="text-gray-500">累计获客</div>
              <div class="text-2xl font-semibold text-blue-600">
                {{ info.stats?.user_number ?? 0 }}
              </div>
            </Card>
          </Col>
          <Col :span="6">
            <Card>
              <div class="text-gray-500">累计服务费</div>
              <div class="text-2xl font-semibold">
                ¥{{ info.stats?.money ?? '0.00' }}
              </div>
            </Card>
          </Col>
          <Col :span="6">
            <Card>
              <div class="text-gray-500">待结算</div>
              <div class="text-2xl font-semibold text-orange-600">
                ¥{{ info.stats?.pending_amount ?? '0.00' }}
              </div>
            </Card>
          </Col>
          <Col :span="6">
            <Card>
              <div class="text-gray-500">已结算</div>
              <div class="text-2xl font-semibold text-green-600">
                ¥{{ info.stats?.settled_amount ?? '0.00' }}
              </div>
            </Card>
          </Col>
        </Row>
      </template>
    </Spin>
  </Page>
</template>
