<script setup lang="ts">
import { guid } from '@/utils/common'
import { onMounted, reactive } from 'vue';
interface BorderBoxProps {
  padding:number[],
  slice:number[],
  width:number[],
  source: any
}

// 生成唯一ID
const id = `border-box-${guid()}`;

const {padding, source, slice, width} = defineProps<BorderBoxProps>();

const onLoadBorder = () => {
  const border = document.getElementById(id) as HTMLElement
  border.style.borderImageSource = `url(${source})`
  border.style.borderImageSlice = ` ${slice[0]} ${slice[1]} ${slice[2]} ${slice[3]}`
  border.style.borderImageWidth = `${width[0]}vw ${width[1]}vw ${width[2]}vw ${width[3]}vw`
  border.style.borderWidth = `${width[0]}vw ${width[1]}vw ${width[2]}vw ${width[3]}vw`
}

onMounted(() => onLoadBorder()) 
</script>

<template>
  <div ref="bordeBoxBorder" class="border-box-container">
      <div class="border-box-border" :id="id">
        <slot></slot>
       </div>
  </div>
</template>

<style scoped lang="less">
.border-box-container {
    position: relative;
    width: 100%;
    height: 100%;
    .border-box-border {
        border: 1vh solid transparent;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}
</style>