<template>
  <BasicLayout :title="t(nodeName + '属性')" 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-form-item
        label="变量与值"
        name="variablesAndValues"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-input v-model:value="formInfo.variablesAndValues" :placeholder="t('请填写变量与值')" />
      </a-form-item>
      <a-form-item
        label="公式内容"
        name="formulaContent"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-textarea
          v-model:value="formInfo.formulaContent"
          :placeholder="t('请输入公式内容')"
          :rows="10"
          :maxlength="100"
        />
      </a-form-item>
      <EventParameters />
      <div style="height: 10px"></div>
      <a-form-item label="备注" name="remark" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-textarea
          v-model:value="formInfo.remark"
          :placeholder="t('请输入备注')"
          :rows="6"
          :maxlength="100"
        />
      </a-form-item>
    </a-tab-pane>
    <a-tab-pane key="2" :tab="t('变量配置')">
      <VariableAssignmentConfigs />
    </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 EventParameters from './components/EventParameters.vue';
  import VariableAssignmentConfigs from './components/VariableAssignmentConfigs.vue';
  const { showPanel, formInfo, nodeName, updateElementName } = useStateInfo();
  const { t } = useI18n();
</script>

<style scoped></style>
