<template>
  <div  class="go-title-03">
    <div class="box" v-for="(item,index) in dataset">
      <div class="label">{{ item.label }}</div>
      <div class="chartsbox">
        <div class="val" :style="'margin-left:'+ (item.value)/maxValue*70 +'%'">{{ item.value }}</div>
        <div class="bg">
          <div class="rate" 
              :style="{
                  width: `${(item.value / maxValue * 90)}%`,
                  background: `linear-gradient(90deg, 
                    ${animalColor[index] ? animalColor[index].color1 : animalColor[0].color1} 0%, 
                    ${animalColor[index] ? animalColor[index].color2 : animalColor[0].color2} 100%)`}">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, onMounted } 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 maxValue = ref()
const { w, h } = toRefs(props.chartConfig.attr)
const {
  textColors,
  textSize,
  borderColor,
  backgroundColor,
  animalColor,
  dataset,
} = toRefs(props.chartConfig.option)

onMounted(() => {
  let arr = []
  props.chartConfig.option.dataset.forEach(item =>{
    arr.push(item.value)
  })
  maxValue.value = Math.max.apply(null, arr);
});
 // 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
  props.chartConfig.option.dataset = resData;
  let arr = []
  resData.forEach(item =>{
    arr.push(item.value)
  })
  maxValue.value = Math.max.apply(null, arr);
});
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  overflow: auto; 
  .box{
    display: flex;
    width: 100%;
    height: 50px;
    .label{
      width: 80px;
      height: 100%;
      display: flex;
      align-items: end;    
      justify-content: end;
      color: v-bind('textColors[0]');
      font-size: v-bind('textSize[0]+"px"'); 
      margin-right: 15px;
    }
    .chartsbox{
      width: calc(100% - 81px);
      height: 100%;    
      border-left: 1px solid v-bind('borderColor');
      .val{
        font-weight: bold;
        font-size: v-bind('textSize[1]+"px"');
        color: v-bind('textColors[1]');
        line-height: 30px;
      }
      .bg{
        width: 100%;
        height: 10px;
        background: v-bind('backgroundColor');
        .rate{
          height: 100%;
        }
      }
    }
  }
}
/* 整个滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}
/* 滚动轨道的样式 */
::-webkit-scrollbar-track {
  background: #00611A; /* 轨道背景颜色 */
}
/* 滚动滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #0EB687; /* 滑块背景颜色 */
}
/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
}
</style>
