<template>
  <div  class="go-title-03">
    <div class="headerbox">
      <div class="headerli" v-for="item in headerData">{{item}}</div>
    </div>
    <div class="sectionbox">
      <div class="secli" v-for="item in dataset">
        <div class="li">
          <div class="la">{{ item.title }}</div>
        </div>
        <div class="li">
          <div class="la">{{ item.target }}</div>
        </div>
        <div class="li time">{{ item.startTime }}</div>
        <div class="li time">{{ item.endTime }}</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 { w, h } = toRefs(props.chartConfig.attr)
const {
  textColors,
  textSize,
  backgroundColors,
  dataset,
  headerData
} = 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;
  .headerbox{
    height: 38px;
    background: v-bind('backgroundColors[0]');
    display: flex;
    .headerli{
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: v-bind('textSize[0]+"px"');
      color: v-bind('textColors[0]');
    }
  }
  .sectionbox{
    height: calc(100% - 38px);
    overflow: auto; 
    background: v-bind('backgroundColors[0]');
    .secli{
      background: v-bind('backgroundColors[1]');
      display: flex;
      height: 38px;
      .li{
        width: 0;
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: v-bind('textSize[1]+"px"');
        color: v-bind('textColors[1]');
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        text-align: center;
        .la{
          white-space: nowrap; 
          overflow: hidden; 
          text-overflow: ellipsis;
        }
      }
      .time{
        white-space: normal; 
      }
    }
    .secli:nth-child(2n){
      background: v-bind('backgroundColors[2]');
    }
  }
  
}
/* 整个滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}
/* 滚动轨道的样式 */
::-webkit-scrollbar-track {
  background: #00611A; /* 轨道背景颜色 */
}
/* 滚动滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #0EB687; /* 滑块背景颜色 */
}
/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
}
</style>
