<template>
  <div  class="go-title-03">
    <div class="bannerbox">
      <a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled>
        <div v-for="item in dataset.imgArr">
          <a-image :src="getAssetsImg(item)" />
        </div>
      </a-carousel>
    </div>
    <div class="flex column sectionsbox">
      <div class="flex mt-1" v-for="item in dataset.data">
        <div class="flex ai-c jc-c tasktitlesbox">
          <div class="dots"></div>
          <div class="titleText">{{ item.title }}</div>
        </div>
        <div class="desStyle">{{ item.desc }}</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';
import { EventBus } from '@/utils/eventBus';
import { getAppEnvConfig } from '@/utils/env'
import { getAssetsImg } from '@/utils/index';
import { replaceSqlParams } from '@/utils/sqlHandler';

var { VITE_GLOB_API_URL } = getAppEnvConfig();
const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})




const { w, h } = toRefs(props.chartConfig.attr)
const {
  colors,
  titleSize,
  titleColor,
  desColor,
  desSize,
  dataset
} = toRefs(props.chartConfig.option)



onMounted(()=>{
  
  const sql = props.chartConfig.request?.requestSQLContent?.sql;
  // 组件通信 获取列表中的信息
  EventBus.on(props.chartConfig.id+'dataupdate', (data) => {
    props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql,{Id:data.id})
    // 数据callback处理（预览时触发）
    useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {

      // props.chartConfig.option.dataset = resData;
      let data = [];

      props.chartConfig.option.showColumns?.forEach((item,index)=>{
        let info = {
          title:item.zh_name,
          desc:resData[0][firstLetterToLowerCase(item.en_name)]
        }
        data.push(info);
      })

      // 图片处理
      props.chartConfig.option.dataset.imgArr = [];
      let tempImages = resData[0].image.split(",");

      if(tempImages.length>0){
        tempImages?.forEach((img,idx)=>{
          props.chartConfig.option.dataset.imgArr.push(VITE_GLOB_API_URL+"/"+img)
        })
      }else{
        props.chartConfig.option.dataset.imgArr = [VITE_GLOB_API_URL+"/"+resData[0].image]
      }
    
      props.chartConfig.option.dataset.data = data;
    });
  });
})

function firstLetterToLowerCase(str) {
  return str.charAt(0).toLowerCase() + str.slice(1);
}

// 处理展示字段
const handlerShowColumns = ()=> {

}

</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  width: v-bind('w'+"px");
  height: v-bind('h'+"px");
  padding: 18px 20px;
  .max-w{
    width: 100%;
  }
  .column{
    flex-direction: column;
  }
  .flex{
    display: flex;
  }
  .jc-sb{
    justify-content: space-between;
  }
  .jc-sa{
    justify-content: space-around;
  }
  .ai-c{
    align-items: center;
  }
  .mt-1{
    margin-top: 5px;
  }
  .bannerbox{
    width: 100%;
    height: 44%;
    border: 1px solid v-bind('colors[0]');
    padding: 6px;
    margin-bottom: 40px;
  }
  .sectionsbox{
    width: 96%;
    margin: 0 auto;
  }
  .tasktitlesbox{
    width: 120px;
    height: 30px;
  }
  .dots{
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background: v-bind('colors[3]');
    margin-right: 8px;
  }
  .titleText{
    color: v-bind('titleColor');
    font-size: v-bind('titleSize+"px"');
  }
  .desStyle{
    width: calc(100% - 120px);
    color: v-bind('desColor');
    font-size: v-bind('desSize+"px"');
    line-height: 30px;
  }
  
  :deep(.ant-carousel){
    height: 100%;
  }
  :deep(.ant-image){
    width: 100%;
    height: 100%;
  }
  :deep(.slick-slider){
    height: 100%;
  }
  :deep(.slick-list){
    height: 100%;
  }
  :deep(.slick-track){
    height: 100%;
  }
  :deep(.slick-slide) {
    text-align: center;
    height: 100%;
    line-height: 100%;
    overflow: hidden;
  }
  :deep(.slick-slide img) {
    width: 100%;
    height: 100%;
  }
  :deep(.slick-dots) {
    position: relative;
    bottom: -20px;
  }
  :deep(.slick-dots li.slick-active button) {
    background: v-bind('colors[2]');
  }
  :deep(.slick-dots li button) {
    background: v-bind('colors[1]');
  }
  
}
</style>
