<template>
  <div>
    <svg
      :width="props.dataStyle.width"
      :height="props.dataStyle.height"
      viewBox="0 0 157 42"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <polygon
          id="path-HuoQingDetailProcessButton-1"
          points="2.38706832e-11 3 29.8824755 3 31.9432135 -2.27366737e-12 40 -2.27366737e-12 40 131.5 39.8750424 146.981731 39.8750424 152.5583 37.9475767 154.8205 24.302841 154.8205 21.8225138 152.275229 11.7758566 152.275229 13.7739852 155 0.247368258 155 2.41439368e-11 135.058713 2.33558489 132.095807 2.33558489 107.104141 2.41439368e-11 110.205257"
        ></polygon>
        <filter
          x="-23.1%"
          y="-6.0%"
          width="146.3%"
          height="111.9%"
          filterUnits="objectBoundingBox"
          id="filter-HuoQingDetailProcessButton-2"
        >
          <feGaussianBlur
            stdDeviation="8"
            in="SourceAlpha"
            result="shadowBlurInner1"
          ></feGaussianBlur>
          <feOffset dx="0" dy="1" 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.137254902   0 0 0 0 0.568627451   0 0 0 0 0.356862745  0 0 0 1 0"
            type="matrix"
            in="shadowInnerInner1"
          ></feColorMatrix>
        </filter>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailProcessButton-3"
        >
          <stop stop-color="#583700" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#08572E" offset="100%"></stop>
        </linearGradient>
        <polygon
          id="path-HuoQingDetailProcessButton-4"
          points="1.91176074e-13 0 40 0 40 131 0 131"
        ></polygon>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailProcessButton-6"
        >
          <stop stop-color="#034E2E" offset="0%"></stop>
          <stop stop-color="#05954F" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="99.3603686%"
          id="linearGradient-HuoQingDetailProcessButton-7"
        >
          <stop stop-color="#05954F" offset="0%"></stop>
          <stop stop-color="#034E2E" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智库-切图版" transform="translate(-917, -306)">
          <g id="弹窗---" transform="translate(416, 168)">
            <g id="list" transform="translate(501.7715, 139.0542)">
              <g
                id="编组-10"
                transform="translate(77.8621, 20.014) scale(-1, -1) rotate(90) translate(-77.8621, -20.014)translate(57.8481, -57.8481)"
              >
                <g id="编组-36" transform="translate(0, 0)">
                  <g id="图形" transform="translate(20, 77.5) scale(-1, -1) translate(-20, -77.5)">
                    <use
                      fill="#09240F"
                      fill-rule="evenodd"
                      xlink:href="#path-HuoQingDetailProcessButton-1"
                    ></use>
                    <use
                      fill="black"
                      fill-opacity="1"
                      filter="url(#filter-HuoQingDetailProcessButton-2)"
                      xlink:href="#path-HuoQingDetailProcessButton-1"
                    ></use>
                    <use
                      stroke="#099D31"
                      stroke-width="1.5"
                      xlink:href="#path-HuoQingDetailProcessButton-1"
                    ></use>
                  </g>
                  <g
                    id="绿色棱形"
                    transform="translate(23.5, 154.8621) scale(1, -1) translate(-23.5, -154.8621)translate(11, 154)"
                    fill="#05954F"
                  >
                    <polygon
                      id="矩形"
                      points="-4.60489652e-15 -3.0144519e-13 6.4169095 -3.0144519e-13 7.67790473 1.72413793 1.26099523 1.72413793"
                    ></polygon>
                    <polygon
                      id="矩形"
                      opacity="0.399999976"
                      points="8.57176414 4.38984237e-14 14.9886736 4.38984237e-14 16.2496689 1.72413793 9.83275937 1.72413793"
                    ></polygon>
                    <polygon
                      id="矩形"
                      opacity="0.399999976"
                      points="17.3220953 4.38984237e-14 23.7390048 4.38984237e-14 25 1.72413793 18.5830905 1.72413793"
                    ></polygon>
                  </g>
                  <g id="编组-7" transform="translate(37, 1)" fill="#00611A">
                    <polygon
                      id="路径-20"
                      transform="translate(0.5, 3.5143) scale(-1, 1) translate(-0.5, -3.5143)"
                      points="0 0 1 1.42403864 1 7.02862665 0 5.48291804"
                    ></polygon>
                    <polygon
                      id="路径-20"
                      opacity="0.692208426"
                      transform="translate(0.5, 9.9396) scale(-1, 1) translate(-0.5, -9.9396)"
                      points="-7.10542736e-15 6.42525155 1 7.8492902 1 13.4538782 -7.10542736e-15 11.9081696"
                    ></polygon>
                    <polygon
                      id="路径-20"
                      opacity="0.337231591"
                      transform="translate(0.5, 16.4857) scale(-1, 1) translate(-0.5, -16.4857)"
                      points="-3.55271368e-15 12.9713734 1 14.395412 1 20 -3.55271368e-15 18.4542914"
                    ></polygon>
                  </g>
                  <g id="方案-选中" transform="translate(0.0279, 0.5)">
                    <mask id="mask-HuoQingDetailProcessButton-5" fill="white">
                      <use
                        xlink:href="#path-HuoQingDetailProcessButton-4"
                        transform="translate(20, 65.5) scale(1, -1) translate(-20, -65.5)"
                      ></use>
                    </mask>
                    <use
                      id="蒙版"
                      fill="url(#linearGradient-HuoQingDetailProcessButton-3)"
                      transform="translate(20, 65.5) scale(1, -1) translate(-20, -65.5)"
                      xlink:href="#path-HuoQingDetailProcessButton-4"
                    ></use>
                    <polygon
                      id="矩形"
                      fill="url(#linearGradient-HuoQingDetailProcessButton-6)"
                      mask="url(#mask-HuoQingDetailProcessButton-5)"
                      transform="translate(27, 76) scale(1, -1) rotate(96) translate(-27, -76)"
                      points="-38 43 15.5294118 43 92 109 38.4705882 109"
                    ></polygon>
                    <polygon
                      id="矩形备份-6"
                      fill="url(#linearGradient-HuoQingDetailProcessButton-7)"
                      mask="url(#mask-HuoQingDetailProcessButton-5)"
                      transform="translate(9.5715, 83.6917) rotate(75) translate(-9.5715, -83.6917)"
                      points="-17.928521 26.2794374 4.7185378 26.2794374 37.071479 141.103999 14.4244202 141.103999"
                    ></polygon>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="50%"
        y="65%"
        text-anchor="middle"
        :font-size="props.dataStyle.fontsize"
        :fill="props.dataStyle.fontcolor"
      >
        {{ props.item.value }}
      </text>
    </svg>
  </div>
</template>

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