<template>
  <div class="process-panel__container" :style="{ width: `${props.width}px` }">
    属性面板
    <!-- <el-tabs v-model="configActiveName" :stretch="true">
      <el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
        <component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
      </el-tab-pane>
      <el-tab-pane label="流程属性" name="tab02">
        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
      </el-tab-pane>
    </el-tabs> -->
    <!-- <Tabs v-model:activeKey="configActiveName">
      <Tabs.TabPane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
        <component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
      </Tabs.TabPane>
      <Tabs.TabPane label="流程属性" name="tab02">
        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
      </Tabs.TabPane>
    </Tabs> -->
    <!-- <Tabs>
      <template v-for="item in achieveList" :key="item.key">
        <Tabs.TabPane :tab="item.name">
          <component :is="tabs[item.component]" />
          <component :is="ElementBaseInfo" />
          <element-base-info :id-edit-disabled="idEditDisabled" :business-object="data.elementBusinessObject"
            :type="data.elementType" />
        </Tabs.TabPane>
      </template>
    </Tabs> -->
  
  </div>
</template>
<script lang="ts" setup>
  import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref } from 'vue';
  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  import { Tabs } from 'ant-design-vue';
  

  // 流程属性
  import shcemeinfoConfig from './config/shcemeInfo.vue'
  // 开始节点
  import startEventOption from './config/startEvent.vue'
  // 结束节点
  import endEventOption from './config/endEvent.vue'

  import gatewayAndOption from './config/gatewayAnd.vue'
  import gatewayInclusiveOption from './config/gatewayInclusive.vue'
  import gatewayXorOption from './config/gatewayXor.vue'
  import scriptTaskOption from './config/scriptTask.vue'
  import subprocessOption from './config/subprocess.vue'
  import userTaskOption from './config/userTask.vue'
  import mylineOption from './config/myline.vue'
  /**
   * 侧边栏
   * @Author MiyueFE
   * @Home https://github.com/miyuesc
   * @Date 2021年3月31日18:57:51
   */
  const props = defineProps({
    bpmnModeler: Object,
    prefix: {
      type: String,
      default: "camunda"
    },
    width: {
      type: Number,
      default: 480
    },
    idEditDisabled: {
      type: Boolean,
      default: false
    }
  })
  console.log(props)
  provide('prefix', props.prefix)
  provide('width', props.width)
  const data = reactive({
    configActiveName: 'tab02',
    currentWfNode: undefined,
    wfNodeName: {
      startEvent: '开始节点',
      endEvent: '结束节点',
      gatewayAnd: '并行网关',
      gatewayInclusive: '包含网关',
      gatewayXor: '排他网关',
      scriptTask: '脚本节点',
      userTask: '审核节点',
      subprocess: '子流程',
      myline: '线条'
    },

  })
  const achieveList = ref([
    {
      key: '1',
      name: '文章',
      component: 'startEventOption',
    },
    {
      key: '2',
      name: '应用',
      component: 'startEventOption',
    },
  ])
  const tabs = {
    startEventOption,
    startEventOption,
  };

</script>