<template>
  <BasicLayout :title="t('连接线属性')" v-if="showPanel">
    <a-tab-pane key="1" :tab="t('基础配置')">
      <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>
    </a-tab-pane>
  </BasicLayout>
</template>

<script setup lang="ts">
  import useStateInfo from '../hooks/useStateInfo';
  import BasicLayout from './../layout/BasicLayout.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useVueFlow } from '@vue-flow/core';
  const { updateEdgeData } = useVueFlow();
  const { showPanel, formInfo } = useStateInfo();
  const { t } = useI18n();
  function updateElementName() {
    updateEdgeData(formInfo.value.id, { ...formInfo.value, label: formInfo.value.label });
  }
</script>

<style scoped></style>
