<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>
      <DevOpsConfigs />
    </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 DevOpsConfigs from './components/DevOpsConfigs.vue';
  const { showPanel, formInfo, updateElementName } = useStateInfo();
  const { t } = useI18n();
</script>

<style scoped></style>
