<template>
  <div v-if="showPanel">
    <div
      class="h-16 pt-23px pl-4"
      style="border-bottom: 1px solid #eee; font-weight: bold; font-size: 16px; color: #333"
      >{{ nodeName }}</div
    >
    <a-tabs :tabBarStyle="{ height: '50px', marginBottom: 0 }">
      <a-tab-pane key="1" :tab="t('基础配置')">
        <FormItem
          :required="formInfo.type !== 'bpmn:SequenceFlow'"
          :label="t('节点名称')"
          class="!mt-4"
        >
          <a-input
            v-model:value="formInfo.name"
            :placeholder="t('请填写节点名称')"
            @change="updateElementName"
          />
        </FormItem>
        <slot name="basic"></slot>
        <FormItem :label="t('节点备注')">
          <a-textarea v-model:value="formInfo.remark" style="height: 100px" />
        </FormItem>
        <slot name="noticePolicy"></slot>
      </a-tab-pane>
      <slot></slot>

      <a-tab-pane key="99" :tab="t('事件监听')">
        <a-tabs class="roundTab" :tabBarStyle="{ height: '50px', marginBottom: '20px' }">
          <a-tab-pane v-for="(item, index) in event" :key="index" :tab="t(item)">
            <EventConfig :eventIndex="index" :event="item" v-model:formInfo="formInfo" />
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
  import useStateFormInfo from '/@bpmn/hooks/useStateFormInfo';
  import FormItem from '/@bpmn/layout/FormItem.vue';
  import { inject, computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import EventConfig from '/@bpmn/components/arguments/EventConfig.vue';
  const { t } = useI18n();
  const { showPanel, formInfo, nodeName } = useStateFormInfo();
  const updateElementName = inject('updateElementName') as any;
  const event = computed(() => {
    return formInfo.value.type === 'bpmn:UserTask'
      ? ['开始事件', '结束事件', '同意事件', '驳回事件', '撤回事件', '超时事件']
      : ['开始事件', '结束事件'];
  });
  // const showEventTab = computed(() => {
  //   let val = false;
  //   if (formInfo.value && formInfo.value.type === 'bpmn:SequenceFlow') {
  //     if (formInfo.value.sourceConfig && formInfo.value.sourceConfig.type) {
  //       val = false;
  //       if (formInfo.value.sourceConfig.type.includes('Gateway')) {
  //         val = true;
  //       }
  //     }
  //   } else {
  //     val = true;
  //   }

  //   return val;
  // });
</script>

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

  :deep(.ant-tabs-content-holder) {
    overflow: auto;
  }

  :deep(.ant-tabs-content) {
    height: 100%;
  }

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

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

  :deep(.ant-form-item) {
    margin-bottom: 10px;
  }

  :deep(.ant-select) {
    width: 100%;
  }

  :deep(.ant-table-cell) {
    padding: 10px !important;
  }

  :deep(.roundTab.ant-tabs) {
    height: 100%;

    .ant-tabs-tab {
      height: 32px;
      border-radius: 16px;
      border: 1px solid #ddd;
      padding: 0 16px;
      margin-left: 16px;

      &.ant-tabs-tab-active {
        border: 1px solid @primary-color;
      }
    }

    .ant-tabs-nav .ant-tabs-nav-wrap {
      align-items: center;
    }

    .ant-tabs-ink-bar {
      display: none;
    }
  }
</style>
