<script setup lang="ts">
interface Props {
  char?: string
  width?: string | number
  height?: string | number
  fontSize?: string | number
  showChar?: boolean
}

const _props = withDefaults(defineProps<Props>(), {
  char: '',
  width: '10.8rem', // 对应 w-42 (42 * 0.25rem = 10.5rem)
  height: '9.5rem', // 对应 h-38 (38 * 0.25rem = 9.5rem)
  // fontSize: '3.25rem', // 对应 text-4xl
  showChar: true,
})
</script>

<template>
  <div
    class="relative flex select-none items-center justify-center border-2 border-red-500 bg-white"
    :style="{ width: typeof width === 'number' ? `${width}px` : width, height: typeof height === 'number' ? `${height}px` : height }"
  >
    <!-- 田字格背景线 -->
    <div class="pointer-events-none absolute inset-0 z-0 h-full w-full">
      <!-- 横向虚线 -->
      <div class="absolute left-0 top-1/2 h-[1px] w-full border-t border-red-400 border-dashed opacity-60" />
      <!-- 纵向虚线 -->
      <div class="absolute left-1/2 top-0 h-full w-[1px] border-l border-red-400 border-dashed opacity-60" />
      <!-- 对角线 -->
      <svg width="100%" height="100%" class="absolute inset-0 opacity-60">
        <line x1="0" y1="0" x2="100%" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
        <line x1="100%" y1="0" x2="0" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
      </svg>
    </div>
    <!-- 文字内容 -->
    <span
      v-if="showChar"
      class="z-10 text-6xl text-gray-800 font-bold font-sans"
    >
      {{ char }}
    </span>
    <slot />
  </div>
</template>

<style scoped>
</style>
