<template>
  <div  class="go-title-03">
    <img :width="w" :height="h" src="/src/assets/images/chart/units/titlesbg01.png" />
    <div class="container">
      <div v-for="(item,index) in datasArr" class="li" :class="datasIndex==index?'active':''">{{item}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})
const datasArr = ref(['按年', '按月', '按日'])

const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  fontSize,
  datasIndex,
} = 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');
  img{
    position: absolute;
  }
  .container{
    width: 92%;
    height: 60%;
    border-radius: 10px;
    display: flex;
    .li{
      flex: 1;
      color: v-bind('colors[1]');
      font-size: v-bind('fontSize+"px"');
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active{
      background: v-bind('colors[1]');;
      color: v-bind('colors[0]');;
      border-radius: 5px;
    }
  }
}
</style>
