<template>
  <div @click.stop="open">
    <InputModel
      :value="props.ruleConfig.name"
      :placeholder="t('配置规则流程')"
      style="width: 100%; min-width: 100px"
    />
    <ModalPanel
      :visible="visible"
      :width="900"
      :title="t('规则流程配置')"
      @submit="submit"
      @close="close"
    >
      <NodeHead :nodeName="t('规则流程信息')" class="ml-4 my-4" />
      <SelectRuleProcessTemplate :config="data.config" @setConfig="setConfig" />
      <!-- 参数配置 -->
      <a-table :columns="columns" :data-source="data.dataSource" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'"> {{ record.name }} </template>
          <template v-else-if="column.key === 'type'">
            {{ getTypeOptionName(record.type) }}
          </template>
          <template v-else-if="column.key === 'assignmentType'">
            <a-select
              v-model:value="record.assignmentType"
              style="width: 220px"
              :placeholder="t('请选择赋值类型')"
              :options="data.assignmentTypeList"
              allowClear
              @change="record.assignmentValue = ''"
            />
          </template>
          <template v-else-if="column.key === 'assignmentValue'">
            <!-- 表单数据 -->
            <a-tree-select
              v-if="record.assignmentType === AssignmentTypeToRuleType.FORM"
              v-model:value="record.assignmentValue"
              show-search
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :placeholder="t('请选择表单数据')"
              allow-clear
              tree-default-expand-all
              :tree-data="data.formDataTree"
              :field-names="{
                children: 'children',
                label: 'title',
                value: 'key',
              }"
            />
            <a-input
              v-else
              v-model:value="record.assignmentValue"
              :placeholder="t('请填写值')"
            />
          </template>
        </template>
      </a-table>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { NodeHead, ModalPanel } from "/@/components/ModalPanel/index";
import { InputModel } from "/@/components/ApiConfig";
import { SelectRuleProcessTemplate } from "/@/components/RuleProcess";
import {
  // getNodeList, getProcessParamConfigs,
  getVariablesTree,
} from "../../config/info";
// import { BpmnNodeKey } from '/@/enums/workflowEnum';
import { cloneDeep } from "lodash-es";
import { useI18n } from "/@/hooks/web/useI18n";
import {
  RuleProcessConfig,
  RuleProcessConfigListModel,
} from "/@/components/RuleProcess/src/interface";
import { OperationType } from "/@/enums/workflowEnum";
import { TreeProps } from "ant-design-vue/es/tree/Tree";
import { AssignmentTypeToRuleType } from "/@/api/ruleProcess/model";
import { infoMap } from "/@/components/Designer";
// import { ProcessDataVariable } from '/@bpmn/config/rules';
// import { InfoItem } from '/@/model/workflow/bpmnConfig';
const { t } = useI18n();
const emit = defineEmits(["change"]);
let props = withDefaults(
  defineProps<{
    ruleConfig: RuleProcessConfig;
    exampleStr?: string;
    needHideComponents?: Boolean;
    isGlobalParams?: Boolean;
  }>(),
  {
    ruleConfig: () => {
      return {
        id: "",
        name: "",
        processParamConfigs: [],
      };
    },
    exampleStr: `{
        code: 0,
        msg: 'success',
        data: 'value',
      }`,
    needHideComponents: () => {
      return false;
    },
    isGlobalParams: () => {
      return false;
    },
  }
);
let typeOptions = [
  {
    id: OperationType.VALUE,
    name: t("值"),
  },
  {
    id: OperationType.VARIABLE,
    name: t("变量"),
  },
  {
    id: OperationType.API,
    name: "API",
  },
];

const columns = [
  {
    title: "参数名称",
    key: "name",
  },
  {
    title: "参数类型",
    key: "type",
  },
  {
    title: "赋值类型",
    key: "assignmentType",
    width: 220,
  },
  {
    title: "赋值配置",
    key: "assignmentValue",
    width: 220,
  },
];
let data = reactive({
  config: cloneDeep(props.ruleConfig) as RuleProcessConfig,
  dataSource: [] as any[],
  dataInfo: [] as any[],
  assignmentTypeList: [] as any[],
  formDataTree: [] as TreeProps["treeData"],
  // processParameterTree: [] as Array<{ id: string; name: string }>,
  // originatorTree: [
  //   {
  //     title: t('发起人ID'),
  //     key: '#{initiator_id}#',
  //   },
  //   {
  //     title: t('发起人所属组织架构名称'),
  //     key: '#{initiator_dept_name}#',
  //   },
  // ],
  // paramTree: ProcessDataVariable,
  // nodeList: [] as Array<InfoItem>,
});

const visible = ref<boolean>(false);
function open() {
  data.assignmentTypeList = [
    {
      label: t("默认值"),
      value: AssignmentTypeToRuleType.DEFAULT,
    },
    {
      label: t("值"),
      value: AssignmentTypeToRuleType.VALUE,
    },
    {
      label: t("表单数据"),
      value: AssignmentTypeToRuleType.FORM,
    },
  ];
  data.dataInfo = [
    {
      title: t("表单数据"),
      value: "formData",
      disabled: true,
      children: [],
    },
    {
      title: "隐藏组件",
      value: "hiddenComponents",
      disabled: true,
      children: [],
    },
    {
      title: "当前信息",
      value: "currentInfo",
      disabled: true,
      children: infoMap,
    },
  ];
  // data.processParameterTree = getProcessParamConfigs();
  data.formDataTree = getVariablesTree({
    needHideComponents: true,
    valueReprocessing: true,
  });
  // data.nodeList = getNodeList([BpmnNodeKey.USER]);
  data.config = cloneDeep(props.ruleConfig);
  data.dataSource = data.config.processParamConfigs;
  visible.value = true;
}
function close() {
  visible.value = false;
}
function submit() {
  let json = { ...data.config, processParamConfigs: data.dataSource };
  emit("change", cloneDeep(json));
  close();
}
function setConfig(config: RuleProcessConfigListModel) {
  if (config.id) data.config.id = config.id;
  if (config.name) data.config.name = config.name;
  if (config.jsonContent) {
    let jsonObj = JSON.parse(config.jsonContent);
    if (jsonObj.processParamConfigs && Array.isArray(jsonObj.processParamConfigs)) {
      data.dataSource = jsonObj.processParamConfigs.map((ele) => {
        return {
          ...ele,
          assignmentType: data.assignmentTypeList[0].value,
          assignmentValue: "",
        };
      });
    }
  }
}

function getTypeOptionName(type) {
  let arr = typeOptions.filter((ele) => {
    return ele.id == type;
  });
  if (arr.length > 0) {
    return arr[0].name;
  } else {
    return "";
  }
}
</script>

<style lang="less" scoped>
.padding {
  padding: 10px 20px;
}

.btn-item {
  position: absolute;
  bottom: 10px;
  left: 16px;
}

.editor-box {
  width: 300px;
  position: absolute;
  height: 350px;
  left: 140px;
  bottom: 13px;
  border: 1px solid #ccc;
  box-shadow: 0 0 6px 3px #ccc;

  .editor-close {
    position: absolute;
    top: -3px;
    right: 13px;
    font-size: 16px;
    cursor: pointer;
  }

  .editor-copy {
    position: absolute;
    bottom: 5px;
    right: 15px;
    cursor: pointer;
    z-index: 999;
    color: #5e95ff;
  }
}
</style>
