<template>
  <common-drawer :width="800" :visible="true" @close="close" :mask="true" :mask-closable="true" :isShowTab="false">
    <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>

    <!-- 子流程配置 -->
    <sub-workflow-form @close="close"></sub-workflow-form>
  </common-drawer>
</template>

<script setup name="SubWorkFlowEventPanel">
import { onMounted, ref } from 'vue';
import loadNodeData from '../../../utils/utils';
import SubWorkflowForm from './form/subWorkflow/sub_workflow_form.vue';

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

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

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

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

/**
 * 修改标题
 */
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);
};

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

  // 设置弹窗标题
  title.value = nodeData.value.data.nodeName;
});
</script>

<style scoped lang="less">
:deep(.ant-drawer-mask) {
  background-color: rgba(255, 255, 255, 0);
}
</style>
