<!--自定义活动节点配置面板-->
<template>
  <common-drawer :width="1000" :visible="true" @close="close" :mask="true" :mask-closable="true">
    <template #title>
      <template v-if="titleEdit">
        <a-input
          v-focus
          type="text"
          v-model:value="title"
          @blur="editTitle"
          @keydown.enter="editTitle"
          autofocus="autofocus"
          ref="titleInputRef"
        />
      </template>
      <template v-if="!titleEdit">
        <span style="cursor: pointer" @click="titleClick">{{ title }}</span>
        <span style="padding-left: 5px; cursor: pointer" @click="titleClick"><edit-outlined /></span>
      </template>
    </template>

    <template #footer>
      <a-button type="primary" @click="save" class="border-radius">确定</a-button>
    </template>

    <div class="approve-content" v-if="formData">
      <a-tabs v-model:activeKey="tabsActiveKey">
        <a-tab-pane forceRender key="1" tab="活动配置">
          <CustomActivityConfigForm v-model:nodeActivity="formData.nodeActivity" ref="customActivityConfigFormRef" />
        </a-tab-pane>
        <a-tab-pane forceRender key="2" tab="流程事件">
          <FlowEvent v-model:modelEventList="formData.nodeEventList" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </common-drawer>
</template>

<script setup name="CustomActivityPanel">
import { onMounted, ref } from 'vue';
import loadNodeData from '../../../utils/utils';
import FlowEvent from './form/promoter/flow-event.vue';
import CustomActivityConfigForm from './form/customActivity/custom_activity_config_form.vue';
import { message } from 'ant-design-vue/es';
import { encode, decode } from 'js-base64';
import { deepClone } from '@/utils/common/util';

// 公共方法
const { getNodeData, setNodeData, node } = loadNodeData();

const emits = defineEmits(['close']);

// 节点数据
const nodeData = ref({});

// tabs 选中的key
const tabsActiveKey = ref('1');

// 标题
const title = ref('');
// 标题输入框dom
const titleInputRef = ref(null);
// 是否编辑标题
const titleEdit = ref(false);

// 自定义活动数据
const formData = ref(null);

// ref
const customActivityConfigFormRef = ref();

// 当前节点的数据
const currentNodeData = ref(getNodeData());

/**
 * 修改标题
 */
const editTitle = () => {
  let getGraphNodeData = getNodeData();
  getGraphNodeData.data.nodeName = title.value;

  setNodeData(getGraphNodeData);

  // 关闭标题编辑框
  titleEdit.value = false;
};

// 标题点击
const titleClick = () => {
  titleEdit.value = true;
};

/**
 * 关闭
 */
const close = () => {
  emits('close', false);
};

// 保存
const save = () => {
  customActivityConfigFormRef.value.$refs.formRef
    .validate()
    .then(valid => {
      if (formData.value.nodeActivity.requestParams) {
        formData.value.nodeActivity.requestParams = encode(JSON.stringify(formData.value.nodeActivity.requestParams));
      }
      let saveData = getNodeData();
      saveData.data.nodeData = formData.value;
      setNodeData(saveData);
      close();
    })
    .catch(e => {
      message.warning(e.errorFields[0].errors[0]);
    });
};

onMounted(() => {
  nodeData.value = JSON.parse(node.value.data);

  // 设置弹窗标题
  title.value = nodeData.value.data.nodeName;

  if (JSON.stringify(currentNodeData.value?.data?.nodeData) != '{}') {
    let data = deepClone(currentNodeData.value.data.nodeData);
    if (data.nodeActivity.requestParams && JSON.stringify(data.nodeActivity.requestParams) != '{}') {
      data.nodeActivity.requestParams = JSON.parse(decode(data.nodeActivity.requestParams));
    }
    formData.value = Object.assign({}, data);
  }
});
</script>

<style scoped></style>
