<template>
  <div style="height: 100%">
    <w-grid
      ref="gridRef"
      :title="$t('re.resources.designer.processor.grid.title')"
      dense-body
      class="px-1"
      hide-bottom
      :config-button="false"
      selection="multiple"
      db-click-operation="edit"
      :checkbox-selection="true"
      :tree="false"
      :fetch-data-url="Environment.apiContextPath('/api/re/model/parameter/processor/findByParameterId?parameterId=' + parameter.id)"
      :data-url="Environment.apiContextPath('/api/re/model/parameter/processor')"
      :pageable="false"
      :toolbar-configure="{ noIcon: false }"
      :toolbar-actions="[
        'refresh',
        'separator',
        [
          {
            extend: 'add',
            enableIf: (arg) => {
              return !readOnly;
            },
            click: undefined,
          },
          {
            extend: 'add',
            name: 'objectProperties',
            label: Formater.enum(Enums.ProcessorType)('OBJECT_PROPERTIES'),
            icon: 'bi-card-list',
            enableIf: (arg) => {
              const valueType = parameter.valueType;
              return (
                valueType !== 'java.lang.Boolean' &&
                valueType !== 'java.lang.Long' &&
                valueType !== 'java.lang.Float' &&
                valueType !== 'Float' &&
                valueType !== 'java.math.BigDecimal' &&
                valueType !== 'java.lang.String' &&
                valueType !== 'java.util.Date' &&
                valueType !== 'io.sc.engine.rule.core.classes.ResourceAbstract' &&
                valueType !== 'io.sc.engine.rule.core.classes.RuleResult' &&
                valueType !== 'io.sc.engine.rule.core.classes.SingleRuleResult' &&
                !valueType.startsWith('List') &&
                !valueType.startsWith('Map')
              );
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'OBJECT_PROPERTIES');
            },
          },
          {
            extend: 'add',
            name: 'optionValue',
            label: Formater.enum(Enums.ProcessorType)('OPTION_VALUE'),
            icon: 'bi-card-list',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'OPTION_VALUE');
            },
          },
          {
            extend: 'add',
            name: 'mathFormula',
            label: Formater.enum(Enums.ProcessorType)('MATH_FORMULA'),
            icon: 'bi-calculator',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'MATH_FORMULA');
            },
          },
          {
            extend: 'add',
            name: 'arithmetic',
            label: Formater.enum(Enums.ProcessorType)('ARITHMETIC'),
            icon: 'bi-calculator',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.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 parameter.type !== 'RULE_RESULT' && parameter.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 parameter.type !== 'RULE_RESULT' && parameter.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 parameter.type !== 'RULE_RESULT' && parameter.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 parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'CONDITION_RANGE');
            },
          },
          {
            extend: 'add',
            name: 'decisionTable2c',
            label: Formater.enum(Enums.ProcessorType)('DECISION_TABLE_2C'),
            icon: 'bi-grid-3x2',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'DECISION_TABLE_2C');
            },
          },
          {
            extend: 'add',
            name: 'decisionTable',
            label: Formater.enum(Enums.ProcessorType)('DECISION_TABLE'),
            icon: 'bi-grid-3x3',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'DECISION_TABLE');
            },
          },
          {
            extend: 'add',
            name: 'decisionTree',
            label: Formater.enum(Enums.ProcessorType)('DECISION_TREE'),
            icon: 'bi-tree',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'DECISION_TREE');
            },
          },
          {
            extend: 'add',
            name: 'executionFlow',
            label: Formater.enum(Enums.ProcessorType)('EXECUTION_FLOW'),
            icon: 'bi-bounding-box-circles',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'EXECUTION_FLOW');
            },
          },
          {
            extend: 'add',
            name: 'pmml',
            label: Formater.enum(Enums.ProcessorType)('PMML'),
            icon: 'bi-filetype-xml',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'PMML');
            },
          },
          {
            extend: 'add',
            name: 'groovyScript',
            label: Formater.enum(Enums.ProcessorType)('GROOVY_SCRIPT'),
            icon: 'bi-code',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.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 parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'SQL');
            },
          },
          {
            extend: 'add',
            name: 'rule',
            label: Formater.enum(Enums.ProcessorType)('RULE'),
            icon: 'bi-shadows',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'RULE');
            },
          },
          {
            extend: 'add',
            name: 'singleRule',
            label: Formater.enum(Enums.ProcessorType)('SINGLE_RULE'),
            icon: 'bi-noise-reduction',
            enableIf: (arg) => {
              return parameter.type !== 'RULE_RESULT' && parameter.type !== 'SINGLE_RULE_RESULT';
            },
            afterClick: (arg) => {
              arg.grid.getEditorForm().setFieldValue('type', 'SINGLE_RULE');
            },
          },
        ],
        {
          extend: 'edit',
          enableIf: (arg) => {
            return arg.selected;
          },
          click: (arg) => {
            const type = arg.selected?.type;
            if ('DECISION_TREE' === type) {
              decisionTreeDialogRef.open(arg.selected?.id);
            } else if ('EXECUTION_FLOW' === type) {
              executionFlowDialogRef.open(arg.selected?.id);
            } else {
              arg._click(arg);
            }
          },
        },
        {
          extend: 'remove',
          enableIf: (arg) => {
            return !readOnly && arg.selected;
          },
        },
        'separator',
        {
          name: 'enable',
          label: (arg) => {
            if (arg.selected?.enable) {
              return $t('disable');
            }
            return $t('enable');
          },
          icon: (arg) => {
            if (arg.selected?.enable) {
              return 'bi-x';
            }
            return 'bi-check';
          },
          enableIf: (arg) => {
            return !readOnly && arg.selected;
          },
          click: (arg) => {
            const data = arg.selected;
            data.enable = !data.enable;
            axios.put(Environment.apiContextPath('/api/re/model/parameter/processor/' + data.id), data).then((response) => {
              gridRef.replaceRow(response.data);
            });
          },
        },
        'separator',
        'view',
        'separator',
        'export',
      ]"
      :columns="[
        { width: 80, name: 'enable', label: $t('isEnable'), align: 'center', sortable: false, format: Formater.enableTag() },
        { width: 60, name: 'order', label: $t('order'), sortable: false, align: 'right' },
        { width: 150, 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 ('OBJECT_PROPERTIES' === type) {
              let str = '';
              if (row.objectCondition) {
                str += `<div class='py-2'>When ` + PlaceHolder.replace(row.objectCondition) + ' Then</div>';
              }
              const objs = Tools.json2Object(row.objectProperties);
              if (objs) {
                str += `<div class='border border-b-0 overflow-auto' style='max-height:100px'>`;
                str += `<table width='100%' height='100%'>`;
                for (let i = 0; i < objs.length; i++) {
                  const obj = objs[i];
                  str += '<tr>';
                  str += `	<td width='30%'>` + obj.name + `</td>`;
                  str += `	<td width='70%'><span>` + ('' + PlaceHolder.replace(obj.expression)) + '</span></td>';
                  str += '</tr>';
                }
                str += '</table>';
                str += `</div>`;
              }
              return str;
            } else if ('OPTION_VALUE' === type) {
              return row.optionCode;
            } else if ('MATH_FORMULA' === type) {
              return {
                componentType: 'w-expression',
                attrs: {
                  modelValue: row.mathFormula,
                  readOnly: true,
                  zoom: 2,
                },
              };
            } else if ('ARITHMETIC' === type) {
              return {
                componentType: 'w-code-mirror',
                attrs: {
                  lang: 'java',
                  rows: 4,
                  modelValue: row.arithmetic,
                  editable: false,
                  placeholder: true,
                  lineWrap: true,
                },
              };
            } 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 overflow-auto' style='max-height:100px'>`;
                str += `<table width='100%' height='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 overflow-auto' style='max-height:100px'>`;
                str += `<table width='100%' height='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 ('PMML' === type) {
              return transfromContent(row.pmml);
            } else if ('GROOVY_SCRIPT' === type) {
              return transfromContent(row.groovyScript);
            } else if ('DECISION_TREE' === type) {
              return transfromContent(row.decisionTree);
            } else if ('EXECUTION_FLOW' === type) {
              return transfromContent(row.executionFlow);
            } else if ('SQL' === type) {
              return {
                componentType: 'w-code-mirror',
                attrs: {
                  lang: 'sql',
                  rows: 4,
                  editable: false,
                  modelValue: row.sql,
                  placeholder: true,
                },
              };
            }
          },
        },
      ]"
      :editor="{
        dialog: {
          width: editorDialogWidthRef,
        },
        form: {
          colsNum: 5,
          fields: [
            { colSpan: 5, name: 'parameter', label: 'parameter', type: 'text', defaultValue: parameter.id, hidden: true },
            { colSpan: 5, name: 'id', label: $t('id'), type: 'text', hidden: true },
            { colSpan: 5, name: 'order', label: $t('order'), type: 'number', hidden: true },
            { colSpan: 5, name: 'type', label: $t('type'), type: 'text', hidden: true },
            { colSpan: 5, name: 'description', label: $t('description'), type: 'text', hidden: true },
            { colSpan: 5, name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true, hidden: true },
            {
              colSpan: 5,
              name: 'objectCondition',
              label: $t('re.resources.designer.processor.grid.entity.objectCondition'),
              type: 'code-mirror',
              lang: 'java',
              rows: 3,
              lineWrap: true,
              lineBreak: false,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'OBJECT_PROPERTIES' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'objectProperties',
              label: $t('re.resources.designer.processor.grid.entity.objectProperties'),
              showIf: (arg) => {
                return 'OBJECT_PROPERTIES' === arg.form.getFieldValue('type');
              },
              type: 'w-grid',
              title: $t('re.resources.designer.processor.grid.entity.objectProperties'),
              height: 400,
              autoFetchData: false,
              dbClickOperation: 'edit',
              dense: true,
              draggable: true,
              pageable: false,
              configButton: false,
              toolbarConfigure: { noIcon: false },
              toolbarActions: [
                'separator',
                {
                  name: 'autoMatch',
                  label: $t('autoMatch'),
                  icon: 'bi-link-45deg',
                  click: () => {
                    const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
                    const localData = grid.getLocalData();
                    const objectProperties = [];
                    for (const item of localData) {
                      objectProperties.push({
                        code: item.code,
                        name: item.name,
                        expression: item.expression,
                      });
                    }
                    objectPropertiesMatcherDialogRef.open(objectProperties);
                  },
                },
                'edit',
                {
                  extend: 'remove',
                  click: (arg) => {
                    const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
                    const selecteds = arg.selecteds;
                    for (const selected of selecteds) {
                      selected.expression = '';
                      grid.replaceRow(selected);
                    }
                  },
                },
                'separator',
                {
                  extend: 'remove',
                  name: 'removeAll',
                  label: $t('removeAll'),
                  icon: 'bi-trash3',
                  enableIf: () => {
                    return true;
                  },
                  click: (arg) => {
                    const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
                    const rows = grid.getLocalData();
                    for (const row of rows) {
                      row.expression = '';
                    }
                    grid.setLocalData(rows);
                  },
                },
              ],
              primaryKey: 'code',
              columns: [
                { name: 'code', label: 'code', hidden: true },
                {
                  width: 300,
                  name: 'name',
                  label: $t('propertyName'),
                  align: 'left',
                  sortable: false,
                  format: (value, row) => {
                    if (row.expression) {
                      const expression = row.expression.replace(/\$\{(.+?)\.(.+?)\}/g, '$2');
                      if (expression.trim() !== value.trim()) {
                        return `<span class='text-red-500'>` + value + '</span>';
                      }
                    }
                    return value;
                  },
                },
                {
                  width: '100%',
                  name: 'expression',
                  label: $t('expression'),
                  sortable: false,
                  format: (value) => {
                    return PlaceHolder.replace(value);
                  },
                },
              ],
              editor: {
                dialog: {
                  width: '800px',
                },
                form: {
                  colsNum: 1,
                  fields: [
                    { name: 'code', label: 'code', hidden: true },
                    {
                      name: 'expression',
                      label: $t('expression'),
                      type: 'code-mirror',
                      lang: 'java',
                      rows: 3,
                      lineWrap: true,
                      lineBreak: false,
                      placeholder: true,
                      autoCompletion: autoCompletion,
                    },
                  ],
                },
              },
              onBeforeEditorDataSubmit: (data, callback) => {
                const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
                const form = grid.getEditorForm();
                if ('edit' == form.getStatus()) {
                  grid.replaceRow(data);
                  callback(false);
                }
              },
            },
            {
              colSpan: 5,
              name: 'optionCode',
              label: $t('re.resources.designer.processor.grid.entity.optionCode'),
              type: 'select',
              options: optionOptionsRef,
              showIf: (arg) => {
                return 'OPTION_VALUE' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'mathFormula',
              label: $t('re.resources.designer.processor.grid.entity.mathFormula'),
              type: 'expression',
              showIf: (arg) => {
                return 'MATH_FORMULA' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'arithmetic',
              label: $t('re.resources.designer.processor.grid.entity.arithmetic'),
              type: 'code-mirror',
              lang: 'java',
              rows: 5,
              placeholder: true,
              lineWrap: true,
              lineBreak: false,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'ARITHMETIC' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'ternaryCondition',
              label: $t('re.resources.designer.processor.grid.entity.ternaryCondition'),
              type: 'code-mirror',
              lang: 'java',
              rows: 4,
              placeholder: true,
              lineWrap: true,
              lineBreak: false,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'TERNARY' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'ternaryTrue',
              label: $t('re.resources.designer.processor.grid.entity.ternaryTrue'),
              type: 'code-mirror',
              lang: 'java',
              rows: 4,
              placeholder: true,
              lineWrap: true,
              lineBreak: false,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'TERNARY' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'ternaryFalse',
              label: $t('re.resources.designer.processor.grid.entity.ternaryFalse'),
              type: 'code-mirror',
              lang: 'java',
              rows: 4,
              placeholder: true,
              lineWrap: true,
              lineBreak: false,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'TERNARY' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'when',
              label: $t('re.resources.designer.processor.grid.entity.when'),
              type: 'code-mirror',
              lang: 'java',
              rows: 4,
              lineWrap: true,
              lineBreak: false,
              placeholder: true,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'WHEN_THEN' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'then',
              label: $t('re.resources.designer.processor.grid.entity.then'),
              type: 'code-mirror',
              lang: 'java',
              rows: 4,
              lineWrap: true,
              lineBreak: false,
              placeholder: true,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'WHEN_THEN' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'isWhenThenShorted',
              label: $t('re.resources.designer.processor.grid.entity.isWhenThenShorted'),
              type: 'checkbox',
              showIf: (arg) => {
                return 'WHEN_THEN' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              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: 3,
              lineWrap: true,
              lineBreak: false,
              placeholder: true,
              autoCompletion: autoCompletion,
            },
            {
              colSpan: 5,
              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,
              autoFetchData: false,
              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);
                }
              },
            },
            {
              colSpan: 5,
              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,
              autoFetchData: false,
              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: '600px',
                },
                form: {
                  colsNum: 1,
                  fields: [
                    { name: 'uuid', label: 'uuid', hidden: true },
                    {
                      name: 'condition',
                      label: $t('condition'),
                      type: 'code-mirror',
                      lang: 'java',
                      rows: 4,
                      placeholder: true,
                      lineWrap: true,
                      lineBreak: false,
                      autoCompletion: autoCompletion,
                    },
                    {
                      name: 'value',
                      label: $t('value'),
                      type: 'code-mirror',
                      lang: 'java',
                      rows: 4,
                      lineWrap: true,
                      lineBreak: false,
                      placeholder: true,
                      autoCompletion: autoCompletion,
                    },
                  ],
                },
              },
              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);
                }
              },
            },
            {
              colSpan: 5,
              name: 'decisionTable2C',
              label: $t('re.resources.designer.processor.grid.entity.decisionTable2C'),
              type: 'code-mirror',
              rows: 1,
              showIf: (arg) => {
                return 'DECISION_TABLE_2C' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'decisionTable',
              label: $t('re.resources.designer.processor.grid.entity.decisionTable'),
              type: 'code-mirror',
              rows: 1,
              showIf: (arg) => {
                return 'DECISION_TABLE' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'decisionTree',
              label: $t('re.resources.designer.processor.grid.entity.decisionTree'),
              type: 'code-mirror',
              rows: 20,
              lineNumber: true,
              toolbar: false,
              showIf: (arg) => {
                return 'DECISION_TREE' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'executionFlow',
              label: $t('re.resources.designer.processor.grid.entity.executionFlow'),
              type: 'code-mirror',
              rows: 20,
              lineNumber: true,
              toolbar: false,
              showIf: (arg) => {
                return 'EXECUTION_FLOW' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'pmml',
              label: $t('re.resources.designer.processor.grid.entity.pmml'),
              type: 'code-mirror',
              rows: 20,
              lineNumber: true,
              toolbar: false,
              lang: 'xml',
              showIf: (arg) => {
                return 'PMML' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'groovyScript',
              label: $t('re.resources.designer.processor.grid.entity.groovyScript'),
              type: 'code-mirror',
              rows: 20,
              lineNumber: true,
              lang: 'java',
              lineWrap: false,
              lineBreak: true,
              placeholder: true,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'GROOVY_SCRIPT' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 5,
              name: 'sqlDatasourceName',
              label: $t('re.resources.designer.processor.grid.entity.sqlDatasourceName'),
              type: 'select',
              clearable: true,
              options: dsOptionsRef,
              rows: 1,
              showIf: (arg) => {
                return 'SQL' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 3,
              name: 'sql',
              label: $t('re.resources.designer.processor.grid.entity.sql'),
              type: 'code-mirror',
              height: 180,
              lang: 'sql',
              toolbar: false,
              placeholder: true,
              autoCompletion: autoCompletion,
              showIf: (arg) => {
                return 'SQL' === arg.form.getFieldValue('type');
              },
            },
            {
              colSpan: 2,
              name: 'sqlParameterValues',
              label: $t('re.resources.designer.processor.grid.entity.sqlParameterValues'),
              showIf: (arg) => {
                return 'SQL' === arg.form.getFieldValue('type');
              },
              type: 'w-grid',
              height: 150,
              title: $t('re.resources.designer.processor.grid.entity.sqlParameterValues'),
              autoFetchData: false,
              dense: true,
              dbClickOperation: 'edit',
              draggable: true,
              pageable: false,
              configButton: false,
              toolbarConfigure: { noIcon: false },
              toolbarActions: [
                {
                  name: 'analyze',
                  label: $t('analyze'),
                  icon: 'bi-tag',
                  click: (arg) => {
                    const sql = gridRef.getEditorForm().getFieldValue('sql');
                    const regex = /\$\{[\u0000-\uFFFF]+?\}/g;
                    const array = sql.match(regex);
                    const rows = [];
                    for (const item of array) {
                      rows.push({ uuid: Tools.uuid(), name: item, value: '' });
                    }
                    const grid = gridRef.getEditorForm().getFieldComponent('sqlParameterValues');
                    grid.setLocalData(rows);
                  },
                },
                'separator',
                'add',
                'edit',
                [
                  {
                    extend: 'remove',
                    click: (arg) => {
                      const grid = gridRef.getEditorForm().getFieldComponent('sqlParameterValues');
                      grid.removeRows(arg.selecteds);
                    },
                  },
                  {
                    extend: 'remove',
                    name: 'removeAll',
                    label: $t('deleteAll'),
                    click: (arg) => {
                      const grid = gridRef.getEditorForm().getFieldComponent('sqlParameterValues');
                      grid.setLocalData([]);
                    },
                  },
                ],
              ],
              primaryKey: 'uuid',
              columns: [
                { name: 'uuid', label: 'uuid', hidden: true },
                {
                  width: '50%',
                  name: 'name',
                  label: $t('name'),
                  align: 'left',
                  sortable: false,
                  format: (value) => {
                    return PlaceHolder.replace(value);
                  },
                },
                {
                  width: '100%',
                  name: 'value',
                  label: $t('value'),
                  sortable: false,
                },
              ],
              editor: {
                dialog: {
                  width: '600px',
                },
                form: {
                  colsNum: 1,
                  fields: [
                    { name: 'uuid', label: 'uuid', hidden: true },
                    {
                      name: 'name',
                      label: $t('name'),
                      type: 'code-mirror',
                      lang: 'java',
                      rows: 1,
                      placeholder: true,
                      autoCompletion: autoCompletion,
                    },
                    {
                      name: 'value',
                      label: $t('value'),
                      type: 'text',
                    },
                  ],
                },
              },
              onBeforeEditorDataSubmit: (data, callback) => {
                const grid = gridRef.getEditorForm().getFieldComponent('sqlParameterValues');
                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);
                }
              },
            },
            {
              colSpan: 3,
              name: 'sqlQueryResult',
              label: $t('re.resources.designer.processor.grid.entity.sqlQueryResult'),
              showIf: (arg) => {
                return 'SQL' === arg.form.getFieldValue('type');
              },
              type: 'w-grid',
              height: 250,
              autoFetchData: false,
              title: $t('re.resources.designer.processor.grid.entity.sqlQueryResult'),
              dense: true,
              draggable: true,
              pageable: false,
              checkboxSelection: false,
              configButton: false,
              toolbarConfigure: { noIcon: false },
              toolbarActions: [
                {
                  name: 'execute',
                  label: $t('execute'),
                  icon: 'bi-caret-right',
                  click: (arg) => {
                    const sql = gridRef.getEditorForm().getFieldValue('sql');
                    const grid = gridRef.getEditorForm().getFieldComponent('sqlParameterValues');
                    const sqlParameterValues = grid?.getLocalData();
                    axios
                      .post(Environment.apiContextPath('/api/re/model/parameter/processor/executeSql'), {
                        sql: sql,
                        sqlParameterValues: sqlParameterValues,
                      })
                      .then((response) => {
                        const fieldMetaDatas = response.data.fieldMetaDatas;
                        for (const field of fieldMetaDatas) {
                          field.value = field.name;
                        }
                        const data = response.data.data;
                        const grid = gridRef.getEditorForm().getFieldComponent('sqlQueryResult');
                        sqlQueryResultFieldsRef = fieldMetaDatas;
                        grid.setLocalData(data);
                      });
                  },
                },
              ],
              columns: computed(() => {
                return sqlQueryResultFieldsRef;
              }),
            },
            {
              colSpan: 2,
              name: 'sqlFieldMapping',
              label: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping'),
              showIf: (arg) => {
                return 'SQL' === arg.form.getFieldValue('type');
              },
              type: 'w-grid',
              height: 250,
              width: '100%',
              autoFetchData: false,
              title: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping'),
              dense: true,
              dbClickOperation: 'edit',
              draggable: true,
              pageable: false,
              configButton: false,
              toolbarConfigure: { noIcon: false },
              toolbarActions: [
                'add',
                'edit',
                [
                  {
                    extend: 'remove',
                    click: (arg) => {
                      const grid = gridRef.getEditorForm().getFieldComponent('sqlFieldMapping');
                      grid.removeRows(arg.selecteds);
                    },
                  },
                  {
                    extend: 'remove',
                    name: 'removeAll',
                    label: $t('deleteAll'),
                    click: (arg) => {
                      const grid = gridRef.getEditorForm().getFieldComponent('sqlFieldMapping');
                      grid.setLocalData([]);
                    },
                  },
                ],
              ],
              primaryKey: 'uuid',
              columns: [
                { name: 'uuid', label: 'uuid', hidden: true },
                {
                  width: '50%',
                  name: 'field',
                  label: $t('fieldName'),
                  align: 'left',
                  sortable: false,
                },
                {
                  width: '50%',
                  name: 'parameter',
                  label: $t('parameterName'),
                  sortable: false,
                  format: (value) => {
                    return PlaceHolder.replace(value);
                  },
                },
              ],
              editor: {
                dialog: {
                  width: '600px',
                },
                form: {
                  colsNum: 1,
                  fields: [
                    { name: 'uuid', label: 'uuid', hidden: true },
                    {
                      name: 'field',
                      label: $t('fieldName'),
                      type: 'select',
                      options: sqlQueryResultFieldsRef,
                    },
                    {
                      name: 'parameter',
                      label: $t('parameterName'),
                      type: 'select',
                      options: parameterOptionsRef,
                    },
                  ],
                },
              },
              onBeforeEditorDataSubmit: (data, callback) => {
                const grid = gridRef.getEditorForm().getFieldComponent('sqlFieldMapping');
                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);
                }
              },
            },
          ],
        },
      }"
      :viewer="{
        panel: {
          columnNum: 1,
          fields: [
            { name: 'order', label: $t('order') },
            { name: 'id', label: $t('id'), primaryKey: true },
            { name: 'parameter', label: $t('parameter') },
            { 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 ('OBJECT_PROPERTIES' === data.type) {
            const grid = form.getFieldComponent('objectProperties');
            const localData = grid.getLocalData();
            const objectProperties = [];
            for (const item of localData) {
              objectProperties.push({
                code: item.code,
                name: item.name,
                expression: item.expression,
              });
            }
            data.objectProperties = Tools.object2Json(objectProperties);
          } else 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);
          } else if ('SQL' === data.type) {
            const sqlParameterValuesGrid = form.getFieldComponent('sqlParameterValues');
            const sqlParameterValuesLocalData = sqlParameterValuesGrid.getLocalData();
            const sqlParameterValues = [];
            for (const item of sqlParameterValuesLocalData) {
              sqlParameterValues.push({
                uuid: item.uuid,
                name: item.name,
                value: item.value,
              });
            }
            data.sqlParameterValues = Tools.object2Json(sqlParameterValues);

            const sqlFieldMappingGrid = form.getFieldComponent('sqlFieldMapping');
            const sqlFieldMappingLocalData = sqlFieldMappingGrid.getLocalData();
            const sqlFieldMapping = [];
            for (const item of sqlFieldMappingLocalData) {
              sqlFieldMapping.push({
                uuid: item.uuid,
                field: item.field,
                parameter: item.parameter,
              });
            }
            data.sqlFieldMapping = Tools.object2Json(sqlFieldMapping);
          }
        }
      "
      @after-editor-open="
        (row) => {
          // 获取代码提示列表
          axios.get(Environment.apiContextPath('/api/re/common/listParameterAndValueTypeByParameterId/' + parameter.id)).then((response) => {
            autoCompletionManager.setParameters(response.data.parameters);
            autoCompletionManager.setValueTypes(response.data.valueTypes);
          });

          // 获取选项输入参数列表
          axios.get(Environment.apiContextPath('/api/re/model/parameter/listParemtersByParameterId/' + parameter.id)).then((response) => {
            const parameters = response.data;
            const options = [];
            for (const item of parameters) {
              if (item.type === 'IN_OPTION') {
                options.push({ label: item.name, value: item.code });
              }
            }
            optionOptionsRef = options;
          });

          if ('add' == gridRef.getEditorForm().getStatus()) {
            // 获取对象属性列表
            axios.get(Environment.apiContextPath('/api/re/model/parameter/listObejctPropertiesByParameterId/' + parameter.id)).then((response) => {
              const properties = response.data;
              const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
              grid?.setLocalData(properties);
            });
          } else if ('edit' == gridRef.getEditorForm().getStatus()) {
            // 获取对象属性列表
            axios.get(Environment.apiContextPath('/api/re/model/parameter/processor/listObejctPropertiesByProcessorId/' + row.id)).then((response) => {
              const properties = response.data;
              const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
              grid?.setLocalData(properties);
            });
          }

          //获取所有参数列表
          axios.get(Environment.apiContextPath('api/re/model/parameter/findParametersByParameterId?parameterId=' + parameter.id)).then((response) => {
            const options = [];
            for (const indicator of response.data) {
              options.push({ label: indicator.name, value: '${' + indicator.name + '}' });
            }
            parameterOptionsRef = options;
          });

          const type = gridRef.getEditorForm().getFieldValue('type');
          if ('OPTION_VALUE' === type) {
            editorDialogWidthRef = '40%';
          } else if ('SQL' === type || 'OBJECT_PROPERTIES' === type) {
            editorDialogWidthRef = '80%';
          } else {
            editorDialogWidthRef = '60%';
          }

          if ('OBJECT_PROPERTIES' === type) {
          } else if ('OPTION_VALUE' === type) {
          } else 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);
          } else if ('DECISION_TABLE_2C' === type) {
            const grid = gridRef.getEditorForm().getFieldComponent('decisionTable2C');
            const rows = Tools.json2Object(row.decisionTable2C);
            grid.setLocalData(rows);
          } else if ('SQL' === type) {
            const sqlParameterValuesGrid = gridRef.getEditorForm().getFieldComponent('sqlParameterValues');
            const sqlParameterValuesRows = Tools.json2Object(row.sqlParameterValues);
            sqlParameterValuesGrid.setLocalData(sqlParameterValuesRows);

            const sqlFieldMappingGrid = gridRef.getEditorForm().getFieldComponent('sqlFieldMapping');
            const sqlFieldMappingRows = Tools.json2Object(row.sqlFieldMapping);
            sqlFieldMappingGrid.setLocalData(sqlFieldMappingRows);
          }
        }
      "
      @row-db-click="
        (e, row) => {
          const type = row.type;
          if ('DECISION_TREE' === type) {
            decisionTreeDialogRef.open(row.id);
          } else if ('EXECUTION_FLOW' === type) {
            executionFlowDialogRef.open(row.id);
          } else {
            gridRef.edit(row);
          }
        }
      "
    ></w-grid>
    <DecisionTreeDialog ref="decisionTreeDialogRef"></DecisionTreeDialog>
    <ExecutionFlowDialog ref="executionFlowDialogRef"></ExecutionFlowDialog>
    <ObjectPropertiesMatcherDialog
      ref="objectPropertiesMatcherDialogRef"
      :parameter="parameter"
      @after-matched="
        (objectProperties) => {
          const grid = gridRef.getEditorForm().getFieldComponent('objectProperties');
          grid.setLocalData(objectProperties);
        }
      "
    ></ObjectPropertiesMatcherDialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, toValue } from 'vue';
import { axios, Environment, Formater, Tools, EnumTools, Options } from 'platform-core';
import { PlaceHolder } from '@/utils/PlaceHolder';
import DecisionTreeDialog from './DecisionTreeDialog.vue';
import ExecutionFlowDialog from './ExecutionFlowDialog.vue';
import ObjectPropertiesMatcherDialog from './ObjectPropertiesMatcherDialog.vue';
import { AutoCompletionManager } from '@/views/shared/AutoCompletionManager';

const props = defineProps({
  fetchDataUrl: { type: String, default: '' },
  dataUrl: { type: String, default: '' },
  parameter: { type: Object, default: undefined },
  readOnly: { type: Boolean, default: false },
});

const emit = defineEmits<{
  (e: 'rowClick', evt: Event, row: any, index: number): void;
  (e: 'beforeRequestData', requestParams: URLSearchParams | any, callback: any): void;
}>();

const gridRef = ref();
const optionOptionsRef = ref([]);
const dsOptionsRef = ref([]);
const sqlQueryResultFieldsRef = ref([]);
const parameterOptionsRef = ref();
const editorDialogWidthRef = ref('50%');
const decisionTreeDialogRef = ref();
const executionFlowDialogRef = ref();
const objectPropertiesMatcherDialogRef = ref();
const autoCompletionManager = new AutoCompletionManager();

const autoCompletion = (context) => {
  return autoCompletionManager.autoCompletion(context);
};

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']);
axios.get(Environment.apiContextPath('/api/system/datasource')).then((response) => {
  const items = response.data?.content;
  if (items) {
    const options = [];
    for (const item of items) {
      options.push({ label: item.name, value: item.name });
    }
    dsOptionsRef.value = options;
  }
});
</script>