<template>
  <div>
    <!-- 绿色 -->
    <svg
      v-if="props.type != props.driveOrWalk"
      :width="props.dataStyle.driveOrWalkWidth"
      :height="props.dataStyle.driveOrWalkHeight"
      viewBox="0 0 81 23"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-green-1"
        >
          <stop stop-color="#005516" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#005516" offset="98.3574287%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-green-2"
        >
          <stop stop-color="#0B9A30" offset="0%"></stop>
          <stop stop-color="#024E16" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-green-3"
        >
          <stop stop-color="#005516" offset="0%"></stop>
          <stop stop-color="#005516" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-green-4"
        >
          <stop stop-color="#005516" offset="0%"></stop>
          <stop stop-color="#FF9538" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <polygon
          id="path-HuoQingDetailTiltButton-green-5"
          points="15.4901 2.84217094e-14 80.7619446 2.84217094e-14 65.0337893 23 5.43679294 23 2.515189 18.973805"
        ></polygon>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-green-7"
        >
          <stop stop-color="#0A902C" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#0A8D2C" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-green-8"
        >
          <stop stop-color="#09872A" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#087F27" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智库-切图版" transform="translate(-616, -299)">
          <g id="弹窗---" transform="translate(416, 168)">
            <g id="文字" transform="translate(50, 24.3)">
              <g id="编组-24" transform="translate(150.2381, 106.7)">
                <path
                  d="M74.0335791,0.5 L76.7871661,4.31042769 L64.3485392,22.5 L5.47811827,22.5 L2.62617427,19.0810021 L15.3324737,0.5 L74.0335791,0.5 Z"
                  id="矩形"
                  stroke="url(#linearGradient-HuoQingDetailTiltButton-green-2)"
                  fill="url(#linearGradient-HuoQingDetailTiltButton-green-1)"
                ></path>
                <mask id="mask-HuoQingDetailTiltButton-green-6" fill="white">
                  <use xlink:href="#path-HuoQingDetailTiltButton-green-5"></use>
                </mask>
                <path
                  stroke="url(#linearGradient-HuoQingDetailTiltButton-green-4)"
                  d="M79.8142999,0.5 L64.7699774,22.5 L5.69173996,22.5 L3.12676026,18.9652606 L15.7539119,0.5 L79.8142999,0.5 Z"
                ></path>
                <polygon
                  id="矩形"
                  fill="url(#linearGradient-HuoQingDetailTiltButton-green-7)"
                  mask="url(#mask-HuoQingDetailTiltButton-green-6)"
                  points="4.76194463 -8.7 18.7619446 -8.7 38.7619446 38.3 24.7619446 38.3"
                ></polygon>
                <polygon
                  id="矩形备份-6"
                  fill="url(#linearGradient-HuoQingDetailTiltButton-green-8)"
                  mask="url(#mask-HuoQingDetailTiltButton-green-6)"
                  transform="translate(21.7619, 31.7706) scale(-1, 1) translate(-21.7619, -31.7706)"
                  points="-8.23805537 -9.7 16.467827 -9.7 51.7619446 73.2411765 27.0560623 73.2411765"
                ></polygon>
                <polygon
                  id="路径-2"
                  fill="#F5A500"
                  points="1.81602869 20.266914 0 23 3.96190232 23"
                ></polygon>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="50%"
        y="75%"
        text-anchor="middle"
        :font-size="props.dataStyle.driveOrWalkFontSize"
        :fill="props.dataStyle.driveOrWalkFontColor"
      >
        {{ props.value }}
      </text>
    </svg>
    <!-- 黄色 -->
    <svg
      v-if="props.type == props.driveOrWalk"
      :width="props.dataStyle.driveOrWalkWidth"
      :height="props.dataStyle.driveOrWalkHeight"
      viewBox="0 0 81 23"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-yellow-1"
        >
          <stop stop-color="#583700" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#FF9538" offset="98.3574287%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-yellow-2"
        >
          <stop stop-color="#FF9538" offset="0%"></stop>
          <stop stop-color="#FF9538" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-yellow-3"
        >
          <stop stop-color="#583700" offset="0%"></stop>
          <stop stop-color="#FF9538" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-yellow-4"
        >
          <stop stop-color="#FF9538" offset="0%"></stop>
          <stop stop-color="#FF9538" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <polygon
          id="path-HuoQingDetailTiltButton-yellow-5"
          points="15.4901 2.84217094e-14 80.7619446 2.84217094e-14 65.0337893 23 5.43679294 23 2.515189 18.973805"
        ></polygon>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-yellow-7"
        >
          <stop stop-color="#E3AC5C" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#C2742F" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-HuoQingDetailTiltButton-yellow-8"
        >
          <stop stop-color="#E3AC5C" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#C2742F" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智库-切图版" transform="translate(-616, -299)">
          <g id="弹窗---" transform="translate(416, 168)">
            <g id="文字" transform="translate(50, 24.3)">
              <g id="编组-24" transform="translate(150.2381, 106.7)">
                <path
                  d="M74.0335791,0.5 L76.7871661,4.31042769 L64.3485392,22.5 L5.47811827,22.5 L2.62617427,19.0810021 L15.3324737,0.5 L74.0335791,0.5 Z"
                  id="矩形"
                  stroke="url(#linearGradient-HuoQingDetailTiltButton-yellow-2)"
                  fill="url(#linearGradient-HuoQingDetailTiltButton-yellow-1)"
                ></path>
                <mask id="mask-HuoQingDetailTiltButton-yellow-6" fill="white">
                  <use xlink:href="#path-HuoQingDetailTiltButton-yellow-5"></use>
                </mask>
                <path
                  stroke="url(#linearGradient-HuoQingDetailTiltButton-yellow-4)"
                  d="M79.8142999,0.5 L64.7699774,22.5 L5.69173996,22.5 L3.12676026,18.9652606 L15.7539119,0.5 L79.8142999,0.5 Z"
                ></path>
                <polygon
                  id="矩形"
                  fill="url(#linearGradient-HuoQingDetailTiltButton-yellow-7)"
                  mask="url(#mask-HuoQingDetailTiltButton-yellow-6)"
                  points="4.76194463 -8.7 18.7619446 -8.7 38.7619446 38.3 24.7619446 38.3"
                ></polygon>
                <polygon
                  id="矩形备份-6"
                  fill="url(#linearGradient-HuoQingDetailTiltButton-yellow-8)"
                  mask="url(#mask-HuoQingDetailTiltButton-yellow-6)"
                  transform="translate(21.7619, 31.7706) scale(-1, 1) translate(-21.7619, -31.7706)"
                  points="-8.23805537 -9.7 16.467827 -9.7 51.7619446 73.2411765 27.0560623 73.2411765"
                ></polygon>
                <polygon
                  id="路径-2"
                  fill="#F5A500"
                  points="1.81602869 20.266914 0 23 3.96190232 23"
                ></polygon>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="50%"
        y="75%"
        text-anchor="middle"
        :font-size="props.dataStyle.driveOrWalkFontSize"
        :fill="props.dataStyle.driveOrWalkFontColor"
      >
        {{ props.value }}
      </text>
    </svg>
  </div>
</template>

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