<template>
  <div>
    <!-- 绿色 -->
    <svg
      v-if="props.thisType != props.nowType"
      :width="props.dataStyle.typeButtonWidth"
      :height="props.dataStyle.typeButtonHeight"
      viewBox="0 0 115 32"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="50%"
          y1="-98.3856176%"
          x2="50%"
          y2="80.0197161%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-1"
        >
          <stop stop-color="#09A63D" offset="0%"></stop>
          <stop stop-color="#05441B" offset="100%"></stop>
        </linearGradient>
        <radialGradient
          cx="102.018952%"
          cy="111.362974%"
          fx="102.018952%"
          fy="111.362974%"
          r="78.3480262%"
          gradientTransform="translate(1.0202, 1.1136), scale(0.2788, 1), rotate(90), scale(1, 5.5632), translate(-1.0202, -1.1136)"
          id="radialGradient-ZhiGan_SheXiangTouModal-typeButton-green-2"
        >
          <stop stop-color="#1BF157" offset="0%"></stop>
          <stop stop-color="#09AF40" stop-opacity="0.298780641" offset="100%"></stop>
        </radialGradient>
        <path
          d="M16.1393711,0 L90.4347826,0 L90.4347826,0 L114.782609,32 L24.3478261,32 L9.77274159,12.8441747 L16.1393711,0 Z"
          id="path-ZhiGan_SheXiangTouModal-typeButton-green-3"
        ></path>
        <linearGradient
          x1="50%"
          y1="91.9466397%"
          x2="50%"
          y2="11.2470176%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-5"
        >
          <stop stop-color="#16FFA1" offset="0%"></stop>
          <stop stop-color="#02B56D" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="91.9466397%"
          x2="50%"
          y2="10.5142024%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-6"
        >
          <stop stop-color="#4786B3" stop-opacity="0.2" offset="0%"></stop>
          <stop stop-color="#A6E9FF" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="0.00956075175%"
          y1="50.0095608%"
          x2="99.9904392%"
          y2="50.0095608%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-7"
        >
          <stop stop-color="#07772C" offset="0.0191215035%"></stop>
          <stop stop-color="#58FF95" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-摄像头更多弹窗2.0" transform="translate(-645, -167)">
          <g id="弹窗" transform="translate(4, 2)">
            <g id="弹窗----" transform="translate(289, 139)">
              <g id="文字" transform="translate(18, 8)">
                <g
                  id="编组-35"
                  transform="translate(391.3913, 34) scale(-1, 1) translate(-391.3913, -34)translate(334, 18)"
                >
                  <mask id="mask-ZhiGan_SheXiangTouModal-typeButton-green-4" fill="white">
                    <use xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-green-3"></use>
                  </mask>
                  <g id="矩形">
                    <use
                      fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-1)"
                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-green-3"
                    ></use>
                    <use
                      fill="url(#radialGradient-ZhiGan_SheXiangTouModal-typeButton-green-2)"
                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-green-3"
                    ></use>
                  </g>
                  <polyline
                    id="路径-2"
                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-5)"
                    stroke-width="20"
                    opacity="0.34375"
                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-green-4)"
                    points="3.94055873 -4.39015104 85.1635013 -4.39015104 113.982609 33.7391304"
                  ></polyline>
                  <line
                    x1="-1.39130435"
                    y1="-2.7826087"
                    x2="28.4019451"
                    y2="36.173913"
                    id="路径-2"
                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-6)"
                    stroke-width="2"
                    opacity="0.34375"
                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-green-4)"
                  ></line>
                  <rect
                    id="矩形"
                    fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-green-7)"
                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-green-4)"
                    x="24.3478261"
                    y="30.6086957"
                    width="90.4347826"
                    height="1.39130435"
                  ></rect>
                  <path
                    d="M9.87240329,0 L11.9208233,0 L11.9208233,0 L7.04648815,9.6 L5.84167779,7.95858953 L9.87240329,0 Z"
                    id="路径-4"
                    fill="#EBBE10"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="50%"
        y="65%"
        text-anchor="middle"
        :font-size="props.dataStyle.typeButtonFontSize"
        :fill="props.dataStyle.typeButtonFontColor"
      >
        {{ props.typeName }}
      </text>
    </svg>
    <!-- 黄色 -->
    <svg
      v-if="props.thisType == props.nowType"
      :width="props.dataStyle.typeButtonWidth"
      :height="props.dataStyle.typeButtonHeight"
      viewBox="0 0 115 32"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="50%"
          y1="-98.3856176%"
          x2="50%"
          y2="80.0197161%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-1"
        >
          <stop stop-color="#E35D0D" offset="0%"></stop>
          <stop stop-color="#441405" offset="100%"></stop>
        </linearGradient>
        <radialGradient
          cx="102.018952%"
          cy="111.362974%"
          fx="102.018952%"
          fy="111.362974%"
          r="78.3480262%"
          gradientTransform="translate(1.0202, 1.1136), scale(0.2788, 1), rotate(90), scale(1, 5.5632), translate(-1.0202, -1.1136)"
          id="radialGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-2"
        >
          <stop stop-color="#F19E1B" offset="0%"></stop>
          <stop stop-color="#AF5E09" stop-opacity="0.298780641" offset="100%"></stop>
        </radialGradient>
        <path
          d="M16.1393711,0 L90.4347826,0 L90.4347826,0 L114.782609,32 L24.3478261,32 L9.77274159,12.8441747 L16.1393711,0 Z"
          id="path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"
        ></path>
        <linearGradient
          x1="50%"
          y1="91.9466397%"
          x2="50%"
          y2="11.2470176%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-5"
        >
          <stop stop-color="#FF7F16" offset="0%"></stop>
          <stop stop-color="#B54602" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="91.9466397%"
          x2="50%"
          y2="10.5142024%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-6"
        >
          <stop stop-color="#B36347" stop-opacity="0.2" offset="0%"></stop>
          <stop stop-color="#FF6903" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="0.00956075175%"
          y1="50.0095608%"
          x2="99.9904392%"
          y2="50.0095608%"
          id="linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-7"
        >
          <stop stop-color="#C45F06" offset="0.0191215035%"></stop>
          <stop stop-color="#FFE858" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-摄像头更多弹窗2.0" transform="translate(-752, -167)">
          <g id="弹窗" transform="translate(4, 2)">
            <g id="弹窗----" transform="translate(289, 139)">
              <g id="文字" transform="translate(18, 8)">
                <g
                  id="编组-44"
                  transform="translate(498.3913, 34) scale(-1, 1) translate(-498.3913, -34)translate(441, 18)"
                >
                  <mask id="mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4" fill="white">
                    <use xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"></use>
                  </mask>
                  <g id="矩形">
                    <use
                      fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-1)"
                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"
                    ></use>
                    <use
                      fill="url(#radialGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-2)"
                      xlink:href="#path-ZhiGan_SheXiangTouModal-typeButton-yellow-3"
                    ></use>
                  </g>
                  <polyline
                    id="路径-2"
                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-5)"
                    stroke-width="20"
                    opacity="0.34375"
                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4)"
                    points="3.94055873 -4.39015104 85.1635013 -4.39015104 113.982609 33.7391304"
                  ></polyline>
                  <line
                    x1="-1.39130435"
                    y1="-2.7826087"
                    x2="28.4019451"
                    y2="36.173913"
                    id="路径-2"
                    stroke="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-6)"
                    stroke-width="2"
                    opacity="0.34375"
                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4)"
                  ></line>
                  <rect
                    id="矩形"
                    fill="url(#linearGradient-ZhiGan_SheXiangTouModal-typeButton-yellow-7)"
                    mask="url(#mask-ZhiGan_SheXiangTouModal-typeButton-yellow-4)"
                    x="24.3478261"
                    y="30.6086957"
                    width="90.4347826"
                    height="1.39130435"
                  ></rect>
                  <path
                    d="M9.87240329,0 L11.9208233,0 L11.9208233,0 L7.04648815,9.6 L5.84167779,7.95858953 L9.87240329,0 Z"
                    id="路径-4"
                    fill="#EBBE10"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="50%"
        y="65%"
        text-anchor="middle"
        :font-size="props.dataStyle.typeButtonFontSize"
        :fill="props.dataStyle.typeButtonFontColor"
      >
        {{ props.typeName }}
      </text>
    </svg>
  </div>
</template>

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