<template>
  <div :class="prefixCls" :style="{ width: `${props.width}px` }">
    <a-tabs v-model:activeKey="configActiveName">
      <a-tab-pane :tab="data.wfNodeName" key="1">
        <!-- 开始节点 -->
        <start-event-option
          ref="startRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :schemeCode="props.schemeCode"
          :class="data.currentWfNode.type == 'bpmn:StartEvent' ? '' : 'hidden'"
        ></start-event-option>
        <!-- 审核节点 -->
        <user-task-option
          ref="taskRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:Task' ? '' : 'hidden'"
        >
        </user-task-option>
        <!-- 结束节点 -->
        <end-event-option
          ref="endRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:EndEvent' ? '' : 'hidden'"
        ></end-event-option>
        <!-- 子流程 -->
        <subprocess-option
          ref="subprocessRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:SubProcess' ? '' : 'hidden'"
        ></subprocess-option>
        <!-- 排他网关 -->
        <exclusive-gateway-option
          ref="exclusiveGatewayRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:ExclusiveGateway' ? '' : 'hidden'"
        >
        </exclusive-gateway-option>
        <!-- 并行网关 -->
        <parallel-gateway-option
          ref="parallelGatewayRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:ParallelGateway' ? '' : 'hidden'"
        >
        </parallel-gateway-option>
        <!-- 包容网关 -->
        <!-- "bpmn:InclusiveGateway" -->
        <inclusive-gateway-option
          ref="inclusiveGatewayRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:InclusiveGateway' ? '' : 'hidden'"
        >
        </inclusive-gateway-option>
        <!-- 线条 -->
        <myline-option
          ref="mylineRef"
          :element="data.currentWfNode"
          :pageType="props.pageType"
          :class="data.currentWfNode.type == 'bpmn:SequenceFlow' ? '' : 'hidden'"
        >
        </myline-option>
      </a-tab-pane>
      <a-tab-pane tab="流程属性" key="2">
        <shcemeinfo-config
          ref="shcemeinfoRef"
          :disabled="true"
          :pageType="props.pageType"
        ></shcemeinfo-config>
      </a-tab-pane>
      <a-tab-pane key="3" tab="发起权限" force-render v-if="props.pageType != 'detail'">
        <auth-config ref="authRef"></auth-config>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
  import {
    reactive,
    onMounted,
    defineProps,
    watch,
    ref,
  } from 'vue';
  import {
    SaveOutlined,
    ZoomOutOutlined,
    ZoomInOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    ClearOutlined,
  } from '@ant-design/icons-vue';
  import { Tabs } from 'ant-design-vue';
  import { PageWrapper } from '@/components/Page';
  import { useDesign } from '@/hooks/web/useDesign';
  import { lr_AESEncrypt } from '../utils';
  const { prefixCls } = useDesign('process-property');
  import { useMessage } from '@/hooks/web/useMessage';
  const {createMessage } = useMessage();
  import { getDetail } from '@/api/sys/WFSchemeInfo';

  // 流程属性
  import {shcemeinfoConfig} from './page';
  // 发起权限
  import {authConfig} from './page';
  // 开始节点
  import {StartEventOption} from './page';
  // 审核节点
  import {userTaskOption} from './page';
  // 结束节点
  import {endEventOption} from './page';
  // 并行网关
  import {parallelGatewayOption} from './page';
  // 排他网关
  import {exclusiveGatewayOption} from './page';
  // 包容网关
  import {inclusiveGatewayOption} from './page';
  // 子流程
  import {subprocessOption} from './page';
  // 线
  import {mylineOption} from './page';
  import { flowStore } from '@/store/modules/flow';
  const flowWfDataStore = flowStore();

  const props = defineProps({
    bpmnModeler: Object,
    prefix: {
      type: String,
      default: 'camunda',
    },
    width: {
      type: Number,
      default: 520,
    },
    element: Object,
    schemeCode: String,
    pageType: String,
    pageView: String,
  });
  watch(
    () => props.pageView,
    (newVal, oldVal) => {
      var content = JSON.parse(newVal);
      shcemeinfoRef.value.setForm(content);
      flowWfDataStore.setWfDataAll(content.wfData);
    },
  );
  const startRef = ref<any>();
  const shcemeinfoRef = ref<any>();
  const authRef = ref<any>();
  const taskRef = ref<any>();
  const endRef = ref<any>();
  const subprocessRef = ref<any>();
  const exclusiveGatewayRef = ref<any>();
  const parallelGatewayRef = ref<any>();
  const inclusiveGatewayRef = ref<any>();
  const configActiveName = ref('2');
  interface dataType {
    currentWfNode: any;
    wfNodeName: string;
    wfData: any;
    activeTab: string;
    elementId: string;
    elementType: string;
    elementBusinessObject: any; // 元素 businessObject 镜像，提供给需要做判断的组件使用
    conditionFormVisible: boolean; // 流转条件设置
    formVisible: boolean; // 表单配置
  }
  const data: dataType = reactive({
    currentWfNode: undefined,
    wfNodeName: '',
    wfData: [],
    activeTab: 'base',
    elementId: '',
    elementType: '',
    elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
    conditionFormVisible: false, // 流转条件设置
    formVisible: false, // 表单配置
  });
  function initModels() {
    setTimeout(() => {
      getActiveElement();
    }, 10);
  }
  function getActiveElement() {
    // 初始第一个选中元素 bpmn:Process
    initFormOnChanged(null);
    props.bpmnModeler.on('import.done', (e) => {
      initFormOnChanged(null);
    });
    // 监听选择事件，修改当前激活的元素以及表单
    props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
      initFormOnChanged(newSelection[0] || null);
    });
    props.bpmnModeler.on('element.changed', ({ element }) => {
      // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
      if (element && element.id === data.elementId) {
        initFormOnChanged(element);
      }
    });
  }
  // 初始化数据
  function initFormOnChanged(element) {
    if (element == null) {
      return;
    }
    if (element.type == 'bpmn:Process') {
      data.currentWfNode = {
        type: element.type,
      };
      configActiveName.value = '2';
    } else {
      data.currentWfNode = element;
      configActiveName.value = '1';
      setNodeData(element.type, element);
    }
  }
  // 设置节点初始数据
  function setNodeData(name, element) {
    console.log(name)
    switch (name) {
      case 'bpmn:StartEvent':
        data.wfNodeName = '开始节点';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          isNextAuditor: false,
          isCustmerTitle: false,
          formRelations: [],
          formType: '1',
          formCode: '',
          formVerison: '',
          formRelationId: '',
          formUrl: '',
          formAppUrl: '',
          authFields: [],
          messageType: '',
          isInit: true,
        };
        break;
      case 'bpmn:EndEvent':
        data.wfNodeName = '结束节点';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
        };
        break;
      case 'bpmn:Task':
        data.wfNodeName = '审核节点';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          isAddSign: false,
          isTransfer: false,
          isBatchAudit: false,
          autoAgree: '',
          noAuditor: '1',
          rejectType: '1',
          messageType: '',
          auditUsers: [],
          lookUsers: [],
          formRelations: [],
          formType: '1',
          formCode: '',
          formVerison: '',
          formRelationId: '',
          formUrl: '',
          formAppUrl: '',
          authFields: [],
          name: '审核节点',
          btnlist: [
            {
              code: 'agree',
              name: '同意',
              hidden: false,
              isNextAuditor: false,
              isSign: false,
              isSys: true,
            },
            {
              code: 'disagree',
              name: '驳回',
              hidden: false,
              isNextAuditor: false,
              isSign: false,
              isSys: true,
            },
          ],
          isCountersign: false,
          isCountersignAll: false,
          countersignAgian: '1',
          countersignType: '1',
          countersignAllType: 100,
          isOvertimeMessage: false,
          overtimeMessageType: '',
          overtimeMessageStart: 1,
          overtimeMessageInterval: 1,
          overtimeGo: 12,
          isInherit: true,
          isInit: true,
        };
        break;
      case 'bpmn:SubProcess':
        data.wfNodeName = '子流程';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          isAsync: false,
          wfschemeId: '',
          wfVersionId: '',
          isInit: true,
        };
        break;
      case 'bpmn:ExclusiveGateway':
        data.wfNodeName = '排他网关';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          conditions: [],
          isInit: true,
        };
        break;
      case 'bpmn:ParallelGateway':
        data.wfNodeName = '并行网关';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          isInit: true,
        };
        break;
      case 'bpmn:InclusiveGateway':
        data.wfNodeName = '包含网关';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          conditions: [],
          isInit: true,
        };
        break;
      case 'bpmn:SequenceFlow':
        data.wfNodeName = '线条';
        data.currentWfNode = {
          id: element.id,
          type: element.type,
          lineConditions: '',
          from: element.businessObject.sourceRef.id,
          isInit: true,
          to: element.businessObject.targetRef.id,
        };
        break;

      default:
        break;
    }
    // 更改flowStore的数据
    flowWfDataStore.setWfDataNode(data.currentWfNode);
  }

  async function getDetailInfo() {
    let data = await getDetail({ code: props.schemeCode });
    let scheme = JSON.parse(data.scheme.content);
    let baseinfo = {
      id: data.schemeinfo.id,
      code: data.schemeinfo.code,
      name: data.schemeinfo.name,
      category: data.schemeinfo.category,
      enabledMark: data.schemeinfo.enabledMark,
      mark: data.schemeinfo.mark,
      isInApp: data.schemeinfo.isInApp,
      description: data.schemeinfo.description,
      icon: data.schemeinfo.icon,
      color: data.schemeinfo.color,
      schemeId: data.schemeinfo.schemeId,

      undoType: scheme.undoType,
      undoDbCode: scheme.undoDbCode,
      undoDbSQL: scheme.undoDbSQL,
      undoIOCName: scheme.undoIOCName,
      undoUrl: scheme.undoUrl,

      deleteType: scheme.deleteType,
      deleteDbCode: scheme.deleteDbCode,
      deleteDbSQL: scheme.deleteDbSQL,
      deleteIOCName: scheme.deleteIOCName,
      deleteUrl: scheme.deleteUrl,

      deleteDraftType: scheme.deleteDraftType,
      deleteDraftDbCode: scheme.deleteDraftDbCode,
      deleteDraftDbSQL: scheme.deleteDraftDbSQL,
      deleteDraftIOCName: scheme.deleteDraftIOCName,
      deleteDraftUrl: scheme.deleteDraftUrl,
    };

    let wfData = scheme.wfData;
    flowWfDataStore.setWfDataAll(wfData);
    let auth = {
      authType: data.schemeinfo.authType,
      authData: data.schemeAuthList.map((t) => {
        return {
          id: t.objId,
          name: t.objName,
          type: t.objType,
        };
      }),
    };
    shcemeinfoRef.value.setForm(baseinfo);
    authRef.value.setForm(auth);
  }

  async function validatePanel() {
    let res = await shcemeinfoRef.value.validateForm();
    if (!res) {
      configActiveName.value = '2';
    }
    return res;
  }
  async function getPanel() {
    // 1.获取流程配置基础属性
    let baseinfo = await shcemeinfoRef.value.getForm();
    // 2.获取流程权限信息
    let auth = await authRef.value.getForm();
    let wfData = flowWfDataStore.getWfData;
    console.log(wfData);
    var startIndex = (wfData || []).findIndex((element:{type?:string}) => element.type == 'bpmn:StartEvent');
    if (startIndex == -1) {
      return createMessage.warn('请设置开始节点');
    }
    var endIndex = (wfData || []).findIndex((element:{type?:string}) => element.type == 'bpmn:EndEvent');
    if (endIndex == -1) {
      return createMessage.warn('请设置结束节点');
    }
    wfData.forEach(
      (node: {
        type?: string;
        lineConditions?: string;
        from?: string;
        messageType?: any;
        overtimeMessageType?: any;
      }) => {
        if (node.type == 'bpmn:SequenceFlow') {
          if (node.lineConditions == '') {
            const fromNode:
              | {
                  type?: string;
                  btnlist?: any;
                }
              | any = wfData.find((t: { id: string }) => t.id === node.from);
            if (fromNode.type == 'bpmn:Task') {
              if (fromNode.btnlist.findIndex((t) => t.code == 'agree' && !t.hidden) != -1) {
                node.lineConditions = 'agree'; // 流转条件
              }
            }
          }
        }
        if (node.type == 'bpmn:StartEvent') {
          if (node.messageType instanceof Array) {
            if (node.messageType.length == 1) {
              node.messageType = node.messageType[0];
            } else {
              node.messageType = node.messageType.join(',');
            }
          }
        }
        if (node.type == 'bpmn:Task') {
          if (node.overtimeMessageType instanceof Array) {
            if (node.overtimeMessageType.length == 1) {
              node.overtimeMessageType = node.overtimeMessageType[0];
            } else {
              node.overtimeMessageType = node.overtimeMessageType.join(',');
            }
          }
          if (node.messageType instanceof Array) {
            if (node.messageType.length == 1) {
              node.messageType = node.messageType[0];
            } else {
              node.messageType = node.messageType.join(',');
            }
          }
        }
      },
    );
    console.log(wfData);
    let scheme = {
      wfData: wfData,

      undoType: baseinfo.undoType,
      undoDbCode: baseinfo.undoDbCode,
      undoDbSQL: baseinfo.undoDbSQL,
      undoIOCName: baseinfo.undoIOCName,
      undoUrl: baseinfo.undoUrl,

      deleteType: baseinfo.deleteType,
      deleteDbCode: baseinfo.deleteDbCode,
      deleteDbSQL: baseinfo.deleteDbSQL,
      deleteIOCName: baseinfo.deleteIOCName,
      deleteUrl: baseinfo.deleteUrl,

      deleteDraftType: baseinfo.deleteDraftType,
      deleteDraftDbCode: baseinfo.deleteDraftDbCode,
      deleteDraftDbSQL: baseinfo.deleteDraftDbSQL,
      deleteDraftIOCName: baseinfo.deleteDraftIOCName,
      deleteDraftUrl: baseinfo.deleteDraftUrl,
    };
    let dto = {
      schemeinfo: {
        id: baseinfo.id,
        code: baseinfo.code,
        name: baseinfo.name,
        category: baseinfo.category,
        enabledMark: baseinfo.enabledMark,
        mark: baseinfo.mark,
        isInApp: baseinfo.isInApp,
        authType: auth.authType,
        description: baseinfo.description,
        icon: baseinfo.icon,
        color: baseinfo.color,
        schemeId: baseinfo.schemeId,
      },
      schemeAuthList:
        auth.authType == 1
          ? []
          : auth.authData.map((t) => {
              return {
                objId: t.id,
                objName: t.name,
                objType: t.type,
              };
            }),
      scheme: {
        content: lr_AESEncrypt(JSON.stringify(scheme), 'learun'),
      },
      // scheme:scheme
    };
    console.log(dto);
    return dto;
  }
  defineExpose({
    getPanel,
    validatePanel,
  });
  onMounted(() => {
    initModels();
    if (props.schemeCode) {
      getDetailInfo();
    }
    if (props.pageType == 'detail') {
      var content = JSON.parse(props.pageView);
      shcemeinfoRef.value.setForm(content);
      flowWfDataStore.setWfDataAll(content.wfData);
    }
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-process-property';

  .@{prefix-cls} {
    background-color: @component-background;
  }

  ::v-deep .ant-tabs {
    height: 100%;
    width: 100%;
    padding: 0 20px;
  }

  ::v-deep .ant-tabs-content-holder {
    overflow-y: auto;
  }

  .hidden {
    display: none;
  }
</style>
