<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>
        <FormItem :label="t('节点备注')">
          <a-textarea v-model:value="formInfo.remark" style="height: 100px" />
        </FormItem>
      </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 } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const { showPanel, formInfo, nodeName } = useStateFormInfo();
  const updateElementName = inject('updateElementName') as any;
</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%;
  }
</style>
