<template>
  <div  class="go-title-09">
    <svg :width="w" :height="h">
      <title>小背景</title>
      <defs>
          <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-1">
              <stop :stop-color="colors[0]" stop-opacity="0.350515939" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-2">
              <stop :stop-color="colors[0]" stop-opacity="0.350515939" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradientTopTitle01-3">
              <stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[3]" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="100%" x2="50%" y2="6.16297582e-31%" id="linearGradientTopTitle01-4">
              <stop :stop-color="colors[4]" offset="0%"></stop>
              <stop :stop-color="colors[5]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="34.4280403%" x2="50%" y2="100%" id="linearGradientTopTitle01-5">
              <stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[7]" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradientTopTitle01-6">
              <stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[7]" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-7">
              <stop :stop-color="colors[8]" offset="0%"></stop>
              <stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-8">
              <stop :stop-color="colors[8]" offset="0%"></stop>
              <stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="97.85155%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-9">
              <stop :stop-color="colors[8]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[8]" offset="40.046916%"></stop>
              <stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-10">
              <stop :stop-color="colors[8]" offset="0%"></stop>
              <stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-11">
              <stop :stop-color="colors[8]" offset="0%"></stop>
              <stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="97.85155%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-12">
              <stop :stop-color="colors[8]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[8]" offset="40.046916%"></stop>
              <stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智览-切图版" transform="translate(3, -1)">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="大标题top" transform="translate(8, 22)">
                      <g id="小背景" transform="translate(0, 1)">
                          <rect id="矩形" fill="url(#linearGradientTopTitle01-1)" x="0" y="0" width="960" height="71"></rect>
                          <rect id="矩形" fill="url(#linearGradientTopTitle01-2)" transform="translate(1440, 32) scale(-1, 1) translate(-1440, -32)" x="960" y="0" width="960" height="64"></rect>
                          <g id="编组-3" transform="translate(616.358, 0)">
                              <polygon id="矩形" fill="url(#linearGradientTopTitle01-3)" points="0 0 684.1949 0 689.281998 0 660.981164 48 585.119147 48 574.2235 63 363.735551 63 357.061342 56.8743247 326.45026 56.8743247 319.798678 63 118.538529 63 109.029264 50 32.2658942 50"></polygon>
                              <polygon id="矩形" stroke="url(#linearGradientTopTitle01-4)" points="0 0 688.283039 0 660.981164 48 585.187128 48 574.2235 63 363.735551 63 357.131925 57 326.45026 57 319.798678 63 118.538529 63 108.822252 50 32.2658942 50"></polygon>
                              <polygon id="矩形" fill="url(#linearGradientTopTitle01-5)" points="41.9562955 59 652.320499 59 649.323621 71 47.950052 71"></polygon>
                              <path d="M101.542462,69 L592.958441,69 C593.510726,69 593.958441,69.4477153 593.958441,70 C593.958441,70.1153807 593.938473,70.229891 593.899421,70.3384619 L591.683172,76.5 C590.064691,80.9996477 585.796952,84 581.015079,84 L116.14177,84 C110.948502,84 106.187304,81.1083281 103.792864,76.5 L100.655097,70.4610661 C100.400457,69.9709875 100.591318,69.367274 101.081396,69.1126342 C101.223819,69.0386328 101.381962,69 101.542462,69 Z" id="矩形备份-10" fill="url(#linearGradientTopTitle01-6)" opacity="0.480741228"></path>
                              <polygon id="矩形" :fill="colors[10]" points="327.849104 59.4905529 355.899358 59.4905529 360.79665 64 322.663892 64"></polygon>
                          </g>
                          <g id="小菱形" transform="translate(656.2955, 55)" :fill="colors[7]">
                              <polygon id="矩形" points="4.60306437e-19 0 13.6902458 0 16.9823101 5 3.29206432 5"></polygon>
                              <polygon id="矩形备份-8" points="20.9781478 0 34.6683935 0 37.9604579 5 24.2702121 5"></polygon>
                              <polygon id="矩形备份-9" points="41.9562955 0 55.6465413 0 58.9386056 5 45.2483598 5"></polygon>
                          </g>
                          <g id="小菱形" transform="translate(1237.232, 57.5) scale(-1, 1) translate(-1237.232, -57.5)translate(1207.7627, 55)" :fill="colors[7]">
                              <polygon id="矩形" points="4.60306437e-19 0 13.6902458 0 16.9823101 5 3.29206432 5"></polygon>
                              <polygon id="矩形备份-8" points="20.9781478 0 34.6683935 0 37.9604579 5 24.2702121 5"></polygon>
                              <polygon id="矩形备份-9" points="41.9562955 0 55.6465413 0 58.9386056 5 45.2483598 5"></polygon>
                          </g>
                          <g id="编组-4" transform="translate(0, 10)">
                              <polygon id="矩形" :fill="colors[8]" points="611.363163 14 621.77498 14 629.344433 25 618.932617 25"></polygon>
                              <polygon id="矩形备份-11" fill="url(#linearGradientTopTitle01-7)" points="428.55359 14 606.871114 14 614.360042 25 436.042517 25"></polygon>
                              <polygon id="矩形备份-12" fill="url(#linearGradientTopTitle01-8)" opacity="0.307911464" points="-4.85168379e-13 0 613.164074 0 629.344433 25 25.6193658 25"></polygon>
                              <polyline id="路径-12备份" stroke="url(#linearGradientTopTitle01-9)" points="631.342352 2 426.170439 2 408.13428 20 122.872008 20"></polyline>
                              <polyline id="路径-12备份-2" stroke="url(#linearGradientTopTitle01-9)" points="620.353798 7 415.181885 7 397.145727 25 111.883455 25"></polyline>
                          </g>
                          <g id="编组-4" transform="translate(1604.3288, 22.5) scale(-1, 1) translate(-1604.3288, -22.5)translate(1290.6556, 10)">
                              <polygon id="矩形" :fill="colors[8]" points="607.367326 14 617.779142 14 625.348595 25 614.936779 25"></polygon>
                              <polygon id="矩形备份-11" fill="url(#linearGradientTopTitle01-10)" points="425.556712 14 602.91554 14 610.364204 25 433.005376 25"></polygon>
                              <polygon id="矩形备份-12" fill="url(#linearGradientTopTitle01-11)" opacity="0.307911464" points="-4.82087945e-13 0 609.270968 0 625.348595 25 25.4567031 25"></polygon>
                              <polyline id="路径-12备份" stroke="url(#linearGradientTopTitle01-12)" points="627.346514 2 423.383866 2 405.454011 20 121.873049 20"></polyline>
                              <polyline id="路径-12备份-2" stroke="url(#linearGradientTopTitle01-12)" points="616.35796 7 412.395312 7 394.465457 25 110.884495 25"></polyline>
                          </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
} = toRefs(props.chartConfig.option)
</script>

<style lang="scss" scoped>
@include go('title-09') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
    
  svg {
    position: absolute;
    z-index: -1;
  }

}
</style>
