<template>
  <div class="title whitespace-nowrap overflow-hidden">
    <div class="cursor-pointer text-ellipsis overflow-hidden select-none">
      <slot></slot>
    </div>
    <div v-if="!$slots.title && title" class="overflow-hidden">
      <div class="flex overflow-hidden">
        <div
          v-for="(t, i) in title"
          :key="i"
          class="flex items-center"
          :class="{
            'overflow-hidden': i === title.length - 1,
          }"
        >
          <div
            :class="{
              grayTitle: i !== title.length - 1,
              'overflow-hidden text-ellipsis': i === title.length - 1,
            }"
            class="cursor-pointer select-none"
            @click="
              () => {
                if ('routerName' in t) {
                  $router.push({
                    name: t.routerName,
                    query: t.query,
                  });
                }
              }
            "
          >
            {{ t.name }}
          </div>
          <Icon
            icon-name="iconjinru"
            v-if="i !== title.length - 1"
            class="mx-2"
          ></Icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon from "./Icon/index.vue";

type TuplePush<T extends any[], X> = [...T, X];

type tTitle = TuplePush<
  {
    name: string;
    routerName: string;
    query?: {
      [key: string]: string;
    };
  }[],
  {
    name: string;
  }
>;

defineProps<{
  title?: tTitle;
}>();
</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #191919;
  line-height: 37px;
  height: 37px;
  letter-spacing: 1px;
}
.grayTitle {
  color: var(--sy-gray);
}
</style>
