<template>
  <a-button v-if="type === 'Button'" type="text" size="small" @click="onClick">
    <slot>详情</slot>
  </a-button>
  <a-link v-else class="link" :hoverable="false" @click="onClick">
    <a-typography-text type="primary" :style="textStyle" :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;
  }>(),
  {
    name: '',
    type: 'Button',
    params: undefined,
    showTooltip: true,
  }
);

const textStyle = { marginBottom: 0 };

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;
}
</style>