<template>
  <BasicLayout v-if="showPanel">
    <a-tab-pane key="1" :tab="t('基础配置')">
      <a-form-item
        label="模板编码"
        name="code"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-input v-model:value="formProcessInfo.code" :placeholder="t('请填写模板编码')" />
      </a-form-item>
      <a-form-item
        label="模版名称"
        name="label"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-input v-model:value="formProcessInfo.name" :placeholder="t('请填写模版名称')" />
      </a-form-item>
      <a-form-item
        label="模版分类"
        name="label"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-select
          v-model:value="formProcessInfo.itemId"
          :placeholder="t('请选择模板分类')"
          style="width: 100%; font-size: 12px"
          :options="state.itemIdOptions"
          :field-names="{ label: 'name', value: 'id', options: 'children' }"
        />
      </a-form-item>
      <a-form-item label="备注" name="remark" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-textarea v-model:value="formProcessInfo.remark" :rows="8" />
      </a-form-item>
    </a-tab-pane>
    <a-tab-pane key="2" :tab="t('EL表达式')">
      <a-button type="primary" size="small" style="margin: 10px" @click="updateElValue"
        >更新</a-button
      >
      <a-textarea v-model:value="formProcessInfo.elValue" :rows="10" readonly />
    </a-tab-pane>
    <a-tab-pane key="3" :tab="t('变量配置')">
      <ProcessParameters />
    </a-tab-pane>
  </BasicLayout>
</template>

<script setup lang="ts">
  import { useI18n } from '/@/hooks/web/useI18n';
  import { onMounted, reactive, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useRuleProcessStore } from './../store';
  import ProcessParameters from './components/ProcessParameters.vue';
  import { cloneDeep } from 'lodash-es';
  import { RuleProcessTest } from '/@/api/ruleProcess';
  import { useVueFlow } from '@vue-flow/core';
  import BasicLayout from './../layout/BasicLayout.vue';
  const store = useRuleProcessStore();
  const { getCateGorytreeData } = store;
  const { processInfo } = storeToRefs(store);
  const showPanel = ref(false);
  const formProcessInfo = ref();
  const { t } = useI18n();
  const state = reactive({
    itemIdOptions: [] as unknown[] | undefined,
  });

  onMounted(() => {
    formProcessInfo.value = processInfo.value;
    let treeData = getCateGorytreeData();
    if (treeData && Array.isArray(treeData)) {
      let data = [...treeData];
      state.itemIdOptions = cloneDeep(data?.splice(1, data.length - 1));
    }
    showPanel.value = true;
  });

  const { toObject } = useVueFlow();
  async function updateElValue() {
    let json = toObject();
    let res = await RuleProcessTest(json);
    if (res) {
      formProcessInfo.value.elValue = res;
    }
  }
</script>

<style scoped></style>
