<template>
  <div>
    <!-- 绿色 -->
    <svg
      v-if="props.item.route_key != props.nowLine"
      width="71px"
      height="23px"
      viewBox="0 0 71 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-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-1"
        >
          <stop stop-color="#0D8F2F" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#0C9630" offset="99.8235529%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="99.7159945%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-2"
        >
          <stop stop-color="#0B9830" offset="0%"></stop>
          <stop stop-color="#005516" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-3"
        >
          <stop stop-color="#583700" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#FF9538" stop-opacity="0.73789882" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-4"
        >
          <stop stop-color="#FFB90D" stop-opacity="0.751748252" offset="0%"></stop>
          <stop stop-color="#FF9538" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <polygon
          id="path-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-5"
          points="0.791888084 0 70.0903863 0 54.3622309 23 0.791888084 23"
        ></polygon>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-7"
        >
          <stop stop-color="#0B972F" offset="0%"></stop>
          <stop stop-color="#0B962F" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-8"
        >
          <stop stop-color="#E3AC5C" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#0B9630" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智处-任务下发-规划方案2.0" transform="translate(-1538, -539)">
          <g id="路径规划弹窗---" transform="translate(453.7715, 147.0542)">
            <g id="文字" transform="translate(1060.2285, 10.2458)">
              <g id="list" transform="translate(1, 366.7)">
                <g id="编组-32" transform="translate(23.3944, 15)">
                  <path
                    d="M63.8772097,0.5 L66.6307967,4.31042769 L54.1921698,22.5 L0.5,22.5 L0.5,0.5 L63.8772097,0.5 Z"
                    id="矩形"
                    stroke="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-2)"
                    fill="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-1)"
                  ></path>
                  <mask id="mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-6" fill="white">
                    <use xlink:href="#path-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-5"></use>
                  </mask>
                  <path
                    stroke="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-4)"
                    d="M69.1427415,0.5 L54.098419,22.5 L1.29188808,22.5 L1.29188808,0.5 L69.1427415,0.5 Z"
                  ></path>
                  <polygon
                    id="矩形"
                    fill="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-7)"
                    mask="url(#mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-6)"
                    points="-5.39442474 -8.7 8.60557526 -8.7 28.6055753 38.3 14.6055753 38.3"
                  ></polygon>
                  <polygon
                    id="矩形备份-6"
                    fill="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-8)"
                    mask="url(#mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-6)"
                    transform="translate(11.6056, 31.7706) scale(-1, 1) translate(-11.6056, -31.7706)"
                    points="-18.3944247 -9.7 6.31145761 -9.7 41.6055753 73.2411765 16.8996929 73.2411765"
                  ></polygon>
                  <polygon
                    id="路径-2"
                    fill="#F5A500"
                    mask="url(#mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-green-6)"
                    points="0.105575256 20.2237278 0.105575256 23 4.06747758 23"
                  ></polygon>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="40%"
        y="70%"
        text-anchor="middle"
        :font-size="props.dataStyle.driveOrWalkFontSize"
        :fill="props.dataStyle.driveOrWalkFontColor"
      >
        方案 {{ props.item.route_key + 1 }}
      </text>
    </svg>
    <!-- 黄色 -->
    <svg
      v-if="props.item.route_key == props.nowLine"
      width="71px"
      height="23px"
      viewBox="0 0 71 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-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-1"
        >
          <stop stop-color="#583700" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#FFB709" stop-opacity="0.73789882" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="99.7159945%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-2"
        >
          <stop stop-color="#FFD814" stop-opacity="0.751748252" offset="0%"></stop>
          <stop stop-color="#D8A100" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-3"
        >
          <stop stop-color="#583700" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#FF9538" stop-opacity="0.73789882" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-4"
        >
          <stop stop-color="#FFB90D" stop-opacity="0.751748252" offset="0%"></stop>
          <stop stop-color="#FF9538" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <polygon
          id="path-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-5"
          points="2.80458636e-13 0 69.2984982 0 53.5703428 23 2.80458636e-13 23"
        ></polygon>
        <linearGradient
          x1="50%"
          y1="0%"
          x2="50%"
          y2="100%"
          id="linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-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-ZhiChu_LuXianGuHua-lineButtonFunctioin-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="林业防火-智处-任务下发-规划方案2.0" transform="translate(-1538, -473)">
          <g id="路径规划弹窗---" transform="translate(453.7715, 147.0542)">
            <g id="文字" transform="translate(1060.2285, 10.2458)">
              <g id="list" transform="translate(1, 300.7)">
                <g id="方案-选中" transform="translate(8, 12)">
                  <g id="编组-24" transform="translate(15.3944, 3)">
                    <path
                      d="M63.8772097,0.5 L66.6307967,4.31042769 L54.1921698,22.5 L0.5,22.5 L0.5,0.5 L63.8772097,0.5 Z"
                      id="矩形"
                      stroke="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-2)"
                      fill="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-1)"
                    ></path>
                    <g id="编组-20" transform="translate(0.7919, 0)">
                      <mask id="mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-6" fill="white">
                        <use
                          xlink:href="#path-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-5"
                        ></use>
                      </mask>
                      <path
                        stroke="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-4)"
                        d="M68.3508534,0.5 L53.3065309,22.5 L0.5,22.5 L0.5,0.5 L68.3508534,0.5 Z"
                      ></path>
                      <polygon
                        id="矩形"
                        fill="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-7)"
                        mask="url(#mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-6)"
                        points="-6.18631283 -8.7 7.81368717 -8.7 27.8136872 38.3 13.8136872 38.3"
                      ></polygon>
                      <polygon
                        id="矩形备份-6"
                        fill="url(#linearGradient-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-8)"
                        mask="url(#mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-6)"
                        transform="translate(10.8137, 31.7706) scale(-1, 1) translate(-10.8137, -31.7706)"
                        points="-19.1863128 -9.7 5.51956952 -9.7 40.8136872 73.2411765 16.1078048 73.2411765"
                      ></polygon>
                      <polygon
                        id="路径-2"
                        fill="#F5A500"
                        mask="url(#mask-ZhiChu_LuXianGuHua-lineButtonFunctioin-yellow-6)"
                        points="-0.686312828 20.2237278 -0.686312828 23 3.2755895 23"
                      ></polygon>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <text
        x="40%"
        y="70%"
        text-anchor="middle"
        :font-size="props.dataStyle.driveOrWalkFontSize"
        :fill="props.dataStyle.driveOrWalkFontColor"
      >
        方案 {{ props.item.route_key + 1 }}
      </text>
    </svg>
  </div>
</template>

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