<template>
  <div>
    <svg
      :width="props.w"
      :height="props.h"
      viewBox="0 0 400 40"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="97.3499803%"
          y1="112.35863%"
          x2="0%"
          y2="112.35863%"
          id="linearGradient-ZhiGan_GeneralHead-1"
        >
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorR1"
            stop-opacity="0.1742622"
            offset="0%"
          ></stop>
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorR2"
            stop-opacity="0"
            offset="100%"
          ></stop>
        </linearGradient>
        <linearGradient
          x1="0%"
          y1="50%"
          x2="100%"
          y2="50%"
          id="linearGradient-ZhiGan_GeneralHead-2"
        >
          <stop :stop-color="props.dataStyle.linearGradientStopColorL1" offset="0%"></stop>
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorL2"
            stop-opacity="0"
            offset="100%"
          ></stop>
        </linearGradient>
        <polygon
          id="path-ZhiGan_GeneralHead-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="radialGradient-ZhiGan_GeneralHead-5"
        >
          <stop :stop-color="props.dataStyle.linearGradientStopColorM1" offset="0%"></stop>
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorM2"
            stop-opacity="0"
            offset="100%"
          ></stop>
        </radialGradient>
        <filter
          x="-3.0%"
          y="-12.5%"
          width="106.1%"
          height="124.9%"
          filterUnits="objectBoundingBox"
          id="filter-ZhiGan_GeneralHead-6"
        >
          <feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
        </filter>
        <linearGradient
          x1="27.2222213%"
          y1="49.528366%"
          x2="102.926609%"
          y2="50.2892453%"
          id="linearGradient-ZhiGan_GeneralHead-7"
        >
          <stop :stop-color="props.dataStyle.linearGradientStopColorRT1" offset="0%"></stop>
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorRT2"
            stop-opacity="0"
            offset="100%"
          ></stop>
        </linearGradient>
        <linearGradient
          x1="100%"
          y1="50%"
          x2="0%"
          y2="50%"
          id="linearGradient-ZhiGan_GeneralHead-8"
        >
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorT1"
            stop-opacity="0"
            offset="0%"
          ></stop>
          <stop :stop-color="props.dataStyle.linearGradientStopColorT2" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="100%"
          y1="50%"
          x2="0%"
          y2="50%"
          id="linearGradient-ZhiGan_GeneralHead-9"
        >
          <stop
            :stop-color="props.dataStyle.linearGradientStopColorB1"
            stop-opacity="0"
            offset="0%"
          ></stop>
          <stop :stop-color="props.dataStyle.linearGradientStopColorB2" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1495, -535)">
          <g id="可视化" transform="translate(-8, -1)">
            <g id="模块" transform="translate(53, 92)">
              <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
                <g id="底部背景" transform="translate(0, -0)">
                  <g id="小标题" transform="translate(0.5, 0)">
                    <g transform="translate(1, 1)">
                      <polygon
                        id="矩形"
                        fill="url(#linearGradient-ZhiGan_GeneralHead-1)"
                        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-ZhiGan_GeneralHead-4" fill="white">
                          <use xlink:href="#path-ZhiGan_GeneralHead-3"></use>
                        </mask>
                        <use
                          id="蒙版"
                          fill="url(#linearGradient-ZhiGan_GeneralHead-2)"
                          xlink:href="#path-ZhiGan_GeneralHead-3"
                        ></use>
                        <ellipse
                          fill="url(#radialGradient-ZhiGan_GeneralHead-5)"
                          filter="url(#filter-ZhiGan_GeneralHead-6)"
                          mask="url(#mask-ZhiGan_GeneralHead-4)"
                          cx="180.697047"
                          cy="25.5190419"
                          rx="214"
                          ry="52"
                        ></ellipse>
                      </g>
                      <polyline
                        id="路径"
                        stroke="url(#linearGradient-ZhiGan_GeneralHead-7)"
                        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(#linearGradient-ZhiGan_GeneralHead-8)"
                        points="118.561275 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"
                      ></polygon>
                      <polygon
                        id="路径-11"
                        :fill="props.dataStyle.gPolygonFillColorTL"
                        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="props.dataStyle.gFillColorTR"
                      >
                        <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(8.3051, 37.5255)">
                      <polygon
                        id="矩形"
                        :fill="props.dataStyle.gPolygonFillColorBL1"
                        points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"
                      ></polygon>
                      <polygon
                        id="矩形备份-13"
                        :fill="props.dataStyle.gPolygonFillColorBL2"
                        points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"
                      ></polygon>
                      <polygon
                        id="矩形备份-14"
                        fill="url(#linearGradient-ZhiGan_GeneralHead-9)"
                        points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"
                      ></polygon>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        :x="props.dataStyle.x"
        :y="props.dataStyle.y"
        :font-size="props.dataStyle.fontSize"
        :fill="props.dataStyle.fontColor"
      >
        {{ props.dataset.value }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps(['dataset', 'w', 'h', 'dataStyle']);
</script>
