<template>
  <div  class="go-title-03">
    <svg :width="w" :height="h">
      <title>编组 64</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]" stop-opacity="0.73789882" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
              <stop :stop-color="colors[1]" stop-opacity="0.751748252" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
              <stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0.73789882" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`4-${boxId}`">
              <stop :stop-color="colors[1]" stop-opacity="0.751748252" offset="0%"></stop>
              <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <polygon :id="`5-${boxId}`" :points="`${w/5.41} 0 ${w-1} 0 ${w/1.26} ${h} ${w/16.46} ${h} ${w/40.5} ${h/1.21}`"></polygon>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`7-${boxId}`">
              <stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
              <stop :stop-color="colors[3]" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`8-${boxId}`">
              <stop :stop-color="colors[2]" stop-opacity="0" 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(-321, -806)">
              <g id="可视化" transform="translate(-11, -21)">
                  <g id="B" transform="translate(53, 114)">
                      <g id="标题模块--左侧5" transform="translate(0.5, 701)">
                          <g id="小标题-火情趋势分析" transform="translate(0.499, 0)">
                              <g id="编组-64" transform="translate(278.001, 12)">
                                <!-- w: 81, h: 23 -->
                                  <path :d="`M${w-7},0.5 L${w-4},4.31042769 L${w/1.26},${h/1.02} L${w/14.75},${h/1.02} L${w/30.8},${h/1.21} L${w/5.28},0.5 L${w/1.09},0.5 Z`" id="矩形" :fill="`url(#1-${boxId})`" :stroke="`url(#2-${boxId})`" ></path>
                                  <mask :id="`6-${boxId}`" fill="white">
                                      <use xlink:href="#path-5"></use>
                                  </mask>
                                  <path :stroke="`url(#4-${boxId})`" :d="`M${w-2},0.5 L${w/1.26},${h/1.02} L${w/15.64},${h/1.02} L${w/31.03},${h/1.21} L${w/5.31},0.5 L${w-1},0.5 Z`"></path>
                                  <!-- <polygon 
                                    id="矩形" :fill="`url(#7-${boxId})`" :mask="`url(#6-${boxId})`" 
                                    :points="`${w/17.02} -${h/2.64} ${w/4.32} -${h/2.64} ${w/2.09} ${h/0.6} ${w/3.27} ${h/0.6}`"
                                  ></polygon>
                                  <polygon 
                                    id="矩形备份-6" :fill="`url(#8-${boxId})`" :mask="`url(#6-${boxId})`" 
                                    :transform="`translate(${w/3.72}, ${h/0.72}) scale(-1, 1) translate(-${w/3.72}, -${h/0.72})`" 
                                    :points="`-${w/9.83} -${h/2.37} ${w/4.92} -${h/2.37} ${w/1.56} ${h/0.31} ${w/2.99} ${h/0.31}`"
                                  ></polygon> -->
                                  <polygon id="路径-2" :fill="colors[4]" :points="`${w/44.51} ${h/1.13} 0 ${h} ${w/20.44} ${h}`"></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
} = 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>
