<template>
  <div>
    <svg
      :width="props.w"
      :height="props.h"
      viewBox="0 0 320 31"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="100%"
          y1="50%"
          x2="2.30946189%"
          y2="50%"
          id="linearGradient-ModalHead-1"
        >
          <stop :stop-color="props.dataStyle.startColor" stop-opacity="0" offset="0%"></stop>
          <stop :stop-color="props.dataStyle.endColor" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-重复报警弹窗-切图版" transform="translate(-240, -212)">
          <g id="弹窗----" transform="translate(175.2674, 165.0542)">
            <g id="文字" transform="translate(64.7326, 10.2458)">
              <g id="预警信息-" transform="translate(0, 36.7)">
                <g id="编组-54" transform="translate(0, 0.3)">
                  <rect
                    id="矩形"
                    fill="url(#linearGradient-ModalHead-1)"
                    transform="translate(160.5, 15) scale(1, -1) translate(-160.5, -15)"
                    x="0"
                    y="0"
                    width="321"
                    height="30"
                  ></rect>
                  <rect
                    id="矩形"
                    :fill="props.dataStyle.leftColor"
                    transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
                    x="0"
                    y="0"
                    width="3"
                    height="30"
                  ></rect>
                </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.data }}
      </text>
    </svg>
  </div>
</template>

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