<template>
  <div class="groups isSelected">
    <div class="title" v-if="!SHOW_NEW_FLOW_DESIGN">
      <span>{{ props.nodeGroup.name }}</span>
    </div>
    <div class="title cursor" v-if="SHOW_NEW_FLOW_DESIGN" @click="titleClick">
      <caret-down-outlined class="title-down" v-if="isSelect" />
      <caret-right-outlined class="title-down" v-if="!isSelect" />
      <span>{{ props.nodeGroup.name }}</span>
    </div>
    <div class="nodes flex-nodes" v-if="isSelect">
      <template v-for="(item, index) in nodes" :key="index">
        <new-node-item
          style="margin-bottom: 20px"
          :node-data="item"
          @mousedown="e => drag(item, e)"
          :iconList="props.iconList"
          :type="type"
        >
        </new-node-item>
      </template>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, inject, ref, watch } from 'vue';
import NodeItem from './node_item.vue';
import NewNodeItem from './new_node_item.vue';
import { SHOW_NEW_FLOW_DESIGN } from '@/config/setting';
import {
  subEventDefaultData,
  promoterEventDefaultData,
  messageListeningDefaultData,
  approveEventDefaultData,
  sendEventDefaultData,
  custonActivityDefaultData,
  conditionDefaultData,
} from '../../data/load-node-data';

export default defineComponent({
  name: 'WorkflowNodeGroup',
  components: {
    NodeItem,
    NewNodeItem
  },
  props: {
    // 节点组信息
    nodeGroup: {
      type: Object,
      required: true
    },
    // 选中的父级列表
    selectKeys: {
      type: Array,
      default: []
    },
    // 图片列表
    iconList: {
      type: Array,
      default: []
    },
    type: {
      type: String,
      default: 'base'
    }
  },
  emits: ['changeSelect'],
  setup(props, { emit }) {
    const getWorkflowDnd = inject('getWorkflowDnd');

    // 节点列表
    const nodes = computed(() => {
      return props.nodeGroup.nodes;
    });

    // 是否选中
    const isSelect = ref(false);

    const drag = (item, e) => {
      let nodeData = {};
      const { type } = item;
      switch (type) {
        case 12:
          nodeData = subEventDefaultData;
          break;
        case 13:
          nodeData = promoterEventDefaultData;
          break;
        case 20:
          nodeData = messageListeningDefaultData;
          break;
        case 30:
        case 32:
          nodeData = approveEventDefaultData;
          break;
        case 31:
          nodeData = sendEventDefaultData;
          break;
        case 40:
          nodeData = custonActivityDefaultData;
          break;
        case 60:
        case 248:
          nodeData = conditionDefaultData;
          break;
        default:
          break;
      }
      item.data.nodeData = { ...nodeData };
      getWorkflowDnd.value.drag(item, e);
    };

    /**
     * 名称点击
     */
    const titleClick = () => {
      emit('changeSelect', props.nodeGroup.id);
    };

    watch(
      () => props.selectKeys,
      val => {
        if (val.find(item => item == props.nodeGroup.id)) {
          isSelect.value = true;
        } else {
          isSelect.value = false;
        }
      },
      { deep: true, immediate: true }
    );

    return {
      drag,
      nodes,
      props,
      isSelect,
      titleClick,
      SHOW_NEW_FLOW_DESIGN
    };
  }
});
</script>

<style scoped lang="less">
.groups {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0 16px;

  .title {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #60666b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .title-down {
    color: #898e91;
    font-size: 12px;
    margin-right: 5px;
  }

  .cursor {
    cursor: pointer;
  }

  .nodes {
    flex: 1;
  }
  &:not(:last-child) {
    border-bottom: 1px solid rgba(197, 207, 209, 0.6);
  }
  &:not(:first-child) {
    padding-top: 20px;
  }
}

.flex-nodes {
  display: flex;
  flex-wrap: wrap;
}

.clear {
  clear: both;
}
</style>
