<template>
  <div>
    <svg
      :width="props.dataStyle.waySvgWidth"
      :height="props.dataStyle.waySvgHeight"
      viewBox="0 0 346 30"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="98.8990851%"
          y1="50%"
          x2="2.30946189%"
          y2="50%"
          id="linearGradient-ZhiChu_LuXianGuHua-startAndEndTitle-1"
        >
          <stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#0A392A" offset="100%"></stop>
        </linearGradient>
        <ellipse
          id="path-ZhiChu_LuXianGuHua-startAndEndTitle-2"
          cx="6"
          cy="6.00131491"
          rx="3"
          ry="3.00131491"
        ></ellipse>
        <filter
          x="-150.0%"
          y="-149.9%"
          width="400.0%"
          height="399.9%"
          filterUnits="objectBoundingBox"
          id="filter-ZhiChu_LuXianGuHua-startAndEndTitle-3"
        >
          <feMorphology
            radius="0.5"
            operator="dilate"
            in="SourceAlpha"
            result="shadowSpreadOuter1"
          ></feMorphology>
          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur
            stdDeviation="2.5"
            in="shadowOffsetOuter1"
            result="shadowBlurOuter1"
          ></feGaussianBlur>
          <feComposite
            in="shadowBlurOuter1"
            in2="SourceAlpha"
            operator="out"
            result="shadowBlurOuter1"
          ></feComposite>
          <feColorMatrix
            values="0 0 0 0 0   0 0 0 0 1   0 0 0 0 0.314202964  0 0 0 0.6 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智览-水源详细信息-" transform="translate(-1489, -493)">
          <g id="可视化" transform="translate(-11, -21)">
            <g
              id="标题模块--右侧水源点-"
              transform="translate(1676.75, 581.8682) scale(-1, 1) translate(-1676.75, -581.8682)translate(1467, 113.3)"
            >
              <g id="底部背景" transform="translate(0, -0)">
                <g
                  id="编组-47"
                  transform="translate(213.5, 415.7) scale(-1, 1) translate(-213.5, -415.7)translate(40.5, 400.7)"
                >
                  <rect
                    id="矩形"
                    fill="url(#linearGradient-ZhiChu_LuXianGuHua-startAndEndTitle-1)"
                    transform="translate(173, 15) scale(1, -1) translate(-173, -15)"
                    x="0"
                    y="0"
                    width="346"
                    height="30"
                  ></rect>
                  <rect
                    id="矩形"
                    fill="#58FF95"
                    transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
                    x="0"
                    y="0"
                    width="3"
                    height="30"
                  ></rect>
                  <g id="进度点" transform="translate(17, 9)" fill-rule="nonzero">
                    <ellipse
                      id="椭圆形备份"
                      :fill="props.wayColor.color"
                      opacity="0.204791"
                      cx="6"
                      cy="6.00262982"
                      rx="6"
                      ry="6.00262982"
                    ></ellipse>
                    <g id="椭圆形">
                      <use
                        fill="black"
                        fill-opacity="1"
                        filter="url(#filter-ZhiChu_LuXianGuHua-startAndEndTitle-3)"
                        xlink:href="#path-ZhiChu_LuXianGuHua-startAndEndTitle-2"
                      ></use>
                      <ellipse
                        :stroke="props.wayColor.borderColor"
                        stroke-width="1"
                        stroke-linejoin="square"
                        :fill="props.wayColor.color"
                        fill-rule="evenodd"
                        cx="6"
                        cy="6.00131491"
                        rx="2.5"
                        ry="2.50131491"
                      ></ellipse>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="15%"
        y="65%"
        :font-size="props.dataStyle.wayFontSize"
        :fill="props.dataStyle.wayFontColor"
      >
        {{ props.name }}
      </text>
    </svg>
  </div>
</template>
<script setup lang="ts">
  const props = defineProps(['name', 'dataStyle', 'wayColor']);
</script>
