<template>
  <div  class="go-title-04">
    <img :width="w" :height="h" src="/src/assets/images/chart/decorates/wlpt.png" />
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { getUUID } from '@/utils'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  dur,
  borderTitle,
  borderTitleColor,
  borderTitleSize,
  borderTitleHeight,
  borderTitleWidth,
  backgroundColor
} = toRefs(props.chartConfig.option)
</script>

<style lang="scss" scoped>
@include go('title-04') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 

  svg {
    position: absolute;
    z-index: -1;
  }

  .text {
    color: v-bind('borderTitleColor');
    font-size: v-bind('borderTitleSize+"px"');
  }
}
</style>
