<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>小标题-三站覆盖面积@2x</title>
      <defs>
          <linearGradient x1="97.3499803%" y1="112.35863%" x2="0%" y2="112.35863%" :id="`1-${boxId}`">
              <stop :stop-color="colors[0]" stop-opacity="0.1742622" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`2-${boxId}`">
              <stop :stop-color="colors[2]" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <polygon id="path-3" points="10.9822114 0 112.704666 0 119.46341 11.2799213 173.1989 11.2799213 270.2884 11.2799213 270.2884 38.3517324 139.186577 38.3517324 0 38.3517324 0 11.1814815"></polygon>
          <radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="translate(0.5, 0), scale(0.243, 1), rotate(90), scale(1, 2.7755), translate(-0.5, -0)" :id="`5-${boxId}`">
              <stop :stop-color="colors[3]" offset="0%"></stop>
              <stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
          </radialGradient>
          <filter x="-3.0%" y="-12.5%" width="106.1%" height="124.9%" filterUnits="objectBoundingBox" :id="`6-${boxId}`">
              <feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
          </filter>
          <linearGradient x1="27.2222213%" y1="49.528366%" x2="102.926609%" y2="50.2892453%" :id="`7-${boxId}`">
              <stop :stop-color="colors[5]" offset="0%"></stop>
              <stop :stop-color="colors[6]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`8-${boxId}`">
              <stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[8]" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`9-${boxId}`">
              <stop :stop-color="colors[9]" stop-opacity="0" offset="0%"></stop>
              <stop stop-color="#1CC370" offset="100%"></stop>
          </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智览-切图版" transform="translate(-1492, -409)">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="A" transform="translate(1502.5, 113)">
                      <g id="标题模块--右侧2" transform="translate(0, 318)">
                          <g id="小标题-三站覆盖面积" transform="translate(1.5, 0)">
                              <g id="小标题">
                                  <polygon id="矩形" :fill="`url(#1-${boxId})`" points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"></polygon>
                                  <g id="椭圆形">
                                      <mask id="mask-4" fill="white">
                                          <use xlink:href="#path-3"></use>
                                      </mask>
                                      <use id="蒙版" :fill="`url(#2-${boxId})`" xlink:href="#path-3"></use>
                                      <ellipse :fill="`url(#5-${boxId})`" :filter="`url(#6-${boxId})`" mask="url(#mask-4)" cx="180.697047" cy="25.5190419" rx="214" ry="52"></ellipse>
                                  </g>
                                  <polyline id="路径" :stroke="`url(#7-${boxId})`" stroke-width="0.616921269" points="0 25.7188334 0 11.1814815 11.0190925 0 177.866737 0 188.53316 13.2759293 264.809581 13.2759293"></polyline>
                                  <polygon id="矩形" :fill="`url(#8-${boxId})`" points="118.3 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"></polygon>
                                  <polygon id="路径-11" fill="#EBBE10" points="0 0 0 7.33194884 7.88666648 0"></polygon>
                                  <g id="编组-2" opacity="0.691816057" transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)" fill="#00C157">
                                      <polygon id="矩形" opacity="0.558652605" points="46.5583547 0 50.945502 0 46.48422 5.0945502 42.0970727 5.0945502"></polygon>
                                      <polygon id="矩形备份" opacity="0.385865711" points="38.2461939 0 42.6333411 0 38.1720591 5.0945502 33.7849118 5.0945502"></polygon>
                                      <polygon id="矩形备份-2" opacity="0.321045648" points="29.6658988 0 34.0530461 0 29.5917641 5.0945502 25.2046168 5.0945502"></polygon>
                                      <polygon id="矩形备份-3" opacity="0.191528" points="21.3537379 0 25.7408852 0 21.2796032 5.0945502 16.8924559 5.0945502"></polygon>
                                      <polygon id="矩形备份-4" opacity="0.123233" points="12.5053086 0 16.8924559 0 12.4311739 5.0945502 8.04402663 5.0945502"></polygon>
                                      <polygon id="矩形备份-5" opacity="0.097781" points="4.46128201 0 8.84842929 0 4.38714728 5.0945502 0 5.0945502"></polygon>
                                  </g>
                              </g>
                              <g id="装饰线" transform="translate(7.3051, 36.5255)">
                                  <polygon id="矩形" fill="#EBBE10" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
                                  <polygon id="矩形备份-13" fill="#4FE985" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
                                  <polygon id="矩形备份-14" :fill="`url(#9-${boxId})`" points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"></polygon>
                              </g>
                      
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </g>
    </svg>
  </div>
</template>

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

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

const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  boxId
} = toRefs(props.chartConfig.option)
</script>

<style lang="scss" scoped>
@include go('title-03') {
  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]');
  }
}
</style>
