<template>
  <div  class="go-title-03">
    <div class="box" v-for="item in dataset">
      <div class="label">
        <div class="circle"></div>
      </div>
      <div class="linebg">
        <div class="line">
          <div class="title">{{ item.label }}</div>
          <div class="valbox">{{ item.value }}</div>
        </div>
      </div>
      <div class="btnbox">{{ item.label }}</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 { w, h } = toRefs(props.chartConfig.attr)
const {
  textColors,
  textSize,
  backgroundColor,
  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;
  flex-direction: column;
  padding: 10px 14px;
  overflow: auto; 
  .box{
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    position: relative;
    .label{
      width: 87px;
      height: 32px;
      background: url('@/assets/images/chart/zhilan/zllabelicon01.png');
      background-size: 100% 100%;
      .circle{
        width: 33px;
        height: 32px;
        background: url('@/assets/images/chart/zhilan/zllabelicon02.png');
        background-size: 100% 100%;
      }
    }
    .linebg{
      flex:1;
      height: 2px;
      background: v-bind('backgroundColor');
      margin-left: -60px;
      margin-bottom: 16px;
      .line{
        width: 70%;
        height: 100%;
        background: #D4FFCC;
        box-shadow: 0px 0px 5px 0px rgba(102,255,115,0.7);
        border: 0px solid rgba(255,255,255,0.34);
        position: relative;
        .title{
          font-size: v-bind('textSize[0]+"px"');
          color: v-bind('textColors[0]');
          position: absolute;
          top: -30px;
          left: 10px;
        }
        .valbox{
          height: 24px;
          font-weight: bold;
          font-size: v-bind('textSize[1]+"px"');
          color: v-bind('textColors[1]');
          background: url('@/assets/images/chart/zhilan/textbg.png');
          background-size: 100% 100%;
          position: absolute;
          right: 0;top: -30px;
          transform: translateX(50%);
          padding: 0 4px;
        }
      }
    }
    .btnbox{
      width: 95px;
      height: 24px;
      background: url('@/assets/images/chart/zhilan/zlbtnbg.png');
      background-size: 100% 100%;
      margin-bottom: 5px;
      font-size: v-bind('textSize[2]+"px"');
      color: v-bind('textColors[2]');
      text-align: center;
      line-height: 24px;
    }
  }
}
/* 整个滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}
/* 滚动轨道的样式 */
::-webkit-scrollbar-track {
  background: #00611A; /* 轨道背景颜色 */
}
/* 滚动滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #0EB687; /* 滑块背景颜色 */
}
/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
}
</style>
