<template>
  <div  class="go-title-03">
    <div class="container flex ai-c" v-for="(item, index) in dataset">
      <img class="img" src="@/assets/images/chart/tasks/routebg.png" />
      <div class="flex ai-c jc-c">
        <img class="iconsbox" v-if="index%2==0" src="@/assets/images/chart/tasks/taskicon04.png" />
        <img class="iconsbox" v-if="index%2!=0" src="@/assets/images/chart/tasks/taskicon05.png" />
        <div class="plantitle">
          <img class="titleimg" v-if="index%2==0" src="@/assets/images/chart/tasks/taskbtn01.png" />
          <img class="titleimg" v-if="index%2!=0" src="@/assets/images/chart/tasks/taskbtn02.png" />
          <div class="text1 max-h flex ai-c jc-c">方案{{ index+1 }}</div>
        </div>
      </div>
      <div class="flex ai-c ml-1 pos-r">
        <div class="text2">耗时 <span class="text3">{{ item.time }}</span> 分钟</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs } 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 {
  dataset,
  colors,
  textSize1,
  textSize2,
  textSize3,
} = 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;
  width: v-bind('w');
  height: v-bind('h');
  overflow: auto;
  .flex{
    display: flex;
  }
  .jc-sb{
    justify-content: space-between;
  }
  .jc-sa{
    justify-content: space-around;
  }
  .jc-c{
    justify-content: center;
  }
  .ai-c{
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .max-w{
    width: 100%;
  }
  .max-h{
    height: 100%;
  }
  .ml-1{
    margin-left: 11px;
  }
  .container{
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    position: relative;
    .img{
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .iconsbox{
      width: 15px;
      height: 15px;
      margin-left: 15px;
      position: relative;
    }
    .plantitle{
      position: relative;
      width: 71px;
      height: 23px;
      .titleimg{
        position: absolute;
        height: 100%;
      }
      .text1{
        width: 80%;
        color: v-bind('colors[0]');
        font-size: v-bind('textSize1+"px"');
      }
    }
    .text2{
      color: v-bind('colors[1]');
      font-size: v-bind('textSize2+"px"');
    }
    .text3{
      color: v-bind('colors[2]');
      font-size: v-bind('textSize3+"px"');
      margin: 0 12px;
    }
  }

}
/* 整个滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}
/* 滚动轨道的样式 */
::-webkit-scrollbar-track {
  background: #00611A; /* 轨道背景颜色 */
}
/* 滚动滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #0EB687; /* 滑块背景颜色 */
}
/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
}

</style>
