<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="ruleEvent"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-select
          v-model:value="formInfo.ruleEvent"
          :placeholder="t('请填写规则事件')"
          style="width: 100%"
          :options="ruleState.ruleEventList"
          :field-names="{ label: 'name', value: 'id', options: 'children' }"
        />
      </a-form-item>
      <NodeParameters />
      <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 NodeParameters from './components/NodeParameters.vue';
  import VariableAssignmentConfigs from './components/VariableAssignmentConfigs.vue';
  import { reactive, onMounted } from 'vue';
  import { getRuleProcessListEventList } from '/@/api/ruleProcess';
  const { showPanel, formInfo, nodeName, updateElementName } = useStateInfo();
  const { t } = useI18n();
  const ruleState = reactive({ ruleEventList: [] as Array<{ id: string; name: string }> });
  onMounted(async () => {
    let res = await getRuleProcessListEventList();
    if (res && res.length > 0) {
      ruleState.ruleEventList = res.map((ele) => {
        return { name: ele, id: ele };
      });
    }
  });
</script>

<style scoped></style>
