<script setup lang="tsx">
import { ElCol,ElForm, ElFormItem, ElSelect, ElOption, ElInput } from 'element-plus';
import { PropType,ref,reactive, watch,onMounted } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import * as monaco from 'monaco-editor';

const { required } = useValidator()
const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  },
  ruleType:{
    type: String,
    default: 'ProcedureRule'
  }
})


// const formSchema = reactive<FormSchema[]>([
//   {
//     //数据源Id：dataSourceId
//     field: 'schema',
//     label: '数据源',
//     component: 'Select',
//     colProps: {
//       span: 24
//     },
//     componentProps:{
//     }
//   },
//   {
//     field: 'procedureName',
//     label: '存储过程名称',
//     component: 'Input',
//     colProps: {
//       span: 24
//     },
//     hidden:props.ruleType == 'SqlRule'
//   },
//   {
//     field: 'procedureContent',
//     label: '存储过程',
//     component: 'Input',
//     colProps: {
//       span: 24
//     },
//     value:'',
//     componentProps:{
//       type:'textarea',
//       rows: 12,
//       placeholder:'请输入存储过程'
//     }
//   },
// ])

const rules = reactive({
  schema: [required('请选择数据源')],
  procedureName:[required('请输入存储过程名称')],

})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
  },
  {
    deep: true,
    immediate: true
  }
)
let sqlInfo = reactive({
  schema:"",//数据源信息
  dataSourceList:[],//数据源list
  procedureName:"",//存储过程名称
  procedureParams:"",//存储过程参数
  pureSql:''//sql
})

const sqlEditor = ref(null);
let editorInstance = null;

const InitEditorInstance = () => {
  editorInstance = monaco.editor.create(sqlEditor.value, {
    value: sqlInfo.pureSql,
    language: 'sql',
    theme: 'vs',
    automaticLayout: true,
    fontSize:15,
  });

  editorInstance.onDidChangeModelContent(() => {
    sqlInfo.pureSql = editorInstance.getValue();
  });
}
onMounted(()=>{
  {
  InitEditorInstance();
}
}) 
//格式化SQL
const formatterSql = ()=>{

}

</script>

<template>
  <ElForm :model="sqlInfo" label-width="auto" :rules="rules">
    <ElRow>
      <ElCol :span="12">
        <ElFormItem label="数据源">
          <ElSelect v-model="sqlInfo.schema" placeholder="请选择数据源">
            <el-option :label="item.dsname" :value="item.dscode" :key="item.dscode" v-for="item in sqlInfo.dataSourceList" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElButton type="text" @click="formatterSql" style="margin-left:20px;"> 格式化SQL </ElButton>
    </ElRow>
    <ElRow>
      <ElCol :span="24">
        <ElFormItem>
          <div ref="sqlEditor" style="width:100%;height:500px;"></div>
        </ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
    
</template>
<style scoped>
</style>