<template>
  <!--  <el-tabs v-model="active" v-if="visible && name && formConfig.length > 0">-->
  <el-tabs v-model="active" v-if="visible && name">
    <el-tab-pane :label="name" name="properties">
      <component :is="com" :config="selectNode.props" @initRender="emit('initRender')"/>
    </el-tab-pane>
    <el-tab-pane label="表单权限设置" name="permissions">
      <form-authority-config :node-type="selectNode.type"/>
    </el-tab-pane>
  </el-tabs>
  <div v-else>
    <component :is="com" :config="selectNode.props" @initRender="emit('initRender')"/>
  </div>
</template>

<script setup>
import FormAuthorityConfig from './FormAuthorityConfig.vue'
import Approval from './ApprovalNodeConfig.vue'
import Root from './RootConfig.vue'
import Delay from './DelayNodeConfig.vue'
import CcNode from './CcNodeConfig.vue'
import Condition from './ConditionNodeConfig.vue'
import Trigger from './TriggerNodeConfig.vue'
import {useProcessStore} from '@/stores/processStore.js'
import {computed, defineEmits} from 'vue'

const emit = defineEmits()

const processStore = useProcessStore()

const selectNode = computed(() => {
  return processStore.getSelectedNode()
})


// const formConfig = computed(() => {
//   return processStore.getDesign().formItems
// })


const com = ref()
const active = ref('properties')
const visible = ref(false)


const name = computed(() => {
  switch (processStore.getSelectedNode().type) {
    case 'ROOT':
      // return '设置发起人';
      return '节点设置';
    case 'APPROVAL':
      return '设置审批人';
    case 'CC':
      return '设置抄送人';
    default:
      return null;
  }
})


const init = () => {
  switch (processStore.getSelectedNode().type) {
    case 'APPROVAL' :
      com.value = Approval;
      break;
    case 'ROOT' :
      com.value = Root;
      break;
    case 'DELAY' :
      com.value = Delay;
      break;
    case 'CC' :
      com.value = CcNode;
      break;
    case 'CONDITION' :
      com.value = Condition;
      break;
    case 'TRIGGER' :
      com.value = Trigger;
      break;
  }
  visible.value = false
  nextTick(() => {
    visible.value = true
  })
}

init()

</script>

<style scoped>

</style>
