<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>编组 44</title>
      <defs>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
              <stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[1]" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
              <stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[1]" offset="100%"></stop>
          </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智览-切图版" transform="translate(-64, -150)">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="B" transform="translate(53, 114)">
                      <g id="标题模块--左侧1" transform="translate(0, -0)">
                          <g id="取水点" transform="translate(22, 57)">
                              <g id="编组-44" transform="translate(0.9551, 0.8862)">
                                <!-- w: 172, h: 71 -->
                                  <rect id="矩形" :stroke="colors[3]" x="0" y="0" :width="`${w-2}`" :height="`${h-2}`" rx="8"></rect>
                                  <path :d="`M8,0 ${w/2.13},0 ${w/2.13},0 ${w/3.75},${h-2} L8,${h-2} C3.581722,${h-2} 2.705415e-16,${h-5} 0,${h-10} L0,8 C-5.41083001e-16,3.581722 3.581722,5.41083001e-16 8,0 Z`" id="矩形" :fill="`url(#1-${boxId})`"></path>
                                  <path :d="`M8,0 ${w/2.46},0 ${w/2.46},0 ${w/3.34},${h-2} L8,${h-2} C3.581722,${h-2} 2.705415e-16,${h-5} 0,${h-10} L0,8 C-5.41083001e-16,3.581722 3.581722,5.41083001e-16 8,0 Z`" id="矩形" :fill="`url(#2-${boxId})`"></path>
                                  <rect id="矩形" :fill="colors[2]" :x="`${w/2.18}`" :y="`${h/2.03}`" :width="`${w/2.3}`" height="1"></rect>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  boxId
} = toRefs(props.chartConfig.option)
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 

  svg {
    position: absolute;
    z-index: -1;
  }
  .fill {
    fill: v-bind('colors[0]');
  }
  .fill-none {
    fill: none;
  }
  .stroke {
    stroke: v-bind('colors[1]');
  }
}
</style>
