<template>
  <div class="panel">
    <div class="panel-tabs" v-if="SHOW_NEW_FLOW_DESIGN && !showBusinessGraph">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="基本流程"></a-tab-pane>
        <a-tab-pane key="2" tab="BPMN 流程"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="panel-search">
      <a-input v-model:value.trim="searchText" allowClear placeholder="请输入，回车搜索" @pressEnter="search"
        ><template #prefix> <icon-font iconClass="icon-opt-search"></icon-font> </template
      ></a-input>
    </div>
    <!-- 基础流程图 、 bpmn图 -->
    <div class="panel-content" v-if="!showBusinessGraph" :style="{ height: SHOW_NEW_FLOW_DESIGN ? 'calc(100% - 104px)' : '100%' }">
      <!-- 基本流程 -->
      <template v-if="activeKey == '1'">
        <template v-for="(nodeGroup, index) in baseFlowDataList.nodeGroups" :key="index + 'base'">
          <workflow-node-group
            :node-group="nodeGroup"
            v-model:selectKeys="baseFlowSelectKeys"
            @changeSelect="changeSelect"
          ></workflow-node-group>
        </template>
      </template>
      <template v-if="activeKey == '2'">
        <template v-for="(nodeGroup, index) in bpmnFlowDataList.nodeGroups" :key="index + 'bpmn'">
          <workflow-node-group
            type="bpmn"
            :node-group="nodeGroup"
            :iconList="bpmnIconList"
            v-model:selectKeys="bpmnFlowSelectKeys"
            @changeSelect="changeSelect"
          ></workflow-node-group>
        </template>
      </template>
    </div>

    <!-- 业务图 -->
    <div class="panel-content" style="height: 100%" v-if="showBusinessGraph">
      <template v-for="(nodeGroup, index) in businessGraphDataList.nodeGroups" :key="index + 'bpmn'">
        <workflow-node-group
          type="bpmn"
          :node-group="nodeGroup"
          :iconList="businessGraphIconList"
          v-model:selectKeys="businessGraphSelectKeys"
          @changeSelect="changeSelect"
        ></workflow-node-group>
      </template>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject, onMounted, provide, ref } from 'vue';
import WorkflowNodeGroup from './node_group.vue';
import JsonData from '../../data/data.json';
import BpmnJsonData from '../../data/bpmn.json';
import BusinessData from '../../data/business.json';
import { WorkflowDnd } from '../../model/workflow_dnd';
import { SHOW_NEW_FLOW_DESIGN } from '@/config/setting';
import { searchTree, deepClone, getBpmnFlowIcon, getBusinessPraphIcon } from '@/utils/common/util';

export default defineComponent({
  name: 'WorkflowNodePanel',
  components: {
    WorkflowNodeGroup
  },
  props: {
    // 是否显示业务图
    showBusinessGraph: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const workflowDnd = ref(null);
    const getGraph = inject('getGraph');

    const jsonData = JsonData;
    const bpmnJsonData = BpmnJsonData;

    const activeKey = ref('1');

    const searchText = ref('');

    // 基本流程列表
    const baseFlowDataList = ref(deepClone(jsonData));
    // bpmn流程列表
    const bpmnFlowDataList = ref(deepClone(bpmnJsonData));

    // 基本流程选中展开列表
    const baseFlowSelectKeys = ref([]);

    // BPMN流程选中展开列表
    const bpmnFlowSelectKeys = ref([]);

    const bpmnIconList = ref([]);

    // 业务图选中展开列表
    const businessGraphSelectKeys = ref([]);

    const businessGraphIconList = ref([]);

    // 业务图数据列表
    const businessGraphDataList = ref(deepClone(BusinessData));

    provide('getWorkflowDnd', workflowDnd);

    onMounted(() => {
      workflowDnd.value = new WorkflowDnd(getGraph.value);
      if (!props.showBusinessGraph) {
        baseFlowSelectKeys.value = jsonData.nodeGroups.map(item => item.id);

        if (SHOW_NEW_FLOW_DESIGN) {
          bpmnIconList.value = getBpmnFlowIcon();
          bpmnFlowSelectKeys.value = bpmnJsonData.nodeGroups.map(item => item.id);
        }
      } else {
        businessGraphIconList.value = getBusinessPraphIcon();
        businessGraphSelectKeys.value = BusinessData.nodeGroups.map(item => item.id);
      }
    });

    // 改变选中
    const changeSelect = id => {
      let targetArray = 0;
      if (!props.showBusinessGraph) {
        targetArray = activeKey.value === '1' ? baseFlowSelectKeys.value : bpmnFlowSelectKeys.value;
      } else {
        targetArray = businessGraphSelectKeys.value;
      }

      const findIndex = targetArray.findIndex(item => item === id);

      if (findIndex !== -1) {
        targetArray.splice(findIndex, 1);
      } else {
        targetArray.push(id);
      }
    };

    const search = () => {
      if (!props.showBusinessGraph) {
        const targetList = activeKey.value === '1' ? baseFlowDataList.value : bpmnFlowDataList.value;
        const sourceList = activeKey.value === '1' ? jsonData : bpmnJsonData;

        const arr = searchTree(targetList.nodeGroups, sourceList.nodeGroups, searchText.value, 'nodes', 'id', 'name');
        targetList.nodeGroups = deepClone(arr.resultList);
      } else {
      }
    };

    return {
      getGraph,
      jsonData,
      bpmnJsonData,
      BusinessData,
      baseFlowDataList,
      bpmnFlowDataList,
      SHOW_NEW_FLOW_DESIGN,
      activeKey,
      searchText,
      search,
      bpmnIconList,
      baseFlowSelectKeys,
      bpmnFlowSelectKeys,
      changeSelect,
      businessGraphDataList,
      businessGraphIconList,
      businessGraphSelectKeys
    };
  }
});
</script>

<style scoped lang="less">
.panel {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  height: 100%;
  box-sizing: border-box;
}
.panel-tabs {
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color-split);
}
:deep(.ant-tabs-nav) {
  margin: 0;
}
:deep(.ant-tabs-nav::before) {
  border-bottom: 0px;
}
.panel-search {
  padding: 0 16px;
  margin-top: 20px;
}
.panel-content {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  overflow-y: auto;

  scrollbar-width: none;
}
</style>
