<script setup lang="ts">
import { $font_color } from '@/styles/variate'
import { px2vh } from '@/utils'

const props = withDefaults(
  defineProps<{
    text: string | number
    size?: number | string
    reverse?: boolean // 颜色反转
    offset?: string | number // 外边偏移
    border?: string | number
    color?: string
    borderColor?: string
    space?: string | number // 间距
  }>(),
  {
    text: '',
    size: 48,
    reverse: false,
    offset: 0,
    border: 8,
    color: '#fff',
    borderColor: $font_color,
    space: 0,
  },
)

const _size = computed(() => px2vh(props.size))
const _offset = computed(() => `-${px2vh(props.offset)}`)
const _border = computed(() => px2vh(props.border))
const _space = computed(() => px2vh(props.space))
</script>

<template>
  <span
    v-if="text"
    :class="{
      'x-line-font': true,
      'title-outline': true,
      'is-reverse': reverse,
    }"
    :data-text="text"
  >
    {{ text }}
  </span>
</template>

<style lang="scss" scoped>
.title-outline {
  font-family: $font-special;
  font-size: v-bind(_size);
  line-height: 1.5em;
  position: relative;
  z-index: 0;
  color: v-bind(color);
  text-shadow: 0 0.5vh 0.5vh rgba(0, 0, 0, 0.2);
  letter-spacing: v-bind(_space);
  &::after {
    content: attr(data-text);
    -webkit-text-stroke: v-bind(_border) v-bind(borderColor);
    position: absolute;
    left: 0;
    top: v-bind(_offset);
    z-index: -1;
  }

  &.is-reverse {
    color: $font-color;
    &::after {
      -webkit-text-stroke-color: #fff;
    }
  }
}
</style>
