<template>
  <div  class="go-title-03">
    <div class="labelbox">{{ textValue }}</div>
    <svg :width="w" :height="h">
      <title>编组 24</title>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-67, -969)">
              <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.5, 736.0922)">
                              <g id="气象监测站" transform="translate(18.5, 21.0606)">
                                  <g id="编组-23" transform="translate(3, 97)">
                                      <g id="编组-24" transform="translate(0, 23.5)">
                                        <!-- w: 98, h: 39 -->
                                          <rect id="矩形" :stroke="colors[0]" x="0.5" y="0.5" :width="`${w/1.02}`" :height="`${h/1.05}`"></rect>
                                          <polygon 
                                            id="矩形" 
                                            :fill="colors[1]" 
                                            :points="`${w/21.78} ${h/11.14} ${w/1.18} ${h/11.14} ${w/1.05} ${h/2.92} ${w/1.05} ${h/1.16} ${w/21.78} ${h/1.16}`"></polygon>
                                          <g id="装饰线" :fill="colors[2]" fill-rule="nonzero">
                                              <polygon 
                                                id="路径-2" 
                                                :points="`${w/11.17} 0 ${w/12.69} ${w/49} ${h/19.5} ${w/49} ${h/19.5} ${h/5.13} 0 ${h/4.53} 0 1.64759693 0 0 ${w/64.9} 0`"
                                              ></polygon>
                                              <polygon 
                                                id="路径-2" 
                                                :transform="`translate(${w/1.06}, ${h/1.15}) scale(-1, -1) translate(-${w/1.06}, -${h/1.15})`" 
                                                :points="`${w/1.009} ${h/1.32} ${w/1.02} ${h/1.24} ${w/1.09} ${h/1.24} ${w/1.09} ${h/1.05} ${w/1.11} ${h/1.02} ${w/1.11} ${h/1.25} ${w/1.11} ${h/1.32} ${w/1.09} ${h/1.32}`"
                                              ></polygon>
                                          </g>
                                      </g>
                                  </g>
                              </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'
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';

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

const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  boxId,
  textColor,
  textSize,
  textBlod,
  textValue
} = toRefs(props.chartConfig.option)

 // 数据callback处理（预览时触发）
 useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
  props.chartConfig.option.textValue = resData;
});
</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;
  }
  .labelbox{
    display: flex;
    align-items: center;
    justify-content: center;
    color: v-bind('textColor');
    font-size: v-bind('textSize+"px"');
    font-weight: v-bind('textBlod');
  }
  .fill {
    fill: v-bind('colors[0]');
  }
  .fill-none {
    fill: none;
  }
  .stroke {
    stroke: v-bind('colors[1]');
  }
}
</style>
