<template>
  <div>
    <div
      class="h-16 pt-23px pl-4"
      style="border-bottom: 1px solid #eee; font-weight: bold; font-size: 16px; color: #333"
      >{{ t('流程属性') }}</div
    >
    <a-tabs :tabBarStyle="{ height: '50px', marginBottom: '16px' }">
      <a-tab-pane key="1" :tab="t('基础配置')">
        <ProcessBasic :categoryOptions="props.categoryOptions" />
      </a-tab-pane>
      <a-tab-pane key="2" :tab="t('权限设置')">
        <ProcessPermission />
      </a-tab-pane>
      <!-- <a-tab-pane key="3" tab="专项菜单">
        <ProcessMenu />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="4" :tab="t('关联功能')">
        <AssociatedFunctions />
      </a-tab-pane> -->
      <a-tab-pane key="5" :tab="t('超时提醒')">
        <ProcessTimeout />
      </a-tab-pane>
      <a-tab-pane key="6" :tab="t('关联任务')">
        <ProcessRelated />
      </a-tab-pane>
      <a-tab-pane key="7" :tab="t('流程参数')">
        <ProcessParameters />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
  import ProcessBasic from '/@bpmn/panel/process/basic/Index.vue';
  import ProcessPermission from '/@bpmn/panel/process/ProcessPermission.vue';
  // import ProcessMenu from '/@bpmn/panel/process/ProcessMenu.vue';
  // import AssociatedFunctions from '/@bpmn/panel/process/functionForm/Index.vue';
  import ProcessTimeout from '/@bpmn/panel/process/ProcessTimeout.vue';
  import ProcessRelated from '/@bpmn/panel/process/related/Index.vue';
  import ProcessParameters from '/@bpmn/components/parameters/Process.vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const props = defineProps({
    categoryOptions: {
      type: Array as PropType<any>,
    },
  });
</script>

<style scoped>
  :deep(.ant-tabs) {
    height: calc(100% - 64px);
  }

  :deep(.ant-tabs-content-holder) {
    height: calc(100% - 66px);
    overflow: auto;
  }

  :deep(.ant-tabs-top > .ant-tabs-nav::before) {
    border-bottom: 1px solid #ddd;
  }

  :deep(.ant-tabs-tab) {
    margin: 0;
    padding: 0 18px;
  }
</style>
