<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>编组 69</title>
      <defs>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
              <stop :stop-color="colors[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[2]" offset="0%"></stop>
              <stop :stop-color="colors[3]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-55, -319)">
              <g id="可视化" transform="translate(-0.5, -1)">
                  <g id="模块" transform="translate(45.5, 92)">
                      <g id="编组-7" transform="translate(0, 0.8472)">
                          <g id="标题模块--左侧1" transform="translate(0, 219.1528)">
                              <g id="编组-69" transform="translate(10.5, 8.9394)">
                                <!-- w: 142, h: 98 -->
                                  <rect id="矩形" :stroke="colors[4]" :x="`${w/5.46}`" y="1" :width="`${w/1.34}`" :height="`${h-4}`"></rect>
                                  <g id="小标题" :fill="`url(#1-${boxId})`">
                                      <polygon 
                                        id="矩形" 
                                        :transform="`translate(${w/7.1}, ${h/2.03}) scale(-1, -1) translate(-${w/7.1}, -${h/2.03})`" 
                                        :points="`8 3.49663456e-14 ${w/3.55} 3.49663456e-14 ${w/3.55} ${h/1.12} ${w/4.53} ${h-2} -6.9388939e-17 ${h-2} 0 9.06995383`"
                                      ></polygon>
                                      <text id="卫-星" font-family="PingFangSC-Regular, PingFang SC" :font-size="textSize" font-weight="normal" fill="#F5FFF6">
                                        <tspan :x="`${w/14.2}`" :y="`${h/2.39}`">卫</tspan>
                                        <tspan :x="`${w/14.2}`" :y="`${h/1.42}`">星</tspan>
                                      </text>
                                  </g>
                                  <rect 
                                    id="矩形" :fill="colors[5]" 
                                    :transform="`translate(${w/1.06}, ${h/1.94}) rotate(90) translate(-${w/1.06}, -${h/1.94})`" 
                                    :x="`${w/1.46}`" :y="`${h/1.96}`" :width="`${w/1.9}`" height="1"
                                  ></rect>
                                  <rect id="矩形" 
                                    :fill="colors[6]" 
                                    :transform="`translate(${w/1.097}, ${h/1.94}) rotate(90) translate(-${w/1.097}, -${h/1.94})`" 
                                    :x="`${w/1.54}`" :y="`${h/1.96}`" :width="`${w/1.9}`" height="1"
                                  ></rect>
                                  <polygon 
                                    id="三角形" 
                                    :fill="`url(#2-${boxId})`" 
                                    :transform="`translate(${w-5}, ${h/2.1}) rotate(90) translate(-${w-5}, -${h/2.1})`" 
                                    :points="`${w-5} ${h/2.28} ${w+1.5} ${h/1.95} ${w-11.5} ${h/1.95}`"></polygon>
                              </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,
  textSize
} = 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>
