<template>
  <a-button v-if="type === 'Button'" type="text" size="small" :disabled="disabled as boolean" @click="onClick">
    <slot>详情</slot>
  </a-button>
  <a-link v-else class="link" :disabled="disabled as boolean" :hoverable="false" @click="onClick">
    <a-typography-text
      type="primary"
      :disabled="disabled"
      style="margin-bottom: 0 !important"
      :ellipsis="{ rows: 1, showTooltip: showTooltip }"
    >
      <slot>详情</slot>
    </a-typography-text>
  </a-link>
</template>

<script lang="ts" setup>
  import { RouteParamsRaw, useRouter } from 'vue-router';
  import { AnyObject } from '@/types/global';

  const props = withDefaults(
    defineProps<{
      name?: string;
      params?: AnyObject;
      type?: 'Button' | 'link';
      showTooltip?: boolean;
      disabled?: boolean;
    }>(),
    {
      name: '',
      type: 'Button',
      params: undefined,
      showTooltip: true,
      disabled: false,
    }
  );

  const router = useRouter();
  const onClick = () => {
    router.push({
      name: props.name,
      params: (props.params as RouteParamsRaw) || {},
    });
  };
</script>

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

  .link:hover {
    cursor: pointer;
  }
</style>