<script lang="ts" setup>
  import { PageHeader } from 'ant-design-vue';
  import { computed, unref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { decode } from '../..';
  import { RollbackOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  defineProps<{ widgetNumber: number }>();

  const ROUTE = useRoute();
  const ROUTER = useRouter();
  const { t } = useI18n();

  const getIsSharePage = computed(() => {
    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
  });

  const getDataBoardName = computed(() => {
    return decode((ROUTE.params as { boardName: string }).boardName || '');
  });

  const handleBack = () => {
    if (unref(getIsSharePage)) return;
    ROUTER.go(-1);
  };
</script>

<template>
  <PageHeader v-if="!getIsSharePage" class="pagerheader !px-5 !pt-5 !pb-0 !dark:bg-dark-700">
    <template #title>
      <div class="flex items-center h-18 px-4">
        <RollbackOutlined
          v-if="!getIsSharePage"
          class="mr-3 cursor-pointer text-2xl"
          @click="handleBack"
        />
        <span class="text-lg text-gray-700 dark:text-light-50">{{ getDataBoardName }}</span>
      </div>
    </template>
    <template #extra>
      <div class="w-full h-full flex justify-center items-center px-4">
        <slot></slot>
      </div>
    </template>
    <div>
      <span class="mr-3 text-sm text-gray-500">{{ t('visual.board.createdComponent') }}:</span>
      <span class="text-blue-500"> {{ widgetNumber }} {{ t('visual.board.boardNum') }}</span>
    </div>
  </PageHeader>
</template>

<style lang="less" scoped>
  .pagerheader {
    :deep(.ant-page-header-heading) {
      @apply bg-light-50 dark:bg-dark-900;
    }
  }
</style>