<template>
  <div  class="go-title-03">
    <n-input
        size="small"
        v-model:value="dataset"
        :minlength="1"
        type="textarea"
        placeholder=""
        
      />
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, 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 { replaceSqlParams } from '@/utils/sqlHandler';

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

const { w, h } = toRefs(props.chartConfig.attr)
const {
  textColor,
  textSize,
  backgroundColor,
  borderColor,
  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.dataset = resData;
    });
  });
})
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
  :deep(.n-input){
    height: v-bind('h+"px"');
    background: v-bind('backgroundColor');
  }
  :deep(.n-input__textarea-el) {
    color: v-bind('textColor');
    font-size: v-bind('textSize+"px"');
  }
  :deep(.n-input__state-border){
    border-color: v-bind('borderColor');
  }
}
</style>
