<template>
  <div  class="go-title-03">
    <span class="add">+</span>
    <span>{{text}}</span>
  </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 {
  text,
  colors,
  textSize,
} = toRefs(props.chartConfig.option)
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
  width: v-bind('w');
  height: v-bind('h');
  background-color: v-bind('colors[0]');
  border: 1px solid v-bind('colors[1]');
  color: v-bind('colors[2]');
  font-size: v-bind('textSize+"px"');
  cursor: pointer;
  .add{
    width: v-bind('textSize+"px"');
    height: v-bind('textSize+"px"');
    border: 1px solid v-bind('colors[2]');
    margin-right:10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
