<template>
    <div>
        <el-drawer
                class="flow-attr-drawer"
                direction="rtl"
                append-to-body
                :size="630"
                v-model="data.attrConfigVisible">
            <template #header="{ close, titleId, titleClass }">
                <el-form label-position="left" class="flow-attr flow-config-attr" label-width="140px">
                    属性配置(注:可双击节点设置)
                    <el-form-item label="同步其他节点配置" style="margin-top: 15px!important;"
                                  v-if="!validateNull(props.currSelect.attributes) && (props.currSelect.attributes.attrs.cdata.type === CommonNodeType.SERIAL
                                  || props.currSelect.attributes.attrs.cdata.type === CommonNodeType.PARALLEL)">
                        <el-select class="input-attr"
                                   v-model="props.currSelect.attributes.attrs.cdata.attrs.syncFlowNodeId"
                                   @change="methods.changeSyncFlowNodeId"
                                   filterable clearable>
                            <el-option
                                    v-for="(item, index) in data.syncFlowNodeIds"
                                    :key="item.id"
                                    :label="item.nodeName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-tooltip placement="top">
                            <template #content>支持一键同步其他节点的配置，避免重复配置</template>
                            <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </template>
            <el-tabs class="flow-attr"
                     v-model="data.activeKey">
                <el-tab-pane name="flow-attr" v-if="data.activeKey === 'flow-attr' || data.activeKey === 'flow-clazz-attr' || data.activeKey === 'flow-http-attr'">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <Tools/>
                            </el-icon>
                            <span style="vertical-align: middle;">基础属性</span>
                        </div>
                    </template>
                    <el-form label-position="left" class="flow-config-attr" label-width="140px">
                        <el-form-item label="关联表单" v-if="!props.currFlowForm">
                            <el-select v-model="props.flowData.attrs.formId"
                                       clearable
                                       filterable
                                       placeholder="可选择关联表单">
                                <el-option
                                        v-for="(item, index) in dicData.formId.filter(f => !f.defFlowId)"
                                        :key="index"
                                        :label="item.formName+' V'+item.version"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-col :span="19" class="mb20">
                            <el-form-item label="已有流程" v-if="!validateRunFlow(props)">
                                <div style="display: flex;">
                                    <el-select v-model="data.defFlowId"
                                               clearable
                                               filterable
                                               placeholder="可选择已有流程">
                                        <el-option
                                                v-for="(item, index) in dicData.defFlows.filter(f => !f.formId)"
                                                :key="index"
                                                :label="item.flowName+' V'+item.version"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary" size="small" round @click="methods.loadExistFlow"
                                               style="margin-left: 10px;">加载模板
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-form-item label="替换节点页面">
                            <el-tooltip content="全局替换所有节点中该旧的页面为新的页面" placement="top">
                                <el-select v-model="data.oldFormId" placeholder="请选择旧的页面" clearable filterable>
                                    <el-option v-for="(item, index) in dicData.formId.filter(f => !f.defFlowId || f.isCurrForm === '1')"
                                               :key="index"
                                               :label="item.formName+' V'+item.version"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-tooltip>
                            <el-select v-model="data.newFormId" v-if="data.oldFormId" placeholder="请选择新的页面" clearable filterable>
                                <el-option v-for="(item, index) in dicData.formId.filter(f => (!f.defFlowId || f.isCurrForm === '1') && f.id !== data.oldFormId)"
                                           :key="index"
                                           :label="item.formName+' V'+item.version"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                            <el-button
                                    type="primary" size="small" round style="margin-left: 10px"
                                    @click="methods.replaceFlowNodeFormId"
                            >确认替换
                            </el-button>
                        </el-form-item>
                        <el-form-item label="当前流程ID">
                            <el-input class="input-attr" v-model="props.flowData.attrs.id" disabled/>
                        </el-form-item>
                        <el-form-item label="流程名称" :rules="{ required: true, message: '流程名称不能为空', trigger: 'blur' }">
                            <el-input class="input-attr" v-model="props.flowData.attrs.flowName" clearable/>
                        </el-form-item>
                        <el-form-item label="流程KEY" :rules="{ required: true, message: '流程KEY不能为空', trigger: 'blur' }">
                            <el-input class="input-attr" v-model="props.flowData.attrs.flowKey" placeholder="一般为工单实体类名称" clearable/>
                        </el-form-item>
                        <el-form-item label="分组名称" :rules="{ required: true, message: '分组名称不能为空', trigger: 'blur' }">
                            <el-select v-model="props.flowData.attrs.groupName"
                                       placeholder="一般与表单分组名称相同"
                                       clearable filterable allowCreate defaultFirstOption>
                                <el-option v-for="(item, index) in dicData.groupName" :key="index" :label="item.groupName"
                                           :value="item.groupName"></el-option>
                            </el-select>

                            <el-button
                                    type="primary" size="small" round style="margin-left: 10px"
                                    @click="methods.handleAddGroupName"
                            >新增分组
                            </el-button>
                        </el-form-item>
                        <el-form-item label="流程备注">
                            <el-input class="input-attr" type="textarea" v-model="props.flowData.attrs.remark"/>
                        </el-form-item>
                        <el-form-item label="流程状态">
                            <el-radio-group v-model="props.flowData.attrs.status" disabled>
                                <el-radio v-for="(item, index) in DIC_PROP.TEMP_STATUS" :key="index" :label="item.value" >
                                    {{ getLabelByLanguage(item) }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
<!--                        <el-form-item label="流程排序">
                            <el-input-number class="input-attr" v-model="props.flowData.attrs.sort"
                                             :min="1"></el-input-number>
                        </el-form-item>-->
                        <el-form-item label="当前流程版本">
                            <el-input-number class="input-attr" v-model="props.flowData.attrs.version" disabled/>
                        </el-form-item>
                        <el-form-item label="发起后配置独立">
                            <el-radio-group v-model="props.flowData.attrs.isIndependent">
                                <el-radio v-for="(item, index) in DIC_PROP.YES_OR_NO" :key="index" :label="item.value" >
                                    {{ getLabelByLanguage(item) }}
                                </el-radio>
                            </el-radio-group>
                            <el-tooltip placement="top" content="表示每个发起后的流程实例是否有单独的配置数据，即是否不受流程模板配置再次修改的影响">
                                <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane name="flow-clazz-attr" v-if="data.activeKey === 'flow-attr' || data.activeKey === 'flow-clazz-attr' || data.activeKey === 'flow-http-attr'">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <Operation/>
                            </el-icon>
                            <span style="vertical-align: middle;">全局监听事件</span>
                        </div>
                    </template>
                    <flow-clazz :currSelect="props.currSelect" :flowData="props.flowData" :clazzPlaceholder="'SpringBean名称：GlobalFlowListener实现类'"
                                :currFlowForm="props.currFlowForm" :flowMethods="DIC_PROP.FLOW_METHODS" :addType="'1'"></flow-clazz>
                </el-tab-pane>

                <el-tab-pane name="flow-http-attr" v-if="data.activeKey === 'flow-attr' || data.activeKey === 'flow-clazz-attr' || data.activeKey === 'flow-http-attr'">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <Operation/>
                            </el-icon>
                            <span style="vertical-align: middle;">关联表单Http接口</span>
                        </div>
                    </template>
                    <flow-form-http :flowData="props.flowData" :currFlowForm="props.currFlowForm" :attrConfigVisible="data.attrConfigVisible"></flow-form-http>
                </el-tab-pane>

                <el-tab-pane name="node-attr" v-if="!validateNull(props.currSelect.attributes) && (data.activeKey === 'node-attr' || data.activeKey === 'node-clazz-attr' || data.activeKey === 'node-job-attr' || data.activeKey === 'form-attr')
    && props.currSelect.attributes.attrs.cdata.type !== HighNodeType.JOB">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <Operation/>
                            </el-icon>
                            <span style="vertical-align: middle;">节点属性</span>
                        </div>
                    </template>
                    <el-form label-position="left" class="flow-config-attr" label-width="160px"
                             v-if="props.currSelect.attributes.attrs.cdata.type && props.currSelect.attributes.attrs.cdata.type !== CommonNodeType.LINK
               && props.currSelect.attributes.attrs.cdata.type !== HighNodeType.JOB">
                        <el-form-item :label="'节点类型' + (methods.canChangeFlowNodeName() ? '(可修改)' : '')">
                            <el-select class="input-attr" v-if="methods.canChangeFlowNodeName()"
                                       @change="methods.changeFlowNodeName"
                                       v-model="props.currSelect.attributes.attrs.cdata.type">
                                <el-option
                                        v-for="(item, index) in props.currSelect.attributes.attrs.cdata.attrs.isGateway === '1' ? highNodes.slice(2, 4) : commonNodes.slice(1, 3) "
                                        :key="index"
                                        :label="item.nodeName"
                                        :value="item.type">
                                </el-option>
                            </el-select>

                            <el-tag v-else>{{ methods.nodeLabel(props.currSelect) }}</el-tag>
                        </el-form-item>
                        <el-form-item label="节点ID">
                            <el-input class="input-attr" v-model="props.currSelect.id" disabled/>
                        </el-form-item>
                        <el-form-item label="节点名称">
                            <el-input class="input-attr" placeholder="请输入节点名称" clearable
                                      v-if="props.currSelect.attributes.attrs.cdata.type === CommonNodeType.START || props.currSelect.attributes.attrs.cdata.type === CommonNodeType.END"
                                      v-model="props.currSelect.attributes.attrs.label.text"
                                      @change="methods.handleNodeOrJobName"/>
                            <el-input v-else  class="input-attr" placeholder="请输入节点名称" v-model="data.nodeOrJobName" clearable
                                      @change="methods.handleNodeOrJobName"/>
                        </el-form-item>

                        <el-form-item label="节点路由(自动跳转)">
                            <el-tooltip content="可根据接口返回值 或 表单数据的字段值，配置对应的路由动作（可自定义随意扩展）" placement="top">
                                <el-input class="input-attr" v-if="props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName"
                                          placeholder="请点击 ( 路由规则 ) 按钮"
                                          v-model="props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName"
                                          readonly clearable>
                                    <template #suffix>
                                        <el-icon class="el-input__icon" @click="methods.clearRouteKeyValName"><Delete /></el-icon>
                                    </template>
                                </el-input>

                                <el-input v-if="!props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName"
                                          placeholder="请点击 ( 路由规则 ) 按钮"
                                          v-model="props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal"
                                          class="input-attr" readonly clearable>
                                    <template #suffix>
                                        <el-icon v-if="props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal"
                                                 class="el-input__icon" @click="methods.clearRouteKeyValName"><Delete /></el-icon>
                                    </template>
                                </el-input>
                            </el-tooltip>

                            <el-tooltip content="点击可选择更多节点路由的方式" placement="bottom">
                                <el-button
                                        type="primary" size="small" round style="margin-left: 10px"
                                        @click="methods.openFlowRoutes(true)"
                                >路由规则
                                </el-button>
                            </el-tooltip>
                        </el-form-item>

                        <template v-if="props.currSelect.attributes.attrs.cdata.defJob">
                            <template v-if="props.currSelect.attributes.attrs.cdata.type === CommonNodeType.SERIAL || props.currSelect.attributes.attrs.cdata.type === CommonNodeType.PARALLEL">
                                <el-form-item label="多节点审批方式">
                                    <el-tooltip placement="top" content="当下一步同时流转多个节点时，可设置这多个节点的审批方式">
                                        <el-select class="input-attr"
                                                   v-model="props.currSelect.attributes.attrs.cdata.attrs.nodeApproveMethod">
                                            <el-option
                                                    v-for="(item, index) in DIC_PROP.NODE_APPROVE_METHOD"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-tooltip>

                                    <el-tooltip placement="top" content="当选择依次审批时，审批顺序由节点的排序值决定">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>

                                <el-form-item label="多人审批方式">
                                    <el-tooltip placement="top" content="当前节点若存在多个参与者时，可设置这多个参与者的审批方式">
                                        <el-select class="input-attr"
                                                   v-model="props.currSelect.attributes.attrs.cdata.attrs.approveMethod">
                                            <el-option
                                                    v-for="(item, index) in DIC_PROP.APPROVE_METHOD"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-tooltip>

                                    <el-tooltip placement="top" content="当选择依次审批时，审批顺序由任务的排序值决定">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="票签完成比率%" v-if="props.currSelect.attributes.attrs.cdata.attrs.approveMethod === DIC_PROP.APPROVE_METHOD[3].value">
                                    <el-input-number class="input-attr" :min="1" :max="100"
                                                     v-model="props.currSelect.attributes.attrs.cdata.attrs.ticketCompRate"></el-input-number>
                                </el-form-item>
                            </template>

                            <template v-if="methods.validateNode(props.currSelect) && props.currSelect.attributes.attrs.cdata.type !== HighNodeType.VIRTUAL">
                                <el-form-item label="审批时的按钮">
                                    <el-select class="input-attr" collapse-tags collapse-tags-tooltip
                                               v-model="props.currSelect.attributes.attrs.cdata.attrs.jobBtns"
                                               multiple clearable filterable placeholder="审批时的按钮，若为空则默认审批按钮">
                                        <template v-for="(item, index) in DIC_PROP.JOB_BTNS"  :key="index">
                                            <el-option :label="item.label"
                                                       :value="item.value">
                                            </el-option>
                                        </template>
                                    </el-select>
                                    <el-tooltip placement="top" content="审批时的按钮，默认显示所有审批按钮">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>
                            </template>
                        </template>

                        <el-divider v-if="!data.moreNode">
                            <el-button type="primary" link @click="methods.showMoreSetting('1')"
                                       style="margin-left: 10px; font-size: 14px">
                                {{ data.moreNode ? '隐藏更多' : '更多配置' }}
                            </el-button>
                        </el-divider>

                        <template v-if="data.moreNode">
                            <template v-if="methods.validateNode(props.currSelect)">
                                <template v-if="props.currSelect.attributes.attrs.cdata.defJob">
                                    <el-form-item label="PC待办页面">
                                        <el-select class="input-attr" collapse-tags collapse-tags-tooltip
                                                   v-model="props.currSelect.attributes.attrs.cdata.attrs.pcTodoUrl"
                                                   multiple clearable filterable placeholder="请选择PC待办页面">
                                            <el-option v-for="(item, index) in dicData.formId.filter(f => !f.defFlowId || f.isCurrForm === '1')"
                                                       :key="index"
                                                       :label="item.formName+' V'+item.version"
                                                       :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <el-tooltip placement="top">
                                            <template #content>1、可以是当前设计的主表单（默认全部可编辑），或者其他表单，或者系统表单。若下拉选项没有期望选择的表单，则可先去【表单设计】新增
                                            <br /> 2、若此属性值为空则默认为当前设计的主表单、查看审批过程、查看流程图</template>
                                            <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                        </el-tooltip>
                                    </el-form-item>
                                </template>
                                <el-form-item label="节点关联子流程" v-if="props.currSelect.attributes.attrs.cdata.type !== HighNodeType.VIRTUAL">
                                    <el-select class="input-attr" @change="methods.handleSubDefFlowId"
                                               filterable
                                               v-model="props.currSelect.attributes.attrs.cdata.attrs.subDefFlowId"
                                               clearable>
                                        <el-option
                                                v-for="(item, index) in dicData.subDefFlows"
                                                :key="index"
                                                :label="item.flowName+' V'+item.version"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <el-tooltip placement="top">
                                        <template #content>当前节点审批完成时, 会自动发起子流程实例暂停父流程当前分支, 待子流程完成后重启父流程当前分支</template>
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>

                                    <el-tooltip content="父子流程传参与回参默认为空" placement="bottom">
                                        <el-button
                                                type="primary" size="small" round style="margin-left: 10px"
                                                @click="methods.openFlowSubParams(true)"
                                        >参数
                                        </el-button>
                                    </el-tooltip>
                                </el-form-item>

                                <el-form-item label="子流程多版本选择" v-if="props.currSelect.attributes.attrs.cdata.attrs.subDefFlowId">
                                    <el-switch
                                            v-model="props.currSelect.attributes.attrs.cdata.attrs.subFlowVersion"
                                            active-value="1"
                                            inactive-value="0"
                                            inactive-text="按最新版本发起"
                                            active-text="按绑定版本发起"
                                            >
                                    </el-switch>
                                </el-form-item>

                                <el-form-item label="审批结果通知他人">
                                    <el-tooltip content="请输入用户名称进行模糊搜索" placement="top">
                                        <el-select class="input-attr"
                                                   v-model="props.currSelect.attributes.attrs.cdata.attrs.carbonCopy"
                                                   multiple clearable filterable
                                                   remote :remote-method="remoteMethod" :reserve-keyword="false">
                                            <template v-for="(item, index) in dicData.carbonCopy"  :key="index">
                                                <el-option :label="item.name"
                                                           :value="item.userId">
                                                </el-option>
                                            </template>
                                        </el-select>
                                    </el-tooltip>
                                    <el-tooltip placement="top" content="当前节点审批完成时，将审批结果通知给他人">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>
                            </template>

                            <template v-if="props.currSelect.attributes.attrs.cdata.type === HighNodeType.VIRTUAL">
                                <el-form-item label="被驳回后再次提交时">
                                    <el-switch disabled
                                               v-model="props.currSelect.attributes.attrs.cdata.attrs.rejectType"
                                               active-value="1"
                                               inactive-value="0"
                                               inactive-text="依次返回"
                                               active-text="直接返回">
                                    </el-switch>
                                    <el-tooltip placement="top" content="表示被驳回后的节点再次审批时，需要再次经历途中节点【依次返回】到原驳回的节点，还是【直接返回】到原驳回的节点">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>
                            </template>

                            <template v-if="props.currSelect.attributes.attrs.cdata.defJob">
                                <template v-if="props.currSelect.attributes.attrs.cdata.type === CommonNodeType.START ||
                        props.currSelect.attributes.attrs.cdata.type === CommonNodeType.SERIAL || props.currSelect.attributes.attrs.cdata.type === CommonNodeType.PARALLEL">
                                    <el-form-item label="被驳回后再次提交时">
                                        <el-switch
                                                v-model="props.currSelect.attributes.attrs.cdata.attrs.rejectType"
                                                active-value="1"
                                                inactive-value="0"
                                                inactive-text="依次返回"
                                                active-text="直接返回">
                                        </el-switch>
                                        <el-tooltip placement="top" content="表示被驳回后的节点再次审批时，需要再次经历途中节点【依次返回】到原驳回的节点，还是【直接返回】到原驳回的节点">
                                            <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                        </el-tooltip>
                                    </el-form-item>
                                </template>
                            </template>
                            <template v-if="props.currSelect.attributes.attrs.cdata.type === CommonNodeType.SERIAL || props.currSelect.attributes.attrs.cdata.type === CommonNodeType.PARALLEL">
                                <el-form-item label="当流程条件不满足时">
                                    <el-switch
                                            v-model="props.currSelect.attributes.attrs.cdata.attrs.isContinue"
                                            active-value="1"
                                            inactive-value="0"
                                            inactive-text="不允许通过"
                                            active-text="继续下一节点">
                                    </el-switch>
                                    <el-tooltip placement="top" content="是否继续下一节点表示，如果继续则当下一节点条件不满足时，会自动继续找下下一节点，以此类推">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>
                                <template v-if="props.currSelect.attributes.attrs.cdata.defJob">
                                    <el-form-item label="相同审批人自动通过">
                                        <el-switch
                                                v-model="props.currSelect.attributes.attrs.cdata.attrs.isPassSame"
                                                active-value="1"
                                                inactive-value="0"
                                                inactive-text="否"
                                                active-text="是">
                                        </el-switch>
                                    </el-form-item>
                                    <el-form-item label="是否自动审批">
                                        <el-switch
                                                v-model="props.currSelect.attributes.attrs.cdata.attrs.isAutoAudit"
                                                active-value="1"
                                                inactive-value="0"
                                                inactive-text="否"
                                                active-text="是"
                                                @change="methods.hideJobFormPerms">
                                        </el-switch>
                                    </el-form-item>
                                    <el-form-item label="自动流转下一节点">
                                        <el-tooltip placement="top" content="当选择否时，该节点之后的节点需自行去开启">
                                            <el-switch
                                                    v-model="props.currSelect.attributes.attrs.cdata.attrs.isAutoNext"
                                                    active-value="1"
                                                    inactive-value="0"
                                                    inactive-text="否"
                                                    active-text="是">
                                            </el-switch>
                                        </el-tooltip>
                                    </el-form-item>
                                </template>
                            </template>

                            <template v-if="props.currSelect.attributes.attrs.cdata.type === CommonNodeType.END">
                                <el-form-item label="是否自动结束">
                                    <el-switch
                                            v-model="props.currSelect.attributes.attrs.cdata.attrs.isAutoAudit"
                                            active-value="1"
                                            inactive-value="0"
                                            inactive-text="否"
                                            active-text="是"
                                            @change="methods.hideJobFormPerms">
                                    </el-switch>
                                </el-form-item>
                            </template>

                            <template v-if="props.currSelect.attributes.attrs.cdata.type === HighNodeType.CHILD_FLOW">
                                <el-form-item label="子流程KEY">
                                    <el-input class="input-attr" placeholder="请输入子流程KEY"
                                              v-model="props.currSelect.attributes.attrs.cdata.attrs.childFlowKey"/>
                                </el-form-item>
                            </template>
                            <template
                                    v-if="props.currSelect.attributes.attrs.cdata.type === LaneNodeType.X_LANE || props.currSelect.attributes.attrs.cdata.type === LaneNodeType.Y_LANE">

                            </template>

                            <template v-if="methods.validateNode(props.currSelect) && props.currSelect.attributes.attrs.cdata.defJob">
                                <el-form-item label="节点描述" v-if="props.currSelect.attributes.ports">
                                    <el-input class="input-attr" placeholder="请输入节点描述" type="textarea"
                                              v-model="props.currSelect.attributes.attrs.cdata.attrs.description"
                                              @change="methods.handleNodeDescription"/>
                                </el-form-item>

                                <el-form-item label="节点时限(分钟)">
                                    <el-tooltip placement="top" content="注：节点时限指多个任务的总时限。单个任务时限在任务属性中设置">
                                        <el-input-number class="input-attr"
                                                         v-model="props.currSelect.attributes.attrs.cdata.attrs.timeout"
                                                         placeholder="小于0则不限制"></el-input-number>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="节点审批顺序">
                                    <el-tooltip placement="top" content="当【多节点审批方式】为依次审批时，审批顺序由节点的排序值决定">
                                        <el-input-number class="input-attr"
                                                         v-model="props.currSelect.attributes.attrs.cdata.attrs.sort"
                                                         :min="1"></el-input-number>
                                    </el-tooltip>
                                </el-form-item>
                            </template>

                        </template>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane name="node-job-attr"
                             v-if="!validateNull(props.currSelect.attributes) && methods.validateNodeJob(props.currSelect) && !data.hideJobFormPerm">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <User/>
                            </el-icon>
                            <span v-if="!validateNull(props.currSelect.attributes) && props.currSelect.attributes.attrs.cdata.type === HighNodeType.JOB" style="vertical-align: middle;">任务属性</span>
                            <span v-if="!validateNull(props.currSelect.attributes) && props.currSelect.attributes.attrs.cdata.type !== HighNodeType.JOB" style="vertical-align: middle;">默认任务属性</span>
                        </div>
                    </template>
                    <el-form label-position="left" class="flow-config-attr" label-width="170px" v-if="methods.validateNodeJob(props.currSelect)">

                        <div v-if="props.currSelect.attributes.attrs.cdata.type !== HighNodeType.JOB"
                             style="margin: 5px 20px"><span
                                style="color: red;font-size: 14px">注:当前节点没有单独配置【节点任务】时, 作为节点的默认任务属性配置</span>
                        </div>

                        <div v-else-if="props.currSelect.attributes.attrs.cdata.type === HighNodeType.JOB"
                             style="margin: 5px 20px"><span
                                style="color: red;font-size: 14px">注:当前节点单独配置【节点任务】时, 则节点上配置的默认任务属性失效</span>
                        </div>

                        <el-divider> 参与者设置说明 </el-divider>

                        <div style="margin: 5px 20px">
                                1、【参与者】指公司组织结构中的人员、角色、岗位、部门等等 ( 扩展非常简单 )
                                    <br />2、【固定参与者】、【参与者取值来源】、【参与者KEY】即代码中指定参与者
                        </div>
                        <el-divider>
                        </el-divider>

                        <el-form-item label="任务名称">
                            <el-input class="input-attr" placeholder="请输入任务名称" clearable
                                      v-model="props.currSelect.attributes.attrs.cdata.defJob.jobName"
                                      @change="methods.handleDefaultJobName"/>
                        </el-form-item>
                        <el-form-item label="固定参与者(可多选)">
                            <el-tooltip content="当节点属性【多人审批方式】为依次审批时，审批顺序由选择的顺序决定" placement="bottom">
                                <el-button round size="small" type="primary" @click="methods.onUserRolePicker">
                                    {{methods.validateNullRoleUserId() ? '选择参与者' : '重选'}}
                                </el-button>
                            </el-tooltip>

                            <el-button style="margin-right: 10px" round size="small" type="primary" @click="methods.clearRoleUserIdValType(true)"
                                       v-if="!methods.validateNullRoleUserId()">
                                删除
                            </el-button>

                            <convert-role-name :value="props.currSelect.attributes.attrs.cdata.defJob.roleUserId" :isJobType="'1'"
                                               :options="{users: dicData.users, roles: dicData.roles, posts: dicData.posts, depts: dicData.depts }"
                                          v-if="!methods.validateNullRoleUserId()"></convert-role-name>
                        </el-form-item>
                        <el-form-item label="参与者取值来源">
                            <el-input class="input-attr" v-if="props.currSelect.attributes.attrs.cdata.defJob.userKeyValName"
                                      placeholder="请点击 ( 人员规则 ) 按钮"
                                      v-model="props.currSelect.attributes.attrs.cdata.defJob.userKeyValName"
                                      readonly clearable>
                                <template #suffix>
                                    <el-icon class="el-input__icon" @click="methods.clearUserKeyValName"><Delete /></el-icon>
                                </template>
                            </el-input>

                            <el-input v-if="!props.currSelect.attributes.attrs.cdata.defJob.userKeyValName"
                                      placeholder="请点击 ( 人员规则 ) 按钮"
                                      v-model="props.currSelect.attributes.attrs.cdata.defJob.userKeyVal"
                                      class="input-attr" readonly clearable>
                                <template #suffix>
                                    <el-icon v-if="props.currSelect.attributes.attrs.cdata.defJob.userKeyVal"
                                             class="el-input__icon" @click="methods.clearUserKeyValName"><Delete /></el-icon>
                                </template>
                            </el-input>
                            <el-tooltip content="点击可选择更多分配参与者的方式" placement="bottom">
                                <el-button
                                        type="primary" size="small" round style="margin-left: 10px"
                                        @click="methods.openFlowMethods(true)"
                                >人员规则
                                </el-button>
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item label="参与者KEY">
                            <el-select class="input-attr"
                                       v-model="props.currSelect.attributes.attrs.cdata.defJob.userKey"
                                       filterable clearable @change="methods.validateUserKeyChange">
                                <el-option
                                        v-for="(item, index) in dicData.userKeys"
                                        :key="item.userKey"
                                        :label="item.userKey"
                                        :value="item.userKey">
                                </el-option>
                            </el-select>

                            <el-button
                                    type="primary" size="small" round style="margin-left: 10px"
                                    @click="methods.handleAddUserKey"
                            >新增
                            </el-button>

                            <el-tooltip placement="top">
                                <template #content>可作为某个【节点任务】或【节点任务的参与者】标识，若作为【参与者】标识时需后端代码中指定参与者。KEY需含下划线 </template>
                                <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                            </el-tooltip>
                        </el-form-item>

                        <el-divider v-if="!data.moreJob">
                            <el-button type="primary" link @click="methods.showMoreSetting('2')"
                                       style="font-size: 14px">
                                {{ data.moreJob ? '隐藏更多' : '更多配置' }}
                            </el-button>
                        </el-divider>

                        <template v-if="data.moreJob">
                            <el-form-item label="任务类型">
                                <el-select class="input-attr"
                                           v-model="props.currSelect.attributes.attrs.cdata.defJob.belongType" clearable>
                                    <el-option
                                            v-for="(item, index) in DIC_PROP.BELONG_TYPE"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-tooltip placement="top">
                                    <template #content>抄送任务需要参与者审批，传阅任务不需要参与者审批只参与阅览</template>
                                    <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item label="待分配参与者节点">
                                <el-select class="input-attr"
                                           v-model="props.currSelect.attributes.attrs.cdata.defJob.distFlowNodeId"
                                           filterable clearable>
                                    <el-option
                                            v-for="(item, index) in data.flowNodeIds"
                                            :key="item.id"
                                            :label="item.nodeName"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-tooltip placement="top">
                                    <template #content>在当前节点为其他【待分配参与者节点】通过前端《分配参与者》页面分配参与者时配置( 可选配置 )</template>
                                    <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item label="被分配后立即运行">
                                <el-switch
                                        v-model="props.currSelect.attributes.attrs.cdata.defJob.isNowRun"
                                        active-value="1"
                                        inactive-value="0"
                                        inactive-text="否"
                                        active-text="是">
                                </el-switch>
                                <el-tooltip content="一般与【待分配参与者节点】同时配置，表示待分配参与者节点被分配参与者时，待分配参与者节点的任务是 ( 立即运行 ) 还是 ( 等引擎流转到时才运行 ) " placement="top">
                                    <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                </el-tooltip>
                            </el-form-item>
                            <template v-if="props.currSelect.attributes.attrs.cdata.type !== HighNodeType.VIRTUAL">
                                <el-form-item label="被驳回是否可跳过">
                                    <el-switch
                                            v-model="props.currSelect.attributes.attrs.cdata.defJob.isSkipRejected"
                                            active-value="1"
                                            inactive-value="0"
                                            inactive-text="否"
                                            active-text="是">
                                    </el-switch>
                                    <el-tooltip content="如果选择是，则表示被驳回后不会开启这个任务" placement="top">
                                        <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                    </el-tooltip>
                                </el-form-item>
                            </template>
                            <el-form-item label="任务时限(分钟)">
                                <el-input-number class="input-attr"
                                                 v-model="props.currSelect.attributes.attrs.cdata.defJob.timeout"
                                                 placeholder="小于0则不限制"></el-input-number>
                            </el-form-item>
                            <el-form-item label="任务审批顺序">
                                <el-tooltip placement="top" content="当【多人审批方式】为依次审批时，审批顺序由任务的排序值决定">
                                    <el-input-number class="input-attr"
                                                     v-model="props.currSelect.attributes.attrs.cdata.defJob.sort"
                                                     :min="1"></el-input-number>
                                </el-tooltip>
                            </el-form-item>

                        </template>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane name="link-attr" v-if="!validateNull(props.currSelect.attributes) && data.activeKey === 'link-attr'">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <Share/>
                            </el-icon>
                            <span style="vertical-align: middle;">连线条件</span>
                        </div>
                    </template>
                    <template v-if="props.currSelect.attributes.attrs.cdata.type === CommonNodeType.LINK">
                        <el-form label-position="left" class="flow-config-attr" label-width="150px">
                            <el-form-item label="同步其他连线配置">
                                <el-select class="input-attr"
                                           v-model="props.currSelect.attributes.attrs.cdata.attrs.syncFlowNodeRelId"
                                           @change="methods.changeSyncFlowNodeRelId"
                                           filterable clearable>
                                    <el-option
                                            v-for="(item, index) in data.syncFlowNodeRelIds"
                                            :key="item.id"
                                            :label="item.linkName"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-tooltip placement="top">
                                    <template #content>支持一键同步其他连线的配置，避免重复配置</template>
                                    <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item label="连线ID">
                                <el-input class="input-attr" v-model="props.currSelect.id" disabled/>
                            </el-form-item>
                            <el-form-item label="源节点" style="display: none">
                                <el-input class="input-attr" v-model="props.currSelect.attributes.source.id" disabled/>
                            </el-form-item>
                            <el-form-item label="目标节点" style="display: none">
                                <el-input class="input-attr" v-model="props.currSelect.attributes.target.id" disabled/>
                            </el-form-item>
                            <el-form-item label="连线名称">
                                <el-input class="input-attr"
                                          v-model="props.currSelect.attributes.labels[0].attrs.text.text"
                                          @change="methods.linkLabelChange"/>
                            </el-form-item>
                            <flow-con-rule :currSelect="props.currSelect" :currFlowForm="props.currFlowForm" :flowData="props.flowData"
                                           @hideAttrConfig="methods.hideAttrConfig" :attrConfigVisible="data.attrConfigVisible"></flow-con-rule>
                        </el-form>
                    </template>
                </el-tab-pane>
                <el-tab-pane name="form-attr" v-if="methods.validateNode(props.currSelect) && !data.hideJobFormPerm">
                    <template #label>
                        <div>

                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <View/>
                            </el-icon>
                            <span style="vertical-align: middle;">表单权限配置</span>
                        </div>
                    </template>
                    <flow-form-perm ref="flowFormPerm" :flowData="props.flowData" :formIds="dicData.formId" :currFlowForm="props.currFlowForm" :currSelect="props.currSelect">
                    </flow-form-perm>
                </el-tab-pane>

                <el-tab-pane name="node-clazz-attr" v-if="!validateNull(props.currSelect.attributes) && (data.activeKey === 'node-attr' || data.activeKey === 'node-clazz-attr' || data.activeKey === 'node-job-attr' || data.activeKey === 'form-attr')
    && props.currSelect.attributes.attrs.cdata.type !== HighNodeType.JOB && props.currSelect.attributes.attrs.cdata.type !== LaneNodeType.X_LANE && props.currSelect.attributes.attrs.cdata.type !== LaneNodeType.Y_LANE">
                    <template #label>
                        <div>
                            <el-icon style="vertical-align: middle;margin-right: 3px">
                                <Operation/>
                            </el-icon>
                            <span style="vertical-align: middle;">节点监听事件</span>
                        </div>
                    </template>
                    <flow-clazz :currSelect="props.currSelect" :flowData="props.flowData" :clazzPlaceholder="'SpringBean名称：NodeJobListener实现类'"
                                :currFlowForm="props.currFlowForm" :flowMethods="DIC_PROP.NODE_METHODS" :addType="'0'"></flow-clazz>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>

        <user-role-picker ref="userRolePicker" :isOnlyOne="data.isOnlyOne" @onSelectItems="methods.onSelectItems">
        </user-role-picker>

        <el-drawer
                class="flow-attr-drawer"
                title="参与者取值来源"
                direction="rtl"
                append-to-body
                :size="630" v-if="data.flowMethodVisible"
                v-model="data.flowMethodVisible" @closed="methods.clearRoleUserIdValType(false)">
            <flow-method ref="flowMethod" :currFlowForm="props.currFlowForm" :currSelect="props.currSelect" :flowData="props.flowData"
                         @openFlowMethods="methods.openFlowMethods"></flow-method>
        </el-drawer>

        <el-drawer
                class="flow-attr-drawer"
                title="节点路由规则"
                direction="rtl"
                append-to-body
                :size="630" v-if="data.nodeRouteVisible"
                v-model="data.nodeRouteVisible">
            <flow-node-route ref="flowRoute" :currFlowForm="props.currFlowForm" :currSelect="props.currSelect" :flowData="props.flowData"
                         @openFlowRoutes="methods.openFlowRoutes"></flow-node-route>
        </el-drawer>

        <el-drawer
                class="flow-attr-drawer"
                title="父子流程传参与回参"
                direction="rtl"
                append-to-body
                :size="630" v-if="data.flowSubParamVisible"
                v-model="data.flowSubParamVisible">
            <flow-sub-param ref="flowSubParam" :currFlowForm="props.currFlowForm" :currSelect="props.currSelect"
                            :flowData="props.flowData"></flow-sub-param>
        </el-drawer>
    </div>
</template>

<script setup lang="ts" name="FlowAttr">
    import {CommonNodeType, HighNodeType, LaneNodeType} from '../config/type'
    import {useI18n} from "vue-i18n";
    import {useMessage, useMessageBox} from "/@/hooks/message";
    import {validateNull} from "/@/utils/validate";
    import {
        onFormLoadedUrl,
        onLoadDicUrl,
        onUpdateDicData,
        remoteMethodByKey
    } from "/@/flow/components/convert-name/convert";
    import {DIC_PROP} from "/@/flow/support/dict-prop";
    import {PROP_CONST} from "/@/flow/support/prop-const";
    import {setPropsDataValue} from "../../support/common";
    import {
        changeSyncFlowNodeId, changeSyncFlowNodeRelId,
        handleSyncFlowNodeIds,
        handleSyncFlowNodeRelIds,
        revParseUserKeyValName,
        validateNodeType
    } from "./index";
    import {confirmCancelAndClose, replaceFlowNodeFormId} from "../../utils";
    import {validateRunFlowId} from "../../index";
    import {commonNodes, highNodes, laneNodes} from "../config/menu-config";
    import * as orderVue from "/@/api/order/order-key-vue";
    import {deepClone} from "/@/utils/other";

    const { proxy } = getCurrentInstance();
    // 引入组件
    const UserRolePicker = defineAsyncComponent(() => import('../../components/user-role/picker.vue'));
    const FlowMethod = defineAsyncComponent(() => import('./flow-method.vue'));
    const FlowNodeRoute = defineAsyncComponent(() => import('./flow-node-route.vue'));
    const FlowSubParam = defineAsyncComponent(() => import('./flow-sub-param.vue'));
    const FlowFormPerm = defineAsyncComponent(() => import('./flow-form-perm.vue'));
    const FlowClazz = defineAsyncComponent(() => import('./flow-clazz.vue'));
    const FlowConRule = defineAsyncComponent(() => import('./flow-con-rule.vue'));
    const FlowFormHttp = defineAsyncComponent(() => import('./flow-form-http.vue'));

    const {t} = useI18n();
    const $message = useMessage();
    const $emit = defineEmits(["initFlow", "showAttrConfig"]);
    const props = defineProps({
        currFlowForm: {
            type: Object,
            default: null,
        },
        flowData: {
            type: Object,
            default: null,
        },
        currSelect: {
            type: Object,
            default: {},
        }
    });
    const data = reactive({
        activeKey: 'flow-attr',
        attrConfigVisible: false,
        nodeRouteVisible: false,
        flowMethodVisible: false,
        flowSubParamVisible: false,
        hideJobFormPerm: false,
        defFlowId: null,
        nodeOrJobName: null,
        moreNode: false,
        moreJob: false,
        isOnlyOne: false,
        syncFlowNodeIds: [],
        syncFlowNodeRelIds: [],
        flowNodeIds: [],
        oldFormId: null,
        newFormId: null,
    })

    // 定义字典
    const dicData = reactive({});
    const onLoad = onLoadDicUrl({key: "defFlows"}, {key: "userKeys"}, {key: "formId"}, {prefix: "defFlow", key: "groupName"});
    const onFormLoaded = onFormLoadedUrl(...PROP_CONST.LOAD_USER_ROLE);
    const onUpdate = onUpdateDicData({key: "userKeys"}, {key: "groupName"});
    onMounted(async () => {
        await onLoad(dicData);

        methods.changeTabPane(props.currSelect)
    })

    function remoteMethod(query: string) {
        remoteMethodByKey(query, onLoad, dicData, 'userName', "carbonCopy")
    }

    const methods = {
        hideAttrConfig(bool, type) {
            $emit("showAttrConfig", bool, type);
        },
        validateCurrSelectAttrs(currSelect?) {
            if (!currSelect) currSelect = props.currSelect;
            if (validateNull(currSelect.attributes)) return false
            return true
        },
        validateCurrSelectAttrsAttrs(currSelect?) {
            if (!currSelect) currSelect = props.currSelect;
            if (validateNull(currSelect.attributes)) return false
            if (validateNull(currSelect.attributes.attrs.cdata.attrs)) return false
            return true
        },
        validateCurrSelectDefJob(currSelect?) {
            if (!currSelect) currSelect = props.currSelect;
            if (validateNull(currSelect.attributes)) return false
            if (validateNull(currSelect.attributes.attrs.cdata.defJob)) return false
            return true
        },
        handleAddUserKey() {
            useMessageBox().prompt("请输入新的参与者KEY")
                .then(({ value }) => {
                    let validate = methods.validateUserKeyChange(value);
                    if (!validate) return
                    onUpdate(dicData, {userKeys: value}, 'userKey');
                })
        },
        validateUserKeyChange(key) {
            if (!methods.validateCurrSelectAttrs()) return false;
            props.currSelect.attributes.attrs.cdata.defJob.userKey = key
            if (key.indexOf("_") !== -1) {
                methods.handleUserKeyValType()
                return true;
            }
            if (key) $message.warning("KEY需包含下划线, 请重新输入")
            props.currSelect.attributes.attrs.cdata.defJob.userKey = null

            methods.handleUserKeyValType()
            return false;
        },
        handleSyncFlowNodeIds() {
            handleSyncFlowNodeIds(data, props, methods)
        },
        changeSyncFlowNodeId(id) {
            changeSyncFlowNodeId(id, props, methods, $message)
        },
        handleSyncFlowNodeRelIds() {
            handleSyncFlowNodeRelIds(data, props, methods)
        },
        changeSyncFlowNodeRelId(id) {
            changeSyncFlowNodeRelId(id, props, methods, $message)
        },
        handleFlowNodeIds() {
            data.flowNodeIds = []
            let models = window._jfGraph.getElements();
            if (validateNull(models)) return
            models.forEach(each => {
                let cdata = each.attributes.attrs.cdata;
                let b = cdata.type === CommonNodeType.SERIAL || cdata.type === CommonNodeType.PARALLEL;
                if (b && cdata.attrs.isGateway !== '1' && props.currSelect.id !== each.id) {
                    let id = each.id
                    let nodeName = each.attributes.attrs.label.text
                    data.flowNodeIds.push({id, nodeName})
                }
            })
        },
        initSubDefFlows() {
            if (validateNull(dicData.defFlows)) return
            dicData.subDefFlows = dicData.defFlows.filter(f => f.flowKey !== props.flowData.attrs.flowKey);
        },
        openFlowMethods(bool) {
            methods.clearRoleUserIdValType(false)
            data.flowMethodVisible = bool
        },
        openFlowRoutes(bool) {
            data.nodeRouteVisible = bool
        },
        clearRouteKeyValName() {
            props.currSelect.attributes.attrs.cdata.attrs.valType = null
            if (props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName === PROP_CONST.VAR_KEY_VAL.routeName ) {
                props.currSelect.attributes.attrs.cdata.attrs.condGroups = []
            }
            props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName = null
            props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = null
        },
        openFlowSubParams(bool) {
            if (!props.currSelect.attributes.attrs.cdata.attrs.subDefFlowId) {
                $message.warning("请先选择【节点关联子流程】")
                return
            }
            data.flowSubParamVisible = bool
        },
        handleSubDefFlowId(subDefFlowId) {
            if (subDefFlowId) return
            props.currSelect.attributes.attrs.cdata.attrs.startSubFlow = null
            props.currSelect.attributes.attrs.cdata.attrs.restartSubFlow = null
            props.currSelect.attributes.attrs.cdata.attrs.backParFlow = null
            props.currSelect.attributes.attrs.cdata.attrs.subFlowParams = []
        },
        async onSelectItems(items) {
            if (!methods.validateCurrSelectDefJob()) return;
            await methods.onFormLoaded(items);
            props.currSelect.attributes.attrs.cdata.defJob.roleUserId = items
            methods.clearUserKeyValName()
            props.currSelect.attributes.attrs.cdata.defJob.valType = DIC_PROP.VAL_TYPE[3].value
        },
        onUserRolePicker() {
            if (!methods.validateCurrSelectDefJob()) return;
            let type = props.currSelect.attributes.attrs.cdata.type;
            data.isOnlyOne = type !== CommonNodeType.SERIAL && type !== CommonNodeType.PARALLEL && type !== HighNodeType.JOB;
            let items = props.currSelect.attributes.attrs.cdata.defJob.roleUserId;
            proxy.$refs.userRolePicker.onOpen(items);
        },
        hideJobFormPerms(val) {
            if (!methods.validateCurrSelectAttrs()) return;
            if (validateNull(props.currSelect.attributes)) return false
            data.hideJobFormPerm = val === '1'
        },
        watchHideJobFormPerms(currSelect) {
            if (!methods.validateCurrSelectAttrs()) return;
            let type = currSelect.attributes.attrs.cdata.type;
            let attrs = currSelect.attributes.attrs.cdata.attrs;
            let val = '0'
            if (attrs && (type === CommonNodeType.SERIAL || type === CommonNodeType.PARALLEL || CommonNodeType.END)) {
                val = attrs.isAutoAudit
            }
            methods.hideJobFormPerms(val)
        },
        validateNodeJob(currSelect) {
            if (!methods.validateCurrSelectAttrs()) return false;
            if (currSelect.attributes.attrs.cdata.type === HighNodeType.JOB) return true;
            let defJob = methods.validateNode(currSelect) && currSelect.attributes.attrs.cdata.defJob;
            let notExist = methods.validateNotExistNodeJobs(currSelect);
            return defJob && notExist
        },
        validateNode(currSelect) {
            return validateNodeType(currSelect, methods, true);
        },
        validateNotExistNodeJobs(currSelect) {
            if (currSelect.attributes.ports) return validateNull(currSelect.attributes.ports.items)
            let links = window._jfGraph.getLinks();
            let models = window._jfGraph.getElements();
            if (validateNull(models) || validateNull(links)) return
            let targetIds = links.filter(f => f.attributes.source.id === currSelect.id).map(m => m.attributes.target.id);
            let nodeJobList = models.filter(f => targetIds.includes(f.id) && f.attributes.attrs.cdata.type === HighNodeType.JOB);
            return validateNull(nodeJobList)
        },
        nodeLabel(currSelect) {
            let type = currSelect.attributes.attrs.cdata.type;
            let isGateway = currSelect.attributes.attrs.cdata.attrs.isGateway;
            let nodes = isGateway === '1' ? highNodes : commonNodes
            let node = nodes.find(f => f.type === type);
            if (!node) node = highNodes.find(f => f.type === type);
            if (!node) node = laneNodes.find(f => f.type === type);
            return node.nodeName
        },
        canChangeFlowNodeName() {
            return !validateNull(props.currSelect.attributes) && (props.currSelect.attributes.attrs.cdata.type === CommonNodeType.SERIAL
                || props.currSelect.attributes.attrs.cdata.type === CommonNodeType.PARALLEL)
        },
        changeFlowNodeName(type) {
            props.currSelect.attributes.attrs.cdata.type = type
            let isGateway = props.currSelect.attributes.attrs.cdata.attrs.isGateway;
            let nodes = isGateway === '1' ? highNodes : commonNodes
            let node = nodes.find(f => f.type === type);
            if (props.flowData.attrs.isJobSeparated !== '1' && isGateway !== '1') {
                props.currSelect.attributes.attrs.icon.xlinkHref = node.icon
            } else {
                props.currSelect.attributes.attrs.image.xlinkHref = node.icon
            }
            let defaultNodeName = nodes.find(f => f.nodeName === data.nodeOrJobName);
            if (defaultNodeName) {
                methods.handleNodeOrJobName(node.nodeName)
                data.nodeOrJobName = node.nodeName
            } else {
                props.currSelect.findView(window._jfPaper).update()
            }
        },
        showMoreSetting(type) {
            if (type === '1') data.moreNode = !data.moreNode
            else if (type === '2') data.moreJob = !data.moreJob
        },
        replaceFlowNodeFormId() {
            replaceFlowNodeFormId(data.newFormId, data.oldFormId, true)
        },
        handleAddGroupName() {
            useMessageBox().prompt("请输入新的分组名称")
                .then(({ value }) => {
                    props.flowData.attrs.groupName = value
                    onUpdate(dicData, props.flowData.attrs);
                })
        },
        // 加载已有流程
        async loadExistFlow() {
            if (!data.defFlowId) {
                $message.warning("请先选择已有流程")
                return
            }
            let find = dicData.defFlows.find(f => f.id === data.defFlowId);
            if (!find) {
                $message.warning("流程数据不存在")
                return
            }
            let confirmObj = {text: "新建流程", callback: () => { methods.emitInitFlow(find, true) }}
            let cancelObj = {text: "修改流程", callback: () => { methods.emitInitFlow(find, false) }}
            confirmCancelAndClose(confirmObj, cancelObj, '是否加载为【新建流程】' + find.flowKey)
        },
        emitInitFlow(find, isNew) {
            $emit('initFlow', find.id, null, null, isNew);
            methods.hideAttrConfig(false, '1');
        },
        isNodeJobSeparated() {
            return !(props.currSelect.attrs && props.currSelect.attrs.flowNodeId)
        },
        showNodeOrJobName(currSelect) {
            if (!methods.validateCurrSelectAttrs() || !methods.isNodeJobSeparated()) {
                return
            }
            let type = currSelect.attributes.attrs.cdata.type;
            let b = type !== CommonNodeType.START && type !== CommonNodeType.END;
            if (type === CommonNodeType.LINK || !b) return;
            let text = currSelect.attr(window._defShapes.ntext);
            let b2 = type === LaneNodeType.X_LANE || type === LaneNodeType.Y_LANE;
            if (b2) {
                text = currSelect.attr(window._defShapes.ltext);
            }
            data.nodeOrJobName = text
        },
        handleNodeOrJobName(value) {
            if (!methods.isNodeJobSeparated()) {
                window._jfOperate.changeJobNoSeparatedText(props.currSelect, value)
                return
            }
            window._jfOperate.changeNodeOrJobNoSeparatedText(props.currSelect, value)
        },
        handleDefaultJobName(value) {
            if (!methods.validateCurrSelectAttrs()) return;
            if (props.currSelect.attributes.attrs.cdata.type !== HighNodeType.JOB) return;
            methods.handleNodeOrJobName(value)
        },
        handleNodeDescription(value) {
            props.currSelect.attr(window._defShapes.ndtext, value)
        },
        linkLabelChange(label) {
            props.currSelect.labels([{attrs: {text: {text: label}}}])
            props.currSelect.findView(window._jfPaper).render();
        },
        open(bool) {
            data.attrConfigVisible = bool
        },
        openedNodeFormId() {
            methods.initSubDefFlows()
            if (Object.keys(props.currSelect).length === 0) return
            if (!methods.validateNode(props.currSelect) || data.hideJobFormPerm) return;
            // 判断是否为实例
            let form = validateRunFlowId(props, {});
            let find = dicData.formId.find(f => f.id === form.formId);
            if (!find && !form.flowInstId) {
                dicData.formId.unshift(props.currFlowForm)
                find = props.currFlowForm
            }
            find.isCurrForm = '1'
            setPropsDataValue(find, props.currFlowForm, 'formName', 'formFieldPerms', 'formInfo', 'flowInstId')
            // 设置默认表单ID 或 实例表单ID
            let pcTodoUrl = props.currSelect.attributes.attrs.cdata.attrs.pcTodoUrl
            if (!validateNull(pcTodoUrl)) return;
            if (props.currSelect.attributes.attrs.cdata.defJob) {
                let sysPathIds = deepClone(orderVue.vueKeySys.sysPathIds);
                sysPathIds.unshift(find.id)
                props.currSelect.attributes.attrs.cdata.attrs.pcTodoUrl = sysPathIds
            }
        },
        validateNullRoleUserId() {
            return validateNull(props.currSelect.attributes.attrs.cdata.defJob.roleUserId)
        },
        async revParseUserKeyValName() {
            if (methods.validateCurrSelectAttrsAttrs()) {
                let nodeValType = props.currSelect.attributes.attrs.cdata.attrs.valType;
                let routeKeyVal = props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal;
                if (DIC_PROP.VAL_TYPE[2].value === nodeValType && routeKeyVal === PROP_CONST.VAR_KEY_VAL.route) {
                    props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName = PROP_CONST.VAR_KEY_VAL.routeName
                }
            }
            if (!methods.validateCurrSelectDefJob()) return;
            let valType = props.currSelect.attributes.attrs.cdata.defJob.valType;
            let userKeyVal = props.currSelect.attributes.attrs.cdata.defJob.userKeyVal;
            if (DIC_PROP.VAL_TYPE[2].value === valType && userKeyVal === PROP_CONST.VAR_KEY_VAL.person) {
                props.currSelect.attributes.attrs.cdata.defJob.userKeyValName = PROP_CONST.VAR_KEY_VAL.personName
            } else if (DIC_PROP.VAL_TYPE[4].value === valType && userKeyVal) {
                let data = {userKeyValFrom: null, formFieldPerms: []}
                await revParseUserKeyValName(props, data, dicData, methods)
                if (!data.userKeyValFrom) return;
                props.currSelect.attributes.attrs.cdata.defJob.userKeyValName = DIC_PROP.FLOW_METHOD_TYPE.find(f => f.value === data.userKeyValFrom).label;
            }
        },
        handleUserKeyValValType() {
            let userKeyVal = props.currSelect.attributes.attrs.cdata.defJob.userKeyVal;
            let valType = props.currSelect.attributes.attrs.cdata.defJob.valType;
            if (userKeyVal && !valType) {
                props.currSelect.attributes.attrs.cdata.defJob.valType = DIC_PROP.VAL_TYPE[4].value
            }
        },
        handleUserKeyValType() {
            let userKey = props.currSelect.attributes.attrs.cdata.defJob.userKey;
            let roleUserId = props.currSelect.attributes.attrs.cdata.defJob.roleUserId;
            let userKeyVal = props.currSelect.attributes.attrs.cdata.defJob.userKeyVal;
            let b = validateNull(roleUserId) && !userKeyVal;
            // 存在参与者KEY默认分配模式
            if (b && userKey) {
                props.currSelect.attributes.attrs.cdata.defJob.valType = DIC_PROP.VAL_TYPE[1].value
            } else if(b && !userKey) {
                props.currSelect.attributes.attrs.cdata.defJob.valType = null
            }
        },
        clearRoleUserIdValType(isClear) {
            props.currSelect.attributes.attrs.cdata.defJob.roleUserId = []
            if (isClear) {
                props.currSelect.attributes.attrs.cdata.defJob.valType = null
            }
            methods.handleUserKeyValType()
            methods.handleUserKeyValValType()
        },
        clearUserKeyValName() {
            props.currSelect.attributes.attrs.cdata.defJob.valType = null
            if (props.currSelect.attributes.attrs.cdata.defJob.userKeyValName === PROP_CONST.VAR_KEY_VAL.personName ) {
                props.currSelect.attributes.attrs.cdata.defJob.condGroups = []
            }
            props.currSelect.attributes.attrs.cdata.defJob.userKeyValName = null
            props.currSelect.attributes.attrs.cdata.defJob.userKeyVal = null

            methods.handleUserKeyValType()
        },
        async onFormLoadedCarbonCopy() {
            if (!methods.validateNode(props.currSelect)) return
            let attrs = props.currSelect.attributes.attrs.cdata.attrs;
            if (validateNull(attrs.carbonCopy)) return
            await onFormLoaded(dicData, attrs, {key: 'carbonCopy'});
        },
        async onFormLoaded(roleUserId?) {
            if (validateNull(props.currSelect.attributes.attrs.cdata.defJob)) return
            if (validateNull(roleUserId)) {
                roleUserId = props.currSelect.attributes.attrs.cdata.defJob.roleUserId;
            }
            if (validateNull(roleUserId)) return
            await onFormLoaded(dicData, roleUserId);
        },
        changeTabPane(val) {
            if (validateNull(val) || Object.keys(val).length === 0) {
                data.activeKey = 'flow-attr'
                return
            }
            methods.revParseUserKeyValName()
            methods.showNodeOrJobName(val)
            methods.watchHideJobFormPerms(val)
            methods.handleSyncFlowNodeIds()
            methods.handleSyncFlowNodeRelIds()
            methods.handleFlowNodeIds()
            methods.openedNodeFormId()
            methods.onFormLoadedCarbonCopy();
            methods.onFormLoaded();
            let type = val.attributes.attrs.cdata.type;
            if (type === CommonNodeType.LINK) {
                data.activeKey = 'link-attr'
            } else if (type === HighNodeType.JOB) {
                data.activeKey = 'node-job-attr'
            } else if (!type) {
                data.activeKey = 'flow-attr'
            } else {
                data.activeKey = 'node-attr'
            }
        }
    }
    // 监听双向绑定
    watch(
        () => props.currSelect,
        (val) => {
            methods.changeTabPane(val)
        }
    );

    // 暴露变量
    defineExpose({
        open: methods.open
    });
</script>

<style lang="scss">
  @import '../assets/style/flow-attr.scss';
</style>
