<script setup lang="ts">
import squareIcon from '../../assets/images/icons/square.svg'
import '@src/assets/styles/windowSquare.css'

defineProps<{
  seatWinds: {
    top: string
    right: string
    bottom: string
    left: string
  }
  activePosition?: 'top' | 'right' | 'bottom' | 'left' | ''
}>()
</script>

<template>
  <div class="wind-square">
    <img class="square-base" :src="squareIcon" alt="" />

    <!-- 四个三角形高亮区域 -->
    <div class="quadrant quadrant-top" :class="{ active: activePosition === 'top' }"></div>
    <div class="quadrant quadrant-right" :class="{ active: activePosition === 'right' }"></div>
    <div class="quadrant quadrant-bottom" :class="{ active: activePosition === 'bottom' }"></div>
    <div class="quadrant quadrant-left" :class="{ active: activePosition === 'left' }"></div>

    <div class="diagonal diagonal-a"></div>
    <div class="diagonal diagonal-b"></div>

    <span class="wind-slot wind-top">
      <img class="wind-icon" :src="seatWinds.top" alt="上方位风" />
    </span>
    <span class="wind-slot wind-right">
      <img class="wind-icon" :src="seatWinds.right" alt="右方位风" />
    </span>
    <span class="wind-slot wind-bottom">
      <img class="wind-icon" :src="seatWinds.bottom" alt="下方位风" />
    </span>
    <span class="wind-slot wind-left">
      <img class="wind-icon" :src="seatWinds.left" alt="左方位风" />
    </span>
  </div>
</template>