<template>
  <w-grid
    ref="gridRef"
    :title="$t('re.resources.designer.processor.grid.title')"
    dense-body
    hide-bottom
    :config-button="true"
    selection="multiple"
    :checkbox-selection="false"
    :tree="false"
    :fetch-data-url="Environment.apiContextPath('/api/re/indicator/processor?indicator=' + indicator.id)"
    :data-url="Environment.apiContextPath('/api/re/indicator/processor')"
    :pageable="false"
    :toolbar-configure="{ noIcon: false }"
    :toolbar-actions="[
      'refresh',
      'separator',
      [
        {
          extend: 'add',
          click: undefined,
          enableIf: (arg) => {
            return !readOnly;
          },
        },
        {
          extend: 'add',
          name: 'arithmetic',
          label: Formater.enum(Enums.ProcessorType)('ARITHMETIC'),
          icon: 'bi-calculator',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'ARITHMETIC');
          },
        },
        {
          extend: 'add',
          name: 'ternary',
          label: Formater.enum(Enums.ProcessorType)('TERNARY'),
          icon: 'bi-question',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'TERNARY');
          },
        },
        {
          extend: 'add',
          name: 'whenThen',
          label: Formater.enum(Enums.ProcessorType)('WHEN_THEN'),
          icon: 'bi-sliders',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'WHEN_THEN');
          },
        },
        {
          extend: 'add',
          name: 'numberRange',
          label: Formater.enum(Enums.ProcessorType)('NUMBER_RANGE'),
          icon: 'bi-justify',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'NUMBER_RANGE');
          },
        },
        {
          extend: 'add',
          name: 'conditionRange',
          label: Formater.enum(Enums.ProcessorType)('CONDITION_RANGE'),
          icon: 'bi-rainbow',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'CONDITION_RANGE');
          },
        },

        {
          extend: 'add',
          name: 'groovyScript',
          label: Formater.enum(Enums.ProcessorType)('GROOVY_SCRIPT'),
          icon: 'bi-code',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'GROOVY_SCRIPT');
          },
        },
        {
          extend: 'add',
          name: 'sql',
          label: Formater.enum(Enums.ProcessorType)('SQL'),
          icon: 'bi-filetype-sql',
          enableIf: (arg) => {
            return indicator.type !== 'RULE_RESULT' && indicator.type !== 'SINGLE_RULE_RESULT';
          },
          afterClick: (arg) => {
            arg.grid.getEditorForm().setFieldValue('type', 'SQL');
          },
        },
      ],
      {
        extend: 'clone',
        enableIf: (arg) => {
          return !readOnly && arg.selected;
        },
      },
      {
        extend: 'edit',
        enableIf: (arg) => {
          return !readOnly && arg.selected;
        },
      },
      {
        extend: 'remove',
        enableIf: (arg) => {
          return !readOnly && arg.selected;
        },
      },
      'separator',
      'view',
      'separator',
      'export',
    ]"
    :columns="[
      { width: 60, name: 'order', label: $t('order'), sortable: false, align: 'right' },
      { width: 120, name: 'type', label: $t('type'), sortable: false, format: Formater.enum(Enums.ProcessorType) },
      {
        width: '100%',
        name: 'content',
        label: $t('re.resources.designer.processor.grid.entity.content'),
        sortable: false,
        format: (value, row) => {
          const type = row.type;
          if ('ARITHMETIC' === type) {
            return PlaceHolder.replace(row.arithmetic);
          } else if ('TERNARY' === type) {
            return row.ternaryCondition + ' <b><span>?</span></b> ' + row.ternaryTrue + ' <b><span>:</span></b> ' + row.ternaryFalse;
          } else if ('WHEN_THEN' === type) {
            let str = '';
            if (row.isWhenThenShorted) {
              str += '<span>' + $t('re.resources.designer.processor.grid.entity.isWhenThenShorted') + ', </span>';
            }
            if (row.when) {
              str += '<span>When</span> ' + PlaceHolder.replace(row.when) + ' ';
            }
            if (row.then) {
              str += '<span>Then</span> ' + PlaceHolder.replace(row.then);
            }
            return str;
          } else if ('NUMBER_RANGE' === type) {
            const objs = Tools.json2Object(row.numberRange);
            if (objs) {
              let str = `<div class='border border-b-0'>`;
              str += `<table width='100%'>`;
              for (let i = 0; i < objs.length; i++) {
                const obj = objs[i];
                str += '<tr>';
                if (i == 0) {
                  str += '	<td rowspan=' + objs.length + '>' + PlaceHolder.replace(row.numberRangeVar) + '</td>';
                }
                str += '	<td>' + Tools.generateIntervalRange(obj.minIncluded, obj.min, obj.max, obj.maxIncluded) + '</td>';
                str += '	<td>' + ('' + PlaceHolder.replace('' + obj.value)) + '</td>';
                str += '</tr>';
              }
              str += '</table>';
              str += '</div>';
              return str;
            }
            return '';
          } else if ('CONDITION_RANGE' === type) {
            const objs = Tools.json2Object(row.conditionRange);
            if (objs) {
              let str = `<div class='border border-b-0'>`;
              str += `<table width='100%'>`;
              for (let i = 0; i < objs.length; i++) {
                const obj = objs[i];
                str += '<tr>';
                str += '	<td>' + PlaceHolder.replace(obj.condition) + '</td>';
                str += '	<td><span>' + ('' + PlaceHolder.replace(obj.value)) + '</span></td>';
                str += '</tr>';
              }
              str += '</table>';
              str += `</div>`;
              return str;
            }
            return '';
          } else if ('GROOVY_SCRIPT' === type) {
            return transfromContent(row.groovyScript);
          }
        },
      },
    ]"
    :editor="{
      dialog: {
        width: '800px',
      },
      form: {
        colsNum: 1,
        fields: [
          { name: 'indicator', label: 'indicator', type: 'text', defaultValue: indicator.id, hidden: true },
          { name: 'id', label: $t('id'), type: 'text', hidden: true },
          { name: 'order', label: $t('order'), type: 'number', hidden: true },
          { name: 'type', label: $t('type'), type: 'text', hidden: true },
          { name: 'description', label: $t('description'), type: 'text' },
          {
            name: 'arithmetic',
            label: $t('re.resources.designer.processor.grid.entity.arithmetic'),
            type: 'code-mirror',
            lang: 'java',
            rows: 5,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'ARITHMETIC' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'ternaryCondition',
            label: $t('re.resources.designer.processor.grid.entity.ternaryCondition'),
            type: 'code-mirror',
            lang: 'java',
            rows: 1,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'TERNARY' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'ternaryTrue',
            label: $t('re.resources.designer.processor.grid.entity.ternaryTrue'),
            type: 'code-mirror',
            lang: 'java',
            rows: 1,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'TERNARY' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'ternaryFalse',
            label: $t('re.resources.designer.processor.grid.entity.ternaryFalse'),
            type: 'code-mirror',
            lang: 'java',
            rows: 1,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'TERNARY' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'when',
            label: $t('re.resources.designer.processor.grid.entity.when'),
            type: 'code-mirror',
            lang: 'java',
            rows: 1,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'WHEN_THEN' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'then',
            label: $t('re.resources.designer.processor.grid.entity.then'),
            type: 'code-mirror',
            lang: 'java',
            rows: 1,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'WHEN_THEN' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'isWhenThenShorted',
            label: $t('re.resources.designer.processor.grid.entity.isWhenThenShorted'),
            type: 'checkbox',
            showIf: (arg) => {
              return 'WHEN_THEN' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'numberRangeVar',
            label: $t('re.resources.designer.processor.grid.entity.numberRangeVar'),
            showIf: (arg) => {
              return 'NUMBER_RANGE' === arg.form.getFieldValue('type');
            },
            type: 'code-mirror',
            lang: 'java',
            rows: 1,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
          },
          {
            name: 'numberRange',
            label: $t('re.resources.designer.processor.grid.entity.numberRange'),
            showIf: (arg) => {
              return 'NUMBER_RANGE' === arg.form.getFieldValue('type');
            },
            type: 'w-grid',
            height: 300,
            denseBody: true,
            draggable: true,
            pageable: false,
            configButton: false,
            toolbarConfigure: { noIcon: false },
            toolbarActions: [
              'add',
              'clone',
              'edit',
              {
                extend: 'remove',
                click: (arg) => {
                  const grid = gridRef.getEditorForm().getFieldComponent('numberRange');
                  grid.removeRows(arg.selecteds);
                },
              },
              'separator',
              {
                name: 'example',
                label: $t('example'),
                icon: 'bi-balloon',
                click: (arg) => {
                  const grid = gridRef.getEditorForm().getFieldComponent('numberRange');
                  const sampleData = [
                    { uuid: Tools.uuid(), minIncluded: false, min: null, max: 0, maxIncluded: false, value: 1 },
                    { uuid: Tools.uuid(), minIncluded: true, min: 0, max: 1, maxIncluded: false, value: 2 },
                    { uuid: Tools.uuid(), minIncluded: true, min: 1, max: 2, maxIncluded: false, value: 3 },
                    { uuid: Tools.uuid(), minIncluded: true, min: 2, max: 3, maxIncluded: false, value: 4 },
                    { uuid: Tools.uuid(), minIncluded: true, min: 3, max: null, maxIncluded: false, value: 5 },
                    { uuid: Tools.uuid(), minIncluded: false, min: null, max: null, maxIncluded: false, value: 0 },
                  ];
                  grid.setLocalData(sampleData);
                },
              },
            ],
            primaryKey: 'uuid',
            columns: [
              { width: 200, name: 'uuid', label: 'uuid', hidden: true },
              {
                width: 60,
                name: 'minIncluded',
                label: $t('include'),
                align: 'center',
                sortable: false,
                format: (value) => {
                  if (value) {
                    return '[';
                  } else {
                    return '(';
                  }
                },
              },
              { width: 100, name: 'min', label: $t('minValue'), align: 'right', sortable: false },
              { width: 100, name: 'max', label: $t('maxValue'), align: 'right', sortable: false },
              {
                width: 60,
                name: 'maxIncluded',
                label: $t('include'),
                align: 'center',
                sortable: false,
                format: (value) => {
                  if (value) {
                    return '[';
                  } else {
                    return ')';
                  }
                },
              },
              { width: '100%', name: 'value', label: $t('value'), sortable: false },
            ],
            editor: {
              dialog: {
                width: '600px',
              },
              form: {
                colsNum: 4,
                fields: [
                  { name: 'uuid', label: 'uuid', hidden: true, colSpan: 4 },
                  { name: 'min', label: $t('minValue'), type: 'text', colSpan: 3 },
                  { name: 'minIncluded', label: $t('include'), type: 'checkbox' },
                  { name: 'max', label: $t('maxValue'), type: 'text', colSpan: 3 },
                  { name: 'maxIncluded', label: $t('include'), type: 'checkbox' },
                  { name: 'value', label: $t('value'), type: 'number', colSpan: 3 },
                ],
              },
            },
            onBeforeEditorDataSubmit: (data, callback) => {
              const grid = gridRef.getEditorForm().getFieldComponent('numberRange');
              const form = grid.getEditorForm();
              if ('add' == form.getStatus() || 'clone' == form.getStatus()) {
                data.uuid = Tools.uuid();
                grid.addRow(data);
                callback(false);
              } else if ('edit' == form.getStatus()) {
                grid.replaceRow(data);
                callback(false);
              }
            },
          },
          {
            name: 'conditionRange',
            label: $t('re.resources.designer.processor.grid.entity.conditionRange'),
            showIf: (arg) => {
              return 'CONDITION_RANGE' === arg.form.getFieldValue('type');
            },
            type: 'w-grid',
            height: 300,
            denseBody: true,
            draggable: true,
            pageable: false,
            configButton: false,
            toolbarConfigure: { noIcon: false },
            toolbarActions: [
              'add',
              'clone',
              'edit',
              {
                extend: 'remove',
                click: (arg) => {
                  const grid = gridRef.getEditorForm().getFieldComponent('conditionRange');
                  grid.removeRows(arg.selecteds);
                },
              },
              'separator',
              {
                name: 'example',
                label: $t('example'),
                icon: 'bi-balloon',
                click: (arg) => {
                  const grid = gridRef.getEditorForm().getFieldComponent('conditionRange');
                  const sampleData = [
                    { uuid: Tools.uuid(), condition: '${变量名}<=0', value: '0' },
                    { uuid: Tools.uuid(), condition: '${变量名}>0 && ${变量名}<=50', value: '50' },
                    { uuid: Tools.uuid(), condition: '${变量名}>50 && ${变量名}<=80', value: '80' },
                    { uuid: Tools.uuid(), condition: '${变量名}>80 && ${变量名}<=100', value: '100' },
                    { uuid: Tools.uuid(), condition: '${变量名}>100', value: '60' },
                  ];
                  grid.setLocalData(sampleData);
                },
              },
            ],
            primaryKey: 'uuid',
            columns: [
              { name: 'uuid', label: 'uuid', hidden: true },
              {
                name: 'condition',
                label: $t('condition'),
                align: 'left',
                sortable: false,
                format: (value) => {
                  return PlaceHolder.replace(value);
                },
              },
              {
                name: 'value',
                label: $t('value'),
                sortable: false,
                format: (value) => {
                  return PlaceHolder.replace(value);
                },
              },
            ],
            editor: {
              dialog: {
                width: '800px',
              },
              form: {
                colsNum: 1,
                fields: [
                  { name: 'uuid', label: 'uuid', hidden: true },
                  {
                    name: 'condition',
                    label: $t('condition'),
                    type: 'code-mirror',
                    lang: 'java',
                    rows: 1,
                    placeholder: true,
                    autoCompletion: true,
                    autoCompletionOptions: autoCompletionOptionsRef,
                    extAutoCompletionOptions: GroovyFunctions,
                  },
                  {
                    name: 'value',
                    label: $t('value'),
                    type: 'code-mirror',
                    lang: 'java',
                    rows: 1,
                    placeholder: true,
                    autoCompletion: true,
                    autoCompletionOptions: autoCompletionOptionsRef,
                    extAutoCompletionOptions: GroovyFunctions,
                  },
                ],
              },
            },
            onBeforeEditorDataSubmit: (data, callback) => {
              const grid = gridRef.getEditorForm().getFieldComponent('conditionRange');
              const form = grid.getEditorForm();
              if ('add' == form.getStatus() || 'clone' == form.getStatus()) {
                data.uuid = Tools.uuid();
                grid.addRow(data);
                callback(false);
              } else if ('edit' == form.getStatus()) {
                grid.replaceRow(data);
                callback(false);
              }
            },
          },
          {
            name: 'groovyScript',
            label: $t('re.resources.designer.processor.grid.entity.groovyScript'),
            type: 'code-mirror',
            rows: 20,
            lang: 'java',
            lineNumber: true,
            placeholder: true,
            autoCompletion: true,
            autoCompletionOptions: autoCompletionOptionsRef,
            extAutoCompletionOptions: GroovyFunctions,
            showIf: (arg) => {
              return 'GROOVY_SCRIPT' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'sqlDatasourceName',
            label: $t('re.resources.designer.processor.grid.entity.sqlDatasourceName'),
            type: 'select',
            rows: 1,
            showIf: (arg) => {
              return 'SQL' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'sql',
            label: $t('re.resources.designer.processor.grid.entity.sql'),
            type: 'select',
            rows: 1,
            showIf: (arg) => {
              return 'SQL' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'sqlParameterValues',
            label: $t('re.resources.designer.processor.grid.entity.sqlParameterValues'),
            type: 'select',
            rows: 1,
            showIf: (arg) => {
              return 'SQL' === arg.form.getFieldValue('type');
            },
          },
          {
            name: 'sqlFieldMapping',
            label: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping'),
            type: 'select',
            rows: 1,
            showIf: (arg) => {
              return 'SQL' === arg.form.getFieldValue('type');
            },
          },
        ],
      },
    }"
    :viewer="{
      panel: {
        columnNum: 1,
        fields: [
          { name: 'order', label: $t('order') },
          { name: 'id', label: $t('id'), primaryKey: true },
          { name: 'indicator', label: $t('indicator') },
          { name: 'description', label: $t('description') },
          { name: 'enable', label: $t('enable') },
          { name: 'type', label: $t('type') },
          { name: 'optionCode', label: $t('re.resources.designer.processor.grid.entity.optionCode') },
          { name: 'arithmetic', label: $t('re.resources.designer.processor.grid.entity.arithmetic') },
          { name: 'ternaryCondition', label: $t('re.resources.designer.processor.grid.entity.ternaryCondition') },
          { name: 'ternaryTrue', label: $t('re.resources.designer.processor.grid.entity.ternaryTrue') },
          { name: 'ternaryFalse', label: $t('re.resources.designer.processor.grid.entity.ternaryFalse') },
          { name: 'when', label: $t('re.resources.designer.processor.grid.entity.when') },
          { name: 'then', label: $t('re.resources.designer.processor.grid.entity.then') },
          { name: 'isWhenThenShorted', label: $t('re.resources.designer.processor.grid.entity.isWhenThenShorted') },
          { name: 'rule', label: $t('re.resources.designer.processor.grid.entity.rule') },
          { name: 'singleRule', label: $t('re.resources.designer.processor.grid.entity.singleRule') },
          { name: 'numberRange', label: $t('re.resources.designer.processor.grid.entity.numberRange') },
          { name: 'conditionRange', label: $t('re.resources.designer.processor.grid.entity.conditionRange') },
          { name: 'decisionTable2C', label: $t('re.resources.designer.processor.grid.entity.decisionTable2C') },
          { name: 'decisionTable', label: $t('re.resources.designer.processor.grid.entity.decisionTable') },
          { name: 'groovyScript', label: $t('re.resources.designer.processor.grid.entity.groovyScript') },

          { name: 'sqlDatasourceName', label: $t('re.resources.designer.processor.grid.entity.sqlDatasourceName') },
          { name: 'sql', label: $t('re.resources.designer.processor.grid.entity.sql') },
          { name: 'sqlParameterValues', label: $t('re.resources.designer.processor.grid.entity.sqlParameterValues') },
          { name: 'sqlFieldMapping', label: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping') },

          { name: 'dataComeFrom', label: $t('dataComeFrom') },
          { name: 'creator', label: $t('creator') },
          { name: 'createDate', label: $t('createDate') },
          { name: 'lastModifier', label: $t('lastModifier') },
          { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
        ],
      },
    }"
    @before-editor-data-submit="
      (data, callback) => {
        const form = gridRef.getEditorForm();
        if ('NUMBER_RANGE' === data.type) {
          const grid = form.getFieldComponent('numberRange');
          const localData = grid.getLocalData();
          const ranges = [];
          for (const item of localData) {
            ranges.push({
              uuid: item.uuid,
              minIncluded: item.minIncluded,
              min: item.min,
              max: item.max,
              maxIncluded: item.maxIncluded,
              value: item.value,
            });
          }
          data.numberRange = Tools.object2Json(ranges);
        } else if ('CONDITION_RANGE' === data.type) {
          const grid = form.getFieldComponent('conditionRange');
          const localData = grid.getLocalData();
          const ranges = [];
          for (const item of localData) {
            ranges.push({
              uuid: item.uuid,
              condition: item.condition,
              value: item.value,
            });
          }
          data.conditionRange = Tools.object2Json(ranges);
        }
      }
    "
    @after-editor-open="
      (row) => {
        axios.get(Environment.apiContextPath('/api/re/indicator/listParemterHintsByIndicatorId/' + indicator.id)).then((response) => {
          const names = [];
          if (response.data?.parentParameterNames && response.data?.parentParameterNames.length > 0) {
            for (const item of response.data?.parentParameterNames) {
              names.push({ label: item, type: 'variable', apply: '${' + item + '}' });
            }
          }
          if (response.data?.parameterNames && response.data?.parameterNames.length > 0) {
            for (const item of response.data?.parameterNames) {
              names.push({ label: item, type: 'variable', apply: '${' + item + '}' });
            }
          }
          autoCompletionOptionsRef = names;
        });
        const type = gridRef.getEditorForm().getFieldValue('type');
        if ('NUMBER_RANGE' === type) {
          const grid = gridRef.getEditorForm().getFieldComponent('numberRange');
          const rows = Tools.json2Object(row.numberRange);
          grid.setLocalData(rows);
        } else if ('CONDITION_RANGE' === type) {
          const grid = gridRef.getEditorForm().getFieldComponent('conditionRange');
          const rows = Tools.json2Object(row.conditionRange);
          grid.setLocalData(rows);
        }
      }
    "
  ></w-grid>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { axios, Environment, Formater, EnumTools, Tools } from 'platform-core';
import { PlaceHolder } from '@/utils/PlaceHolder';
import GroovyFunctions from '@/views/resources/designer/GroovyFunctions';

const props = defineProps({
  indicator: { type: Object, default: undefined },
  readOnly: { type: Boolean, default: false },
});

const gridRef = ref();
const autoCompletionOptionsRef = ref([]);

const transfromContent = (xml) => {
  const div = document.createElement('div');
  div.textContent = xml;
  const result = div.outerHTML;
  div.parentNode?.removeChild(div);
  return result;
};

const refresh = () => {
  gridRef?.value?.refresh();
};

onMounted(() => {
  gridRef?.value?.refresh();
});

defineExpose({
  refresh,
});

const Enums = await EnumTools.fetch(['io.sc.engine.rule.core.enums.ProcessorType']);
</script>
