<template>
  <div v-if="showPanel" class="start-node-panel-box">
    <a-form-item label="节点名称" name="label" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
      <a-input
        v-model:value="formInfo.label"
        :placeholder="t('请填写节点名称')"
        @change="updateElementName"
      />
    </a-form-item>
    <ProcessPanel :treeData="[]" />
  </div>
</template>

<script setup lang="ts">
  import useStateInfo from '../hooks/useStateInfo';
  import { useI18n } from '/@/hooks/web/useI18n';
  import ProcessPanel from './Process.vue';
  const { showPanel, formInfo, updateElementName } = useStateInfo();
  const { t } = useI18n();
</script>

<style scoped>
  .start-node-panel-box {
    padding: 10px;
    width: 100%;
    height: 100%;
  }

  :deep(.ant-input) {
    font-size: 12px;
  }

  :deep(.ant-form-item-label > label) {
    font-size: 12px;
  }
</style>
