<template>
  <div>
    <svg
      :width="props.dataStyle.liWidth"
      :height="props.dataStyle.liHeight"
      viewBox="0 0 186 24"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="-1.04083409e-15%"
          y1="68.6506732%"
          x2="100%"
          y2="68.6506732%"
          id="linearGradient-ZhiGan_XianSuoShangBaoFenLei-1"
        >
          <stop stop-color="#337D4E" offset="0%"></stop>
          <stop stop-color="#2D593B" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-小程序app用户数" transform="translate(-239, -600)">
          <g id="可视化" transform="translate(-0.5, -1)">
            <g id="模块" transform="translate(46, 85)">
              <g id="标题模块--左侧2" transform="translate(0, 297)">
                <g id="编组-33" transform="translate(194, 219)">
                  <rect
                    id="矩形"
                    stroke-opacity="0.4"
                    stroke="#4D6647"
                    fill-opacity="0.4"
                    fill="#060D06"
                    x="100.5"
                    y="0.5"
                    width="84"
                    height="23"
                  ></rect>
                  <rect
                    id="矩形"
                    fill="url(#linearGradient-ZhiGan_XianSuoShangBaoFenLei-1)"
                    opacity="0.308761"
                    x="0"
                    y="0"
                    width="100"
                    height="24"
                  ></rect>
                  <rect id="矩形" :fill="props.item.color" x="0" y="0" width="2" height="24"></rect>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="8%"
        y="60%"
        dominant-baseline="middle"
        text-anchor="middle"
        font-size="60"
        :fill="props.item.color"
      >
        ·
      </text>
      <text
        x="30%"
        y="55%"
        dominant-baseline="middle"
        text-anchor="middle"
        :font-size="props.dataStyle.productFontSpanFontSize"
        :fill="props.dataStyle.productFontSpanColor"
      >
        {{ props.item.product }}
      </text>
      <text
        x="78%"
        y="55%"
        dominant-baseline="middle"
        text-anchor="middle"
        :font-size="props.dataStyle.dataFontSpanFontSize"
        :fill="props.dataStyle.dataFontSpanColor"
      >
        {{ props.item.data }}个
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  const props = defineProps(['item', 'dataStyle']);
</script>
