<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>编组 62</title>
      <defs>
          <linearGradient x1="0%" y1="50%" x2="109.584556%" y2="50%" :id="`1-${boxId}`">
              <stop :stop-color="colors[0]" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="0%" y1="26.0411944%" x2="50%" y2="60.9089071%" :id="`2-${boxId}`">
              <stop :stop-color="colors[2]" offset="0%"></stop>
              <stop :stop-color="colors[3]" offset="100%"></stop>
          </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智览-切图版" transform="translate(-59, -635)">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="B" transform="translate(53, 114)">
                      <g id="标题模块--左侧4" transform="translate(0.5, 483)">
                          <g id="巡护内容" transform="translate(17, 60)">
                              <g id="编组-62" transform="translate(0, 0)">
                                  <path :d="`M10.5834008,0 L${w-2},0 L${w-2},${h/1.24} L${w/1.1},${h-2} L0,${h-2} C0,55.6727336 0,48.4525336 0,36.3394002 L0,9.07473657 L10.5834008,0 Z`" id="矩形" :stroke="colors[4]"></path>
                                  <polygon 
                                    id="矩形" :fill="`url(#1-${boxId})`" 
                                    :points="`14.1332538 3.11724138 ${w-5} 3.11724138 ${w-5} ${h/2} ${w-14} ${h/1.68} 3.60994506 ${h/1.68} 3.60994506 11.623884`"
                                  ></polygon>
                                  <polygon 
                                    id="路径-11" :fill="`url(#2-${boxId})`" 
                                    :transform="`translate(${w/1.04}, ${h/1.09}) scale(-1, -1) translate(-${w/1.04}, -${h/1.09})`" 
                                    :points="`${w/1.07} ${h/1.17} ${w/1.07} ${h/1.02} ${w-1} ${h/1.17}`"
                                  ></polygon>
                                  <rect id="矩形" :fill="colors[5]" :x="`${w/9.26}`" :y="`${h/1.71}`" :width="`${w/1.95}`" 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>
