<template>
  <div :class="prefixCls" :style="{ width: `${props.width}px` }">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="流程属性">
        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
      </a-tab-pane>
      <a-tab-pane key="2" tab="发起权限" force-render>
        <auth-config ref="auth"></auth-config>
      </a-tab-pane>
      <a-tab-pane key="3" tab="开始节点">
        <start-event-option ref="start" :element="data.elementData"></start-event-option>
      </a-tab-pane>
      <a-tab-pane key="4" tab="审核节点">
        <user-task-option ref="task"></user-task-option>
      </a-tab-pane>
      <a-tab-pane key="5" tab="结束节点">
        <end-event-option ref="end" :element="data.elementData"></end-event-option>
      </a-tab-pane>
      <a-tab-pane key="6" tab="子流程">
        <subprocess-option ref="subprocess" :element="data.elementData"></subprocess-option>
      </a-tab-pane>
    </a-tabs>
    <!-- <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> -->
  </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 { PageWrapper } from '@/components/Page';
  import { useDesign } from '@/hooks/web/useDesign';
  const { prefixCls } = useDesign('process-property');


  // 流程属性
  import shcemeinfoConfig from './shcemeInfo/index.vue'
  // 发起权限
  import authConfig from './auth/index.vue'
  // 开始节点
  import startEventOption from './startEvent/index.vue'
  // 审核节点
  import userTaskOption from './userTask/index.vue'
  // 结束节点
  import endEventOption from './endEvent/index.vue'
  // 网关和
  import gatewayAndOption from './config/gatewayAnd.vue'
  // 网关包容
  import gatewayInclusiveOption from './config/gatewayInclusive.vue'
  // 网关Xor
  import gatewayXorOption from './config/gatewayXor.vue'
  // 脚本任务
  import scriptTaskOption from './config/scriptTask.vue'
  // 子流程
  import subprocessOption from './subprocess/index.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: 520
    },
    idEditDisabled: {
      type: Boolean,
      default: false
    },
    element: Object
  })
 
  provide('prefix', props.prefix)
  provide('width', props.width)
  const activeKey = ref("6")
  const data = reactive({
    configActiveName: 'tab02',
    currentWfNode: undefined,
    wfNodeName: {
      startEvent: '开始节点',
      endEvent: '结束节点',
      gatewayAnd: '并行网关',
      gatewayInclusive: '包含网关',
      gatewayXor: '排他网关',
      scriptTask: '脚本节点',
      userTask: '审核节点',
      subprocess: '子流程',
      myline: '线条'
    },
    elementData:{}
  })
  watch(
    () => props.element,
    (newVal, oldVal) => {
      data.elementData = newVal
    }
  )
  const achieveList = ref([
    {
      key: '1',
      name: '文章',
      component: 'startEventOption',
    },
    {
      key: '2',
      name: '应用',
      component: 'startEventOption',
    },
  ])
  const tabs = {
    startEventOption,
    startEventOption,
  };

</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-process-property';

  .@{prefix-cls} {
    background-color: @component-background;
  }

  ::v-deep .ant-tabs {
    height: 100%;
    width: 100%;
    padding: 0 20px;

  }

  ::v-deep .ant-tabs-content-holder {
    overflow-y: auto;
  }
</style>