<template>
  <div>
    <svg
      :width="props.dataStyle.bottomWidth"
      :height="props.dataStyle.bottomHeight"
      viewBox="0 0 71 97"
      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-WuRenJiFeiXingShuJu-1"
        >
          <stop stop-color="#337D4E" offset="0%"></stop>
          <stop stop-color="#2D593B" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="100%"
          y1="50%"
          x2="0%"
          y2="50%"
          id="linearGradient-WuRenJiFeiXingShuJu-2"
        >
          <stop stop-color="#6FEF94" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#A8F8C6" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g
        id="监测平台"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
        opacity="0.308761"
      >
        <g
          id="林业防火-智感-无人机实时画面-切图版"
          transform="translate(-1524, -908)"
          fill="url(#linearGradient-WuRenJiFeiXingShuJu-1)"
          stroke="url(#linearGradient-WuRenJiFeiXingShuJu-2)"
        >
          <g id="可视化" transform="translate(-0.5, -1)">
            <g id="模块" transform="translate(46, 88)">
              <g id="标题模块--右侧1" transform="translate(1450, 684)">
                <g id="a" transform="translate(28.5, 60)">
                  <g id="矩形-3" transform="translate(0.5, 77.5)">
                    <rect
                      id="矩形"
                      transform="translate(35, 48) rotate(90) translate(-35, -48)"
                      x="-12.5"
                      y="13.5"
                      width="95"
                      height="69"
                    ></rect>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="45%"
        y="30"
        text-anchor="middle"
        :fill="props.dataStyle.bottomFontColor1"
        :font-size="props.dataStyle.bottomFontSize1"
      >
        {{ Number(props.item.num).toLocaleString() }}
      </text>
      <text
        x="45%"
        y="50"
        text-anchor="middle"
        :fill="props.dataStyle.bottomFontColor2"
        :font-size="props.dataStyle.bottomFontSize2"
      >
        {{ props.item.unit }}
      </text>
      <text x="45%" y="60" text-anchor="middle" :fill="props.dataStyle.lineColor" font-size="16">
        ——
      </text>
      <text
        x="45%"
        y="75"
        text-anchor="middle"
        :fill="props.dataStyle.bottomFontColor3"
        :font-size="props.dataStyle.bottomFontSize3"
      >
        {{ props.item.title }}
      </text>
    </svg>
  </div>
</template>

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

<style lang="scss" scoped></style>
