<template>
  <div  class="go-title-03">
    <div class="flex ai-c jc-c column">
      <div class="dataValue flex ai-c jc-c"> {{dataset.value}} </div>
      <div class="dataLabel flex ai-c jc-c"> {{dataset.label}} </div>
    </div>
    
    <svg :width="w" :height="h">
      <title>编组 66</title>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-208, -321)">
              <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="编组-66" :transform="`translate(164.5, 11.9394)`">
                                
                                  <rect id="矩形" :stroke="colors[0]" x="0.00126503312" y="0.266825726" :width="`${w/1.03}`" :height="`${h/1.04}`"></rect>
                                  <polygon 
                                    id="矩形" :fill="colors[1]" 
                                    :points="`6 5 ${w/1.22} 5 ${w/1.05} ${h/6.33} ${w/1.05} ${h/1.06} 6 ${h/1.06}`"
                                  ></polygon>
                                  <polygon 
                                    id="路径-11" :fill="colors[2]" 
                                    :transform="`translate(${w/1.12}, 8.9194) scale(-1, 1) translate(-${w/1.12}, -8.9194)`" 
                                    :points="`${w/1.2} 5.26682573 ${w/1.2} ${h/7.68} ${w/1.06} 5.26682573`"
                                  ></polygon>
                                  <polyline 
                                    id="路径-32" :stroke="colors[3]" stroke-width="2" 
                                    :transform="`translate(${w/29.35}, ${h/26.12}) scale(1, -1) translate(-${w/29.35}, -${h/26.12})`" 
                                    :points="`0 0 0 ${h/13.06} ${w/14.67} ${h/13.06}`"
                                  ></polyline>
                                  <polyline 
                                    id="路径-32" :stroke="colors[3]" stroke-width="2" 
                                    :points="`0 ${h/1.13} 0 ${h/1.04} ${w/14.67} ${h/1.04}`"
                                  ></polyline>
                                  <!-- w: 103, h: 94 -->
                                  
                                  <polyline 
                                    id="路径-32" :stroke="colors[3]" stroke-width="2" 
                                    :transform="`translate(${w/1.06}, ${h/26.12}) scale(-1, -1) translate(-${w/1.09}, -${h/26.12})`" 
                                    :points="`${w/1.11} 1.42108547e-14 ${w/1.11} ${h/13.06} ${w/1.03} ${h/13.06}`"
                                  ></polyline>
                                  <polyline 
                                    id="路径-32" :stroke="colors[3]" stroke-width="2" 
                                    :transform="`translate(${w/1.06}, ${h/1.09}) scale(-1, 1) translate(-${w/1.09}, -${h/1.09})`" 
                                    :points="`${w/1.11} ${h/1.13} ${w/1.11} ${h/1.04} ${w/1.03} ${h/1.04}`"
                                  ></polyline>
                                  <rect 
                                    id="矩形" :fill="colors[4]" opacity="0.376644316" 
                                    :transform="`translate(${w/2.04}, ${h/2.11}) rotate(180) translate(-${w/2.04}, -${h/2.11})`" 
                                    :x="`${w/7.92}`" :y="`${h/2.14}`" :width="`${w/1.38}`" height="1"
                                  ></rect>
                              </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,
  textColors,
  textSize,
  textSize1,
  dataset
} = toRefs(props.chartConfig.option)

// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
  props.chartConfig.option.dataset = 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;
  }
  .fill {
    fill: v-bind('colors[0]');
  }
  .fill-none {
    fill: none;
  }
  .stroke {
    stroke: v-bind('colors[1]');
  }
  .dataLabel{
    color: v-bind('textColors[1]');
    font-size: v-bind('textSize1+"px"');
    height: v-bind('h/2+"px"');
  }
  .dataValue{
    height: v-bind('h/2+"px"');
    color: v-bind('textColors[0]');
    font-size: v-bind('textSize+"px"');
  }
  .column{
    flex-direction: column;
  }
  .flex{
    display: flex;
  }
  .jc-c{
    justify-content: center;
  }
  .ai-c{
    align-items: center;
  }
}
</style>
