<template>
  <common-drawer :mask="true" :mask-closable="true" :width="900" :visible="true" @close="close">
    <!-- 发起人 -->
    <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="promoter-content" v-if="formData">
      <a-tabs v-model:activeKey="tabsActiveKey">
        <a-tab-pane forceRender key="1" tab="操作权限">
          <FlowOperationPermissions :buttons="operationList" v-model:formData="formData.nodeButtonPermission" />
        </a-tab-pane>
        <a-tab-pane forceRender key="2" tab="表单权限">
          <FlowFormPermissions v-model:formPermission="formData.formPermission" @reset="resetFormPermission" />
        </a-tab-pane>
        <a-tab-pane forceRender key="3" tab="流程事件">
          <FlowEvent v-model:modelEventList="formData.nodeEventList" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </common-drawer>
</template>

<script setup name="PromoterEventPanel">
import { onMounted, ref, computed } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import loadNodeData from '../../../utils/utils';
import FlowEvent from './form/promoter/flow-event.vue';
import { FlowDesignApi } from '../../../../mid/workflow/design/api/FlowDesignApi';
import FlowOperationPermissions from './form/promoter/operation-permissions.vue';
import FlowFormPermissions from './form/promoter/flow-form-permissions.vue';
import { message } from 'ant-design-vue/es';

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

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

// store
const workflowStore = useWorkflowStore();

// 绑定表单列表
const formDefinitionList = computed(() => {
  return workflowStore.flowGlobalConfig.formDefinitionList;
});

// 流程变量列表
const modelVariableList = computed(() => {
  return workflowStore.flowGlobalConfig.modelVariableList;
});

// 节点数据
const nodeData = ref({});
// 标题
const title = ref('');
// 标题输入框dom
const titleInputRef = ref(null);
// 是否编辑标题
const titleEdit = ref(false);

// 当前tab选中
const tabsActiveKey = ref('1');

// 操作列表
const operationList = ref([
  {
    field: 'save',
    buttonName: '保存',
    aliasName: 'saveAliasName',
    content: '发起节点保存操作，审批节点下无保存操作，可在草稿箱查看'
  },
  {
    field: 'submit',
    buttonName: '提交',
    aliasName: 'submitAliasName',
    content: '发起节点填写完申请单，,提交流程到下一步，可在我发起的查看'
  },
  {
    field: 'copyTo',
    buttonName: '抄送',
    aliasName: 'copyToAliasName',
    content: '允许审批人进行抄送'
  },
  {
    field: 'retract',
    buttonName: '撤回',
    aliasName: 'retractAliasName',
    content: '允许申请人对未进入流程（第一个流程节点为待处理状态）的申请进行撤回'
  },
  {
    field: 'cancel',
    buttonName: '撤销',
    aliasName: 'cancelAliasName',
    content: '允许申请人或办理人，将流程直接撤销，撤销后流程变为作废状态'
  },
]);

// 发起人数据
const formData = ref(null);

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

// 事件动作配置列表
const actionClassList = ref([]);

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

  setNodeData(getGraphNodeData);

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

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

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

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

  if (JSON.stringify(currentNodeData.value?.data?.nodeData) != '{}') {
    formData.value = Object.assign({}, currentNodeData.value.data.nodeData);
    if (formData.value.formPermission?.length == 0) {
      getFormPermissionList();
    }
  } else {
    getFormPermissionList();
  }
  getActionClassList();
  setFormPermission();
});

// 获取表单权限列表
const getFormPermissionList = () => {
  if (formDefinitionList.value.length == 0) {
    formData.value.formPermission = [];
  } else if (formDefinitionList.value.find(item => item.formType == 1)) {
    // 应用表单
    let formDefinitionIdList = formDefinitionList.value.filter(item => item.formDefinitionId).map(item => item.formDefinitionId);
    FlowDesignApi.getFormPermissionList({ formDefinitionIdList: formDefinitionIdList }).then(res => {
      formData.value.formPermission = res.data;
    });
  } else if (formDefinitionList.value.find(item => item.formType == 2)) {
    // 自定义开发表单
    let fieldPermissionList =
      modelVariableList.value.map(item => {
        return {
          fieldCode: item.variableCode,
          fieldName: item.variableName,
          edit: false,
          hide: false,
          require: false,
          subTableFieldPermissionList: null
        };
      }) ?? [];

    formData.value.formPermission = [{ formName: formDefinitionList.value[0].formName, fieldPermissionList: fieldPermissionList }];
  }
};

// 设置表单权限是否全选
const setFormPermission = () => {
  if (formData.value.formPermission?.length) {
    formData.value.formPermission.forEach(item => {
      item.edit = item.fieldPermissionList.filter(item => item.edit == undefined || item.edit == false).length == 0 ? true : false;
      item.hide = item.fieldPermissionList.filter(item => item.hide == undefined || item.hide == false).length == 0 ? true : false;
      item.require = item.fieldPermissionList.filter(item => item.require == undefined || item.require == false).length == 0 ? true : false;
    });
  }
};

// 重新导入表单权限
const resetFormPermission = () => {
  getFormPermissionList();
  setFormPermission();
  message.success('更新成功');
};

// 获取事件动作配置列表
const getActionClassList = async () => {
  actionClassList.value = await FlowDesignApi.listEventConsumers();
};

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

// 点击保存
const save = () => {
  let saveData = getNodeData();
  saveData.data.nodeData = formData.value;
  setNodeData(saveData);
  close();
};
</script>

<style scoped lang="less">
:deep(.ant-drawer-body) {
  padding: 15px;
}
.promoter-content {
  width: 100%;
  height: 100%;
}
:deep(.ant-tabs) {
  width: 100%;
  height: 100%;
}
:deep(.ant-tabs-content-holder) {
  overflow-y: auto;
}
</style>
