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

import { useVbenModal } from '@vben/common-ui';

import { Avatar, Descriptions, Spin } from 'ant-design-vue';

import { getPromoterDetailApi } from '#/views/system/store-input/api';
import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';

type PromoterDetail = {
  id: number;
  nick_name: string;
  avatar: string;
  code: string;
  phone: string;
  role_name: string;
  clinic_input_count: number;
  pharmacy_input_count: number;
};

const loading = ref(false);
const detail = ref<PromoterDetail | null>(null);

const [Modal, modalApi] = useVbenModal({
  title: '业务员详情',
  class: 'w-[480px]',
  footer: false,
  onOpenChange(isOpen) {
    if (!isOpen) {
      detail.value = null;
      return;
    }
    const data = modalApi.getData<{ id?: number; code?: string }>();
    loadDetail(data?.id, data?.code);
  },
});

async function loadDetail(id?: number, code?: string) {
  loading.value = true;
  try {
    detail.value = await getPromoterDetailApi({ id, code });
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <Modal>
    <Spin :spinning="loading">
      <div v-if="detail" class="promoter-detail">
        <div class="promoter-detail__header">
          <Avatar
            v-if="resolveAvatarUrl(detail.avatar)"
            :src="resolveAvatarUrl(detail.avatar)"
            :size="64"
          />
          <Avatar v-else :size="64">{{ (detail.nick_name || '?').charAt(0) }}</Avatar>
          <div class="promoter-detail__title">{{ detail.nick_name || '-' }}</div>
          <div class="promoter-detail__role">{{ detail.role_name || '业务员' }}</div>
        </div>
        <Descriptions bordered :column="1" size="small" class="promoter-detail__desc">
          <Descriptions.Item label="推广码">{{ detail.code || '-' }}</Descriptions.Item>
          <Descriptions.Item label="手机号">{{ detail.phone || '-' }}</Descriptions.Item>
          <Descriptions.Item label="录入诊所">
            {{ detail.clinic_input_count ?? 0 }} 家
          </Descriptions.Item>
          <Descriptions.Item label="录入药店">
            {{ detail.pharmacy_input_count ?? 0 }} 家
          </Descriptions.Item>
        </Descriptions>
      </div>
    </Spin>
  </Modal>
</template>

<style scoped>
.promoter-detail__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.promoter-detail__title {
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
}

.promoter-detail__role {
  font-size: 13px;
  color: #86909c;
}

.promoter-detail__desc {
  margin-top: 8px;
}

.dark .promoter-detail__title {
  color: #f3f4f6;
}

.dark .promoter-detail__role {
  color: #9ca3af;
}
</style>
