<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>底部背景-左1@2x</title>
      <defs>
          <linearGradient x1="100%" y1="50%" x2="0%" 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>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.687237694">
          <g id="林业防火-智览-切图版" transform="translate(-42, -94)" :fill="`url(#1-${boxId})`">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="B" transform="translate(53, 114)">
                      <g id="标题模块--左侧1" transform="translate(0, -0)">
                          <g id="边框" transform="translate(0.5, 1)">
                            <!-- w: 401, h: 150, -->
                              <polygon 
                                id="面" 
                                :points="`0.5 0 ${w-1.3} 0 ${w-1.5} ${h-1.3} ${w/2.19} ${h-1.3} 0.5 ${h-1.3} 0.5 ${h/1.42} ${h/2.09}`"
                              ></polygon>
                                points="0.499001996 0 399.700599 0 399.539646 148.702595 
                                183.224719 148.702595 0.499001996 148.702595 0.499001996 105.987857 0.499001996 71.8606827"
                          </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>
