<template>
  <div  class="go-title-03">
    <a-radio-group v-model:value="dataValue" name="radioGroup">
      <a-radio v-for="item in dataset" :value="item.value">{{item.label}}</a-radio>
    </a-radio-group>
  </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 {
  colors,
  textColor,
  textSize,
  checkColor,
  dataValue,
  dataset
} = toRefs(props.chartConfig.option)
// 数据callback处理（预览时触发）

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.dataValue = resData;
    });
  });
})

</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 

  :deep(.ant-radio-wrapper){
    color: v-bind('textColor');
    font-size: v-bind('textSize+"px"');
    margin-right: 20px;
  }
  :deep(.ant-radio-inner) {
     border-color: v-bind('colors[0]');
     background: v-bind('colors[1]');
  }
  :deep( .ant-radio-checked .ant-radio-inner){
    background: v-bind('checkColor');
  }
}
</style>
