<script setup lang="tsx">
    import { ref,watch } from 'vue';
    import { ElTabs,ElTabPane,ElMessage } from 'element-plus';
    import ProcedureConfig from '@/views/IndexProcess/ProcedureRule/components/ProcedureConfig.vue';
    import SetParams from './components/SetParams.vue';
    import BasicInfo from './components/BasicInfo.vue';

    import { saveRepSetRuleApi } from '@/api/dataset/RepSetRule/index'

    const props = defineProps({
      actionType: {
        type: String,
        default: 'add'
      },
      ruleInfo:{//规则信息
        type:Object,
        default:()=>{}
      },
    })

    //保存sql规则信息
    const procedureConfig = ref<ComponentRef<typeof ProcedureConfig>>();//sql规则
    const setParams = ref<ComponentRef<typeof SetParams>>();//参数设置
    const basicInfo = ref<ComponentRef<typeof BasicInfo>>();//基本信息

    const procedureConfigRef = ref(procedureConfig);
    const setParamsRef = ref(setParams);
    const basicInfoRef = ref(basicInfo);
    let loading = ref(false);
    const emit = defineEmits(['closeDialogVisible']);
    //保存SQL规则信息
    const saveSqlRule = async()=>{
      loading.value = true;
      const procedureConfigSubmit = await procedureConfigRef.value?.submit();
      let setParamsSubmit = await setParamsRef.value?.submit();
      const basicInfoSubmit = await basicInfoRef.value?.submit();
      if (setParamsSubmit && procedureConfigSubmit) {
        setParamsSubmit.ruleJson.dataSourceId = procedureConfigSubmit.dataSourceId;
        setParamsSubmit.ruleJson = JSON.stringify(setParamsSubmit.ruleJson);
      }
       saveRepSetRuleApi(Object.assign(basicInfoSubmit,setParamsSubmit,procedureConfigSubmit,{ruleClass:'SqlRule'})).then(res=>{
        loading.value = false;
        if(res.head.code == '0'){
          ElMessage.success('保存成功');
          emit('closeDialogVisible');
        }else{
          ElMessage.error(res.head.message);
        }
      }).catch(err=>{
        loading.value = false;
        ElMessage.error('保存失败');
      })
    }

    
</script>
<template>
  <ContentWrap v-loading="loading">
    <ElTabs tab-position="left" style="height: 100%;">
      <ElTabPane label="SQL">
        <ProcedureConfig ref="procedureConfig" rule-type="SqlRule" :rule-info="props.ruleInfo" />
      </ElTabPane>
      <ElTabPane label="参数配置">
        <SetParams ref="setParams" :rule-info="props.ruleInfo" />
      </ElTabPane>
      <ElTabPane label="基本信息">
        <BasicInfo ref="basicInfo" @save-sql-rule="saveSqlRule" :rule-info="props.ruleInfo" :actionType="props.actionType" />
      </ElTabPane>
    </ElTabs>
  </ContentWrap>
</template>