<template>
    <div class="go-border-06">
      <svg xmlns="http://www.w3.org/2000/svg" :width="w" :height="h">
       
      </svg>
      <span class="text">{{ dataset }}</span>
    </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 id = getUUID()
  const { w, h } = toRefs(props.chartConfig.attr)
  const { colors, dataset, textSize,textFlod } = toRefs(props.chartConfig.option)
  </script>
  
  <style lang="scss" scoped>
  @include go('border-06') {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  
    svg {
      position: absolute;
      z-index: -1;
    }
  
    .fill {
      fill: v-bind('colors[0]');
    }
    .fill-none {
      fill: none;
    }
    .stroke {
      stroke: v-bind('colors[1]');
    }
  
    .text {
      font-size: v-bind('textSize+"px"');
      font-weight: v-bind('textFlod');
      background: linear-gradient(to bottom, v-bind('colors[0]'), v-bind('colors[1]')); 
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
      background-clip: text; /* 标准语法 */
      color: transparent; /* 标准语法 */
    }
  }
  </style>
  