<template>
  <div class="container">
    <svg
      width="120px"
      height="40px"
      viewBox="0 0 88 26"
      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="-21.8928848%"
          y2="50%"
          id="linearGradient-XianSuoShangBao-mark-1"
        >
          <stop stop-color="#02221B" offset="0%"></stop>
          <stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
          <g id="可视化" transform="translate(-8, -1)">
            <g id="模块" transform="translate(53, 92)">
              <g id="标题模块--右侧1" transform="translate(1449.5, 444)">
                <g id="按钮" transform="translate(288, 49)">
                  <rect
                    id="矩形"
                    stroke="#06A475"
                    fill-opacity="0.4"
                    x="0.5"
                    y="0.5"
                    width="86"
                    height="25"
                  ></rect>
                  <polygon
                    id="路径-11"
                    fill="#06A475"
                    points="0.5 0 0.5 7.33194884 8.38666648 0"
                  ></polygon>
                  <polygon
                    id="路径-11"
                    fill="#06A475"
                    transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
                    points="78.5 18 78.5 25.3319488 86.3866665 18"
                  ></polygon>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
    <n-select
      class="overlay-select"
      v-model:value="props.type"
      size="small"
      :options="props.typeOptions"
    />
  </div>
</template>

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

<style lang="scss" scoped>
  .container {
    position: absolute;
    left: 245px;
    display: inline-block;

    .overlay-select {
      position: absolute;
      width: 115px;
      top: 45%;
      left: 15%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }
  }
</style>
