<template>
  <div class="panel-wrapper">
    <div class="panel-container">
      <flow-panel></flow-panel>

      <connection-panel v-show="operationItem.type === 'connection'" :workflow-type="workflowType"></connection-panel>

      <node-panel v-show="operationItem.type === 'Node' || operationItem.type === 'ActionNode'"></node-panel>

      <action-panel v-show="operationItem.type === 'Node' || operationItem.type === 'ActionNode' || operationItem.type === 'StartNode' || operationItem.type === 'EndNode'" :workflow-type="workflowType"></action-panel>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import flowPanel from './flowPanel.vue'
import nodePanel from './nodePanel.vue'
import actionPanel from './actionPanel.vue'
import connectionPanel from './connectionPanel.vue'

export default {
  data () {
    return {}
  },
  computed: Object.assign({}, mapGetters(['operationItem', 'workflowType'])),
  methods: {},
  created () {
  },
  components: {
    'flow-panel': flowPanel,
    'node-panel': nodePanel,
    'action-panel': actionPanel,
    'connection-panel': connectionPanel
  }
}
</script>

<style>
  .el-form-item {
    margin-bottom: 5px;
  }
</style>
