<script setup lang="ts">
import { Page } from '@vben/common-ui';

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

import CustomerProfilePanel from './components/CustomerProfilePanel.vue';
import { useCustomerProfilePage } from './composables/useCustomerProfilePage';

const { emptyDescription, isProfileLoading, isStoreLoading, profile } =
  useCustomerProfilePage();
</script>

<template>
  <Page title="客户画像" content-class="page-customer-profile">
    <Spin :spinning="isStoreLoading || isProfileLoading">
      <div v-if="profile" class="cp-page">
        <CustomerProfilePanel :profile="profile" />
      </div>

      <div v-else class="cp-empty">
        <Empty :description="emptyDescription" />
      </div>
    </Spin>
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>
