<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>编组 91@2x</title>
      <defs>
        <!-- w: 93, h: 91 -->
          <path :d="`M${w/1.36},${h/2.6} C${w/1.36},${h/1.74} ${w/1.72},${h/1.37} ${w/2.57},${h/1.37} C${w/5.08},${h/1.37} ${w/24.22},${h/1.74} ${w/24.22},${h/2.6} C${w/24.22},${h/5.14} ${w/5.08},${h/24.46} ${w/2.57},${h/24.46} C${w/1.72},${h/24.46} ${w/1.36},${h/5.14} ${w/1.36},${h/2.6} L${w/1.36},${h/2.6} Z`" id="path-1"></path>
          <filter x="-21.3%" y="-22.0%" width="142.7%" height="144.1%" filterUnits="objectBoundingBox" id="filter-2">
              <feGaussianBlur stdDeviation="4.5901927" in="SourceGraphic"></feGaussianBlur>
          </filter>
          <mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="64.5513846" height="62.5058246" fill="white">
              <use xlink:href="#path-1"></use>
          </mask>
          <radialGradient cx="14.8936124%" cy="84.5744701%" fx="14.8936124%" fy="84.5744701%" r="29.8303752%" gradientTransform="translate(0.1489, 0.8457), scale(1, 0.9999), rotate(-31.1404), translate(-0.1489, -0.8457)" id="radialGradient-4">
              <stop :stop-color="colors[0]" stop-opacity="0.1" offset="1.15924115%"></stop>
              <stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
          </radialGradient>
          <path d="M72.2360733,36.12 C72.2360733,56.0685252 56.0654775,72.24 ${w/2.57},72.24 C16.1705958,72.24 0,56.0685252 0,36.12 C0,16.1714748 16.1705958,0 ${w/2.57},0 C56.0654775,0 72.2360733,16.1714748 72.2360733,36.12 L72.2360733,36.12 Z" id="path-5"></path>
          <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-6">
              <feGaussianBlur stdDeviation="0.45901927" in="SourceGraphic"></feGaussianBlur>
          </filter>
          <mask id="mask-7" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="72.2360733" height="72.24" fill="white">
              <use xlink:href="#path-5"></use>
          </mask>
          <path :d="`M${w/1.39},${h/2.53} C${w/1.39},${h/1.72} ${w/1.75},${h/1.36} ${w/2.57},${h/1.36} C${w/4.86},${h/1.36} ${w/17.29},${h/1.72} ${w/17.29},${h/2.53} C${w/17.29},${h/4.8} ${w/4.86},${h/17.47} ${w/2.57},${h/17.47} C${w/1.75},${h/17.47} ${w/1.39},${h/4.8} ${w/1.39},${h/2.53} L${w/1.39},${h/2.53} Z`" id="path-8"></path>
          <mask id="mask-9" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="61.4775092" height="61.48" fill="white">
              <use xlink:href="#path-8"></use>
          </mask>
          <linearGradient x1="95.6213192%" y1="49.9999948%" x2="55.404976%" y2="97.2972868%" id="linearGradient-10">
              <stop :stop-color="colors[1]" offset="0%"></stop>
              <stop :stop-color="colors[2]" stop-opacity="0.1" offset="100%"></stop>
          </linearGradient>
          <pattern id="pattern-11" width="100%" height="100%" patternUnits="objectBoundingBox">
              <use xlink:href="#image-12"></use>
          </pattern>
          <image id="image-12" width="62" height="62" xlink:href="data:image/png;base64,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"></image>
          <path :d="`M${w/1.39},${h/2.53} C${w/1.39},${h/3.05} ${w/1.43},${h/3.803} ${w/1.507},${h/4.822} C${w/1.595},${h/6.59} ${w/1.74},${h/9.22} ${w/1.94},${h/12.05} C${w/2.2},${h/17.43} ${w/2.58},${h/19.73} ${w/3.09},${h/15.69} C${w/3.85},${h/13.03} ${w/4.98},${h/9.18} ${w/6.47},${h/6.403} C${w/9.22},${h/4.92} ${w/12.996},${h/3.79} ${w/15.58},${h/3.04} C${w/19.44},${h/2.53} ${w/17.24},${h/2.16} ${w/12.05},${h/1.907} C${w/9.26},${h/1.706} ${w/6.65},${h/1.57} ${w/4.88},${h/1.48} C${w/3.86},${h/1.402} ${w/3.096},${h/1.36} ${w/2.57},${h/1.36}`" id="path-13"></path>
          <linearGradient x1="95.6229161%" y1="49.9999948%" x2="55.4051652%" y2="97.2972868%" id="linearGradient-14">
              <stop :stop-color="colors[1]" stop-opacity="0.999708696" offset="0%"></stop>
              <stop :stop-color="colors[3]" stop-opacity="0.1" offset="98.7081888%"></stop>
          </linearGradient>
          <pattern id="pattern-15" width="100%" height="100%" patternUnits="objectBoundingBox">
              <use xlink:href="#image-16"></use>
          </pattern>
          <image id="image-16" width="62" height="62" xlink:href="data:image/png;base64,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"></image>
          <path :d="`M${w/1.391},${h/2.53} C${w/1.391},${h/3.05} ${w/1.4296},${h/3.803} ${w/1.508},${h/4.82} C${w/1.595},${h/6.58} ${w/1.74},${h/9.21} ${w/1.94},${h/12.05} C${w/2.2},${h/17.43} ${w/2.58},${h/19.72} ${w/3.09},${h/15.69} C${w/3.85},${h/13.04} ${w/4.98},${h/9.18} ${w/6.47},${h/6.404} C${w/9.22},${h/4.92} ${w/13.007},${h/3.79} ${w/15.58},${h/3.04} C${w/19.44},${h/2.53} ${w/17.25},${h/2.16} ${w/12.05},${h/1.907} C${w/9.25},${h/1.706} ${w/6.65},${h/1.57} ${w/4.88},${h/1.48} C${w/3.86},${h/1.402} ${w/3.096},${h/1.36455} ${w/2.57},${h/1.36453}`" id="path-17"></path>
          <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-18">
              <stop :stop-color="colors[4]" stop-opacity="0.5" offset="0%"></stop>
              <stop :stop-color="colors[5]" stop-opacity="0.4" offset="100%"></stop>
          </radialGradient>
          <radialGradient cx="14.2857154%" cy="82.1428545%" fx="14.2857154%" fy="82.1428545%" r="53.4074868%" gradientTransform="translate(0.1429, 0.8214), rotate(-38.211), scale(1, 1.6894), translate(-0.1429, -0.8214)" id="radialGradient-19">
              <stop :stop-color="colors[0]" offset="0%"></stop>
              <stop :stop-color="colors[6]" stop-opacity="0.56" offset="43.70327%"></stop>
              <stop :stop-color="colors[7]" stop-opacity="0" offset="100%"></stop>
          </radialGradient>
          <linearGradient x1="19.6428597%" y1="11.6071408%" x2="82.1428593%" y2="87.4999995%" id="linearGradient-20">
              <stop :stop-color="colors[8]" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0.16" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="33.9285734%" y1="25.892859%" x2="25.0000043%" y2="7.1428594%" id="linearGradient-21">
              <stop :stop-color="colors[0]" stop-opacity="0" offset="69.9734509%"></stop>
              <stop :stop-color="colors[0]" stop-opacity="0.4" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="71.428568%" y1="83.0357125%" x2="74.9999938%" y2="91.0714225%" id="linearGradient-22">
              <stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[0]" stop-opacity="0.2" offset="100%"></stop>
          </linearGradient>
          <path :d="`M${w/1.61},${h/2.55} C${w/1.61},${h/1.92} ${w/1.94},${h/1.59} ${w/2.58},${h/1.59} C${w/3.84},${h/1.59} ${w/6.37},${h/1.92} ${w/6.37},${h/2.55} C${w/6.37},${h/3.83} ${w/3.84},${h/6.44} ${w/2.58},${h/6.44} C${w/1.94},${h/6.44} ${w/1.61},${h/3.83} ${w/1.61},${h/2.55} L${w/1.61},${h/2.55} Z`" id="path-23"></path>
          <filter x="-10.5%" y="-10.5%" width="120.9%" height="120.9%" filterUnits="objectBoundingBox" id="filter-24">
              <feGaussianBlur stdDeviation="4.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
              <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
              <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
              <feColorMatrix values="0 0 0 0 0.466666667   0 0 0 0 1   0 0 0 0 0.952941176  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
          </filter>
          <mask id="mask-25" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="43" height="43" fill="white">
              <use xlink:href="#path-23"></use>
          </mask>
          <mask id="mask-26" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="43" height="43" fill="white">
              <use xlink:href="#path-23"></use>
          </mask>
          <mask id="mask-27" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="43" height="43" fill="white">
              <use xlink:href="#path-23"></use>
          </mask>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="0,0">
          <g id="林业防火-智览-切图版" transform="translate(-1525, -153)" fill-rule="nonzero">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="A" transform="translate(1502.5, 113)">
                      <g id="标题模块--右侧1" transform="translate(0.5, 0)">
                          <g id="六轴" transform="translate(8, 40)">
                              <g id="卫星遥感" transform="translate(24, 21)">
                                  <g id="Group-1321316249" transform="translate(1, 0)">
                                      <g id="编组-91" transform="translate(9.9185, 11)">
                                          <g id="路径" filter="url(#filter-2)" :stroke="colors[9]" stroke-width="3.67215416">
                                              <use mask="url(#mask-3)" xlink:href="#path-1"></use>
                                          </g>
                                          <g id="路径" filter="url(#filter-6)">
                                              <use fill="url(#radialGradient-4)" style="mix-blend-mode: normal;" xlink:href="#path-5"></use>
                                              <use stroke-opacity="0.3" :stroke="colors[10]" mask="url(#mask-7)" stroke-width="1.83607708" xlink:href="#path-5"></use>
                                          </g>
                                          <use id="路径" stroke-opacity="0.2" :stroke="colors[11]" mask="url(#mask-9)" stroke-width="11.0164625" xlink:href="#path-8"></use>
                                          <g id="路径" :transform="`translate(${w/2.57}, ${h/2.53137}) scale(-1, -1) translate(-${w/2.57}, -${h/2.53137})`" stroke-width="5.50823125">
                                              <use stroke="url(#linearGradient-10)" xlink:href="#path-13"></use>
                                              <use stroke="url(#pattern-11)" xlink:href="#path-13"></use>
                                          </g>
                                          <g id="路径" :transform="`translate(${w/2.57}, ${h/2.53134}) scale(-1, -1) rotate(187) translate(-${w/2.57}, -${h/2.53134})`" stroke-width="5.50823125">
                                              <use stroke="url(#linearGradient-14)" xlink:href="#path-17"></use>
                                              <use stroke="url(#pattern-15)" xlink:href="#path-17"></use>
                                          </g>
                                          <g id="路径">
                                              <use fill-opacity="0.600000024" fill="url(#radialGradient-18)" style="mix-blend-mode: normal;" xlink:href="#path-23"></use>
                                              <use fill-opacity="0.200000003" fill="url(#radialGradient-19)" style="mix-blend-mode: normal;" xlink:href="#path-23"></use>
                                              <use fill="black" fill-opacity="1" filter="url(#filter-24)" xlink:href="#path-23"></use>
                                              <use stroke="url(#linearGradient-20)" mask="url(#mask-25)" stroke-width="2.57050787" xlink:href="#path-23"></use>
                                              <use stroke="url(#linearGradient-21)" mask="url(#mask-26)" stroke-width="2.57050787" xlink:href="#path-23"></use>
                                              <use stroke="url(#linearGradient-22)" mask="url(#mask-27)" stroke-width="2.57050787" xlink:href="#path-23"></use>
                                          </g>
                                      </g>
                                  </g>
                              </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>
