<template>
  <div class="decorative-panel" :class="customClass" :style="customStyle">
    <!-- 四个角的装饰图片 -->
    <img
      v-if="showCorners"
      class="decorative-panel__corner decorative-panel__corner--top-left"
      :src="topLeftImg"
      alt=""
      aria-hidden="true"
    />
    <img
      v-if="showCorners"
      class="decorative-panel__corner decorative-panel__corner--top-right"
      :src="topRightImg"
      alt=""
      aria-hidden="true"
    />
    <img
      v-if="showCorners"
      class="decorative-panel__corner decorative-panel__corner--bottom-left"
      :src="bottomLeftImg"
      alt=""
      aria-hidden="true"
    />
    <img
      v-if="showCorners"
      class="decorative-panel__corner decorative-panel__corner--bottom-right"
      :src="bottomRightImg"
      alt=""
      aria-hidden="true"
    />

    <!-- 主内容插槽 -->
    <slot />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 导入装饰图片资源
import topLeftImg from '../../assets/images/Tooltip/topLeft.png'
import topRightImg from '../../assets/images/Tooltip/topRight.png'
import bottomLeftImg from '../../assets/images/Tooltip/bottomLeft.png'
import bottomRightImg from '../../assets/images/Tooltip/bottomRight.png'

/**
 * 通用装饰面板组件
 *
 * 用于为弹窗、卡片等容器添加四角装饰效果
 * 支持自定义角装饰尺寸、偏移量、背景等
 */
const props = defineProps({
  /**
   * 自定义 CSS 类名
   * 用于扩展样式
   */
  customClass: {
    type: String,
    default: ''
  },

  /**
   * 是否显示四角装饰
   */
  showCorners: {
    type: Boolean,
    default: true
  },

  /**
   * 角装饰的尺寸（像素或 CSS 单位字符串）
   * 例如：'30px', 'clamp(20px, 2vw, 40px)'
   */
  cornerSize: {
    type: String,
    default: 'clamp(30px, 3vw, 50px)'
  },

  /**
   * 角装饰的偏移量（百分比）
   * 控制装饰探出容器边框的程度
   * 例如：-25 表示向外偏移 25%（装饰探出边框）
   */
  cornerOffset: {
    type: Number,
    default: -25
  },

  /**
   * 背景图片路径
   * 如果提供，将使用图片背景；否则使用透明背景
   */
  backgroundImage: {
    type: String,
    default: ''
  },

  /**
   * 背景颜色
   * 可以与背景图片叠加使用
   */
  backgroundColor: {
    type: String,
    default: ''
  }
})

/**
 * 计算容器的内联样式
 */
const customStyle = computed(() => {
  const style = {}

  // 设置背景
  if (props.backgroundImage && props.backgroundColor) {
    style.background = `url('${props.backgroundImage}') no-repeat center center, ${props.backgroundColor}`
    style.backgroundSize = 'cover'
  } else if (props.backgroundImage) {
    style.background = `url('${props.backgroundImage}') no-repeat center center`
    style.backgroundSize = 'cover'
  } else if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor
  }

  // 设置 CSS 变量供子元素使用
  style['--corner-size'] = props.cornerSize
  style['--corner-offset'] = `${props.cornerOffset}%`

  return style
})
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

/**
 * 装饰面板容器
 * 作为一个相对定位的容器，让角装饰可以绝对定位
 */
.decorative-panel {
  position: relative;
}

/**
 * 四角装饰图片
 * 使用 CSS 变量控制尺寸和偏移，方便通过 props 自定义
 */
.decorative-panel__corner {
  position: absolute;
  // width: var(--corner-size, clamp(30px, 3vw, 50px));
  // height: var(--corner-size, clamp(30px, 3vw, 50px));
  pointer-events: none; // 装饰元素不响应鼠标事件
  z-index: 10; // 确保显示在内容之上
  object-fit: contain;

  // 左上角
  &--top-left {
    top: 0;
    left: 0;
    // transform: translate(var(--corner-offset, -25%), var(--corner-offset, -25%));
  }

  // 右上角
  &--top-right {
    top: 0;
    right: 0;
    // transform: translate(calc(-1 * var(--corner-offset, -25%)), var(--corner-offset, -25%));
  }

  // 左下角
  &--bottom-left {
    bottom: 0;
    left: 0;
    // transform: translate(var(--corner-offset, -25%), calc(-1 * var(--corner-offset, -25%)));
  }

  // 右下角
  &--bottom-right {
    bottom: 0;
    right: 0;
    // transform: translate(calc(-1 * var(--corner-offset, -25%)), calc(-1 * var(--corner-offset, -25%)));
  }
}
</style>
