<template>
  <div  class="go-title-02">
    <svg :width="w" :height="h">
      <defs>
        <linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :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="100%" y1="50%" x2="0%" y2="50%" :id="`2-${boxId}`">
            <stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
            <stop :stop-color="colors[3]" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`3-${boxId}`">
            <stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
            <stop :stop-color="colors[4]" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`33-${boxId}`">
          <stop :stop-color="colors[2]" stop-opacity="0" offset="0"></stop>
          <stop :stop-color="colors[4]" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`4-${boxId}`">
            <stop :stop-color="colors[5]" offset="0%"></stop>
            <stop :stop-color="colors[6]" offset="50.0147947%"></stop>
            <stop :stop-color="colors[7]" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`5-${boxId}`">
            <stop :stop-color="colors[8]" offset="0%"></stop>
            <stop :stop-color="colors[9]" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-导航页-图标区" transform="translate(-138, -5)">
            <g id="图形-左" transform="translate(138, 8)">
                <!-- <polygon class="polychild1" id="矩形" :stroke="`url(#1-${boxId})`" stroke-width="2" points="128 22 455 22 455 162 128 162 186 89.8917957"></polygon> -->
                <!-- <polygon id="矩形" :fill="`url(#2-${boxId})`" points="128 22 455 22 455 162 128 162 128 89.637655"></polygon> -->
                <polygon
                  id="矩形" 
                  :stroke="`url(#1-${boxId})`" 
                  stroke-width="2"
                  :points="`${w/4} ${h/4*0.5} ${w} ${h/4*0.5} ${w}  ${h/4*3.5} ${w/4} ${h/4*3.5} ${w/2.6} ${h/2}`"
                />
                <polygon
                  id="矩形" :fill="`url(#2-${boxId})`"
                  :points="`${w/4} ${h/4*0.5} ${w} ${h/4*0.5} ${w}  ${h/4*3.5} ${w/4} ${h/4*3.5} ${w/2.6} ${h/2}`"
                /> 
                <rect id="矩形" :fill="`url(#3-${boxId})`" opacity="0.752117339" :x="`${w/3*2}`" :y="`${h/3}`" :width="`${w/4}`" :height="`${h/3}`"></rect>
                <rect id="矩形" :fill="`url(#33-${boxId})`" opacity="0.752117339" :x="`${w/3*2-w/4}`" :y="`${h/3}`" :width="`${w/4}`" :height="`${h/3}`"></rect>
                <g id="编组-6">
                    <!-- <polygon id="多边形" :fill="`url(#4-${boxId})`" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon> -->
                    <!-- <polygon id="多边形" :stroke="`url(#5-${boxId})`" stroke-width="4" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon> -->
                  
                    <polygon
                      id="多边形"
                      :fill="`url(#4-${boxId})`"
                      :points="`${w/4.8} 5 ${w/2.6} ${h/4} ${w/2.6} ${h/4*3} ${w/4.8} ${h-5} 12.3256629 ${h/4*3} 12.3256629 ${h/4}`"
                    />
                    <polygon
                      id="多边形" stroke-width="4"
                      :stroke="`url(#5-${boxId})`"
                      :points="`${w/4.8} 5 ${w/2.6} ${h/4} ${w/2.6} ${h/4*3} ${w/4.8} ${h-5} 12.3256629 ${h/4*3} 12.3256629 ${h/4}`"
                    />
                </g>
            </g>
        </g>
    </g>
    </svg>
  </div>
</template>

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

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

const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  boxId,
} = toRefs(props.chartConfig.option)
</script>

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

  svg {
    position: absolute;
    z-index: -1;
  }
}
</style>
