<script lang="ts" setup>
import { getImg } from "@/utils";
import { titleProps } from "./title";

defineProps(titleProps);
</script>

<template>
  <div
    class="w-full relative h-[44px] pl-6 bg-[100%,27px] bg-no-repeat tracking-widest"
    :style="{
      backgroundImage: `url(${getImg('title/index.png')})`,
    }"
  >
    <span
      v-if="text"
      class="absolute top-2 left-14 inline-block font-bold text-[#C1D8E3] [text-shadow:0px_2px_2px_#333333]"
    >
      {{ text }}
    </span>
    <span v-else class="absolute top-2 right-16 inline-flex items-end whitespace-nowrap">
      <span class="text-[#316B84] text-xs mr-2">{{
        EnTitle.toUpperCase()
      }}</span>
      <span class="font-bold text-[#ffffff] [text-shadow:0px_2px_2px_#333333]">
        {{ title }}</span
      >
    </span>
    <span
      v-show="!showIcon"
      class="absolute text-lg right-[28px] top-2 font-bold [text-shadow:0px_2px_2px_#333333]"
      >{{ rightText }}</span
    >
    <span
      v-show="showIcon"
      class="absolute text-lg right-[21px] top-2 font-bold [text-shadow:0px_2px_2px_#333333]"
    >
      <img :src="rightIcon" alt="" />
    </span>
    <slot></slot>
    <div class="absolute right-0 top-0">
      <slot name="right"></slot>
    </div>
  </div>
</template>
