<template>
  <Link v-if="user" :hoverable="false" class="link" @click.stop="onClick">
    <TypographyParagraph type="primary" class="name" :ellipsis="{ rows: 1, showTooltip }">
      <slot>{{ fullName }}</slot>
    </TypographyParagraph>
  </Link>
</template>

<script lang="ts" setup>
  import { computed, toRefs } from 'vue';
  import { useRouter } from 'vue-router';
  import { BaseUser } from '@/utils/model';
  import { Link, TypographyParagraph } from '@arco-design/web-vue';

  type PropType = { user?: BaseUser; showTooltip?: boolean };

  const props = withDefaults(defineProps<PropType>(), { showTooltip: true });
  const { user } = toRefs(props);
  const router = useRouter();

  const fullName = computed(() => `${user?.value?.nick_name}`);

  const onClick = () => {
    if (user?.value?.identity === 1) {
      return router.push({ name: 'user-singer-show', params: { id: user?.value?.id } });
    }
    if ([2, 3].includes(Number(user?.value?.identity))) {
      return router.push({ name: 'user-business-show', params: { id: user?.value?.id } });
    }
    return router.push({ name: 'user-register-show', params: { id: user?.value?.id } });
  };
</script>

<style lang="less" scoped>
  .link {
    display: block !important;
    width: 100%;
    padding: 1px 0;

    .name {
      margin-bottom: 0 !important;
      min-width: 26px;
      width: 100%;
    }

    :hover {
      cursor: pointer !important;
    }
  }
</style>