<template>
    <div>
        <el-tabs class="flow-attr"
                 v-model="data.activeKey">
            <el-tab-pane name="flow-rule">
                <template #label>
                    <div>
                        <el-icon style="vertical-align: middle;margin-right: 3px">
                            <Setting/>
                        </el-icon>
                        <span style="vertical-align: middle;">设置路由规则</span>
                    </div>
                </template>
                <el-form label-position="left" class="flow-config-attr" label-width="150px">
                    <div style="margin: 5px 15px"><span
                            style="color: red;font-size: 14px">注:可根据接口返回值 或 表单数据的字段值，配置对应的路由动作（可自定义随意扩展）</span>
                    </div>
                    <el-form-item label="条件组关系">
                        <el-switch
                                v-model="data.cond.groupsType" @change="methods.changeGroupsType"
                                active-value="0"
                                inactive-value="1"
                                inactive-text="或"
                                active-text="且" disabled>
                        </el-switch>
                        <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-radio-group style="width: 313px" @change="methods.handleCondValType" :disabled="data.existData"
                                        v-model="data.cond.valType">
                            <el-radio v-for="(item, index) in [DIC_PROP.VAL_TYPE[2], DIC_PROP.VAL_TYPE[4], DIC_PROP.VAL_TYPE[5]]" :key="index" :label="item.value"
                                      style="width: 75px">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                        <el-tooltip placement="top">
                            <template #content>若无法切换模式，请先清空条件组列表</template>
                            <el-icon>
                                <QuestionFilled/>
                            </el-icon>
                        </el-tooltip>
                    </el-form-item>

                    <el-divider>组内条件配置</el-divider>

                    <template v-if="data.cond.valType === '0'">
                        <el-form-item label="组内条件关系">
                            <el-switch
                                    v-model="data.cond.groupType"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-text="或"
                                    active-text="且">
                            </el-switch>
                        </el-form-item>

                        <el-table :data="data.cond.condGroup"
                                  border style="width: 100%; margin-bottom: 10px" max-height="500">

                            <el-table-column type="index" label="操作" width="80">
                                <template #header>
                                    <el-button icon="Plus" size="small" type="primary" circle @click="methods.onAddItem(true)"></el-button>
                                </template>
                                <template #default="scope">
                                    <el-button icon="Minus" size="small" type="danger" circle @click="methods.handleCondDelete(scope.$index, scope.row)"></el-button>
                                </template>
                            </el-table-column>

                            <el-table-column prop="varKeyVal" :label="t('flowClazz.varKeyVal')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-select v-model="scope.row.varKeyVal" @change="methods.handleVarKeyVal(scope.row)"
                                               clearable
                                               filterable>
                                        <el-option-group
                                                v-for="(group, index) in data.allFieldPerms"
                                                :key="index"
                                                :label="group.label">
                                            <el-option
                                                    v-for="(item, index) in group.options"
                                                    :disabled="item.prop.indexOf('_define_') !== -1"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.prop">
                                            </el-option>
                                        </el-option-group>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column prop="operator" :label="t('flowClazz.operator')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-select v-model="scope.row.operator" @change="methods.handleVarKeyVal(scope.row)"
                                               clearable>
                                        <el-option
                                                v-for="(item, index) in data.varValOperator"
                                                :key="index"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column prop="varVal" :label="t('flowClazz.varVal')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model="scope.row.varVal" clearable/>
                                </template>
                            </el-table-column>
                        </el-table>

                        <el-form-item label="路由动作">
                            <el-select v-model="data.cond.routeAction" @change="methods.changeRouteAction(data.cond)">
                                <el-option v-for="(item, index) in DIC_PROP.ROUTE_ACTIONS" :key="index" :disabled="item.value.indexOf('_define_') !== -1"
                                           :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="路由到哪个节点" v-if="data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
                            <el-select class="input-attr" v-model="data.cond.toFlowNodeId"
                                       clearable filterable>
                                <template v-for="(item, index) in data.toFlowNodeIds"  :key="index">
                                    <el-option :label="item.nodeName"
                                               :value="item.id">
                                    </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 v-if="data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
                            <el-form-item label="参与者类型">
                                <el-tooltip placement="top" content="若节点参与者为空，可指定默认的参与者">
                                    <el-select v-model="data.cond.jobType" @change="methods.changeJobType(data.cond)" clearable>
                                        <el-option v-for="(item, index) in DIC_PROP.JOB_USER_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>

                            <el-form-item label="哪个人来审批" v-if="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[0].value">
                                <el-tooltip content="请输入用户名称进行模糊搜索" placement="top">
                                    <el-select class="input-attr"
                                               v-model="data.cond.roleId"
                                               clearable filterable
                                               remote :remote-method="methodsRemote.remoteMethodUser2" :reserve-keyword="false">
                                        <template v-for="(item, index) in dicData.users2"  :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>

                            <el-form-item label="哪个角色审批" v-if="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[1].value">
                                <el-tooltip content="请输入角色名称进行模糊搜索" placement="top">
                                    <el-select class="input-attr" v-model="data.cond.roleId"
                                               filterable
                                               clearable
                                               remote :remote-method="methodsRemote.remoteMethodRole2" :reserve-keyword="false">
                                        <el-option
                                                v-for="(item, index) in dicData.roles2"
                                                :key="index"
                                                :label="item.roleName"
                                                :value="item.roleId">
                                        </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="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[2].value">
                                <el-tooltip content="请输入岗位名称进行模糊搜索" placement="top">
                                    <el-select class="input-attr" v-model="data.cond.roleId"
                                               filterable
                                               clearable
                                               remote :remote-method="methodsRemote.remoteMethodPost2" :reserve-keyword="false">
                                        <el-option
                                                v-for="(item, index) in dicData.posts2"
                                                :key="index"
                                                :label="item.postName"
                                                :value="item.postId">
                                        </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="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[3].value">
                                <el-tooltip content="请输入部门名称进行模糊搜索" placement="top">
                                    <el-select class="input-attr" v-model="data.cond.roleId"
                                               filterable
                                               clearable
                                               remote :remote-method="methodsRemote.remoteMethodDept2" :reserve-keyword="false">
                                        <el-option
                                                v-for="(item, index) in dicData.depts2"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.deptId">
                                        </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>
                        </template>

                        <el-form-item label="驳回到哪个节点" v-if="data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[3].value">
                            <el-select class="input-attr" v-model="data.cond.toFlowNodeId"
                                       clearable filterable>
                                <template v-for="(item, index) in data.toFlowNodeIds"  :key="index">
                                    <el-option :label="item.nodeName"
                                               :value="item.id">
                                    </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>

                    <el-form-item label="函数表达式" v-if="data.cond.valType === '2'">
                        <el-input class="input-attr" v-model="data.cond.varKeyVal" placeholder="请输入函数表达式" clearable @blur="methods.handleCondVarKeyVal"/>

                        <el-tooltip placement="top">
                            <template #content>采用表达式取值 ( 以下两种方式均支持自定义任意扩展 ), 值可以为对象 或 数组, 满足您复杂路由的场景:
                                <br />{{ PROP_CONST.TEXT_DESC.condUserExplain }}
                                <br />{{ PROP_CONST.TEXT_DESC.condMethodExplain3 }}, 返回值可以为对象 或 数组，{{ PROP_CONST.TEXT_DESC.condMethodExplain6 }}
                                <br />{{ PROP_CONST.TEXT_DESC.condMethodExplain4 }}
                            </template>
                            <el-icon style="margin-left: 10px">
                                <QuestionFilled/>
                            </el-icon>
                        </el-tooltip>
                    </el-form-item>

                    <div v-if="data.cond.valType === '2'" style="margin: 10px 13px">
                        <span style="color: #409EFF;font-size: 14px">注: 当前函数表达式的返回值可以为对象 或 数组，{{ PROP_CONST.TEXT_DESC.condMethodExplain6 }}</span>
                    </div>

                    <template v-if="data.cond.valType === '3'">
                        <el-form-item label="Http请求地址">
                            <el-input class="input-attr" placeholder="可输入全路径或相对路径" v-model="data.cond.varKeyVal"
                                      @blur="methods.handleCondVarKeyVal" clearable>
                                <template #prepend>
                                    <el-select v-model="data.cond.httpMethod">
                                        <el-option v-for="(item, index) in DIC_PROP.HTTP_METHODS" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </template>
                            </el-input>

                            <el-tooltip content="点击可设置Http请求的参数信息" placement="bottom">
                                <el-button type="primary" size="small" round style="margin-left: 10px"
                                           @click="methods.openHttpUrlParams()">
                                    {{ data.httpUrlParamsVisible ? '清空' : '参数' }}
                                </el-button>
                            </el-tooltip>
                        </el-form-item>

                        <flow-http-param ref="flowHttpParam" :currFlowForm="props.currFlowForm" :flowData="props.flowData"
                                         :httpParam="props.currSelect.attributes.attrs.cdata.attrs"
                                         :httpParamType="DIC_PROP.PARAM_RULE_TYPE[8].value"
                                         v-if="data.httpUrlParamsVisible"></flow-http-param>
                    </template>

                    <template v-if="data.cond.valType === '0'">
                        <el-button type="primary" round style="margin-left: 185px; margin-top: 30px; margin-bottom: 30px; width: 200px" @click="methods.addFlowNodeCondGroup()">
                            {{ data.oldCurrentRow ? '修改完成': '添加条件组' }}
                        </el-button>
                        <el-divider>已添加条件组列表(点击行可再次修改)</el-divider>
                        <el-empty description="条件组列表为空" style="margin: 10px 230px" v-if="!data.existData">
                        </el-empty>

                        <template v-for="(item, index) in data.condGroups" v-else
                                  :key="index">

                            <el-collapse v-model="data.collapse">
                                <el-collapse-item :name="index">
                                    <template #title>
                                        {{ '条件组 ' + (index + 1) }}

                                        <el-icon style="margin-left: 10px" @click="methods.handleCondGroupDelete(index)">
                                            <Delete />
                                        </el-icon>
                                    </template>

                                    <el-form-item label="组内条件关系">
                                        <el-switch
                                                v-model="item.groupType" @change="methods.changeGroupType(item, index)"
                                                active-value="0"
                                                inactive-value="1"
                                                inactive-text="或"
                                                active-text="且">
                                        </el-switch>
                                    </el-form-item>

                                    <el-table :data="item.condGroup" border style="width: 100%; margin-bottom: 10px" max-height="500"
                                              highlight-current-row @current-change="methods.handleCurrentChange" :ref="'tableDataRef' + index">

                                        <el-table-column type="index" label="操作" width="80">
                                            <template #default="scope">
                                                <el-button icon="Minus" size="small" type="danger" circle
                                                           @click="methods.handleSingleCondDelete(scope.$index, scope.row, index)"></el-button>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="varKeyVal" :label="t('flowClazz.varKeyVal')" show-overflow-tooltip>
                                            <template #default="scope">
                                                <convert-group-name :options="data.allFieldPerms"
                                                                    :value="scope.row.varKeyVal"
                                                                    :valueKey="'prop'" :showKey="'label'"></convert-group-name>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="operator" :label="t('flowClazz.operator')" show-overflow-tooltip>
                                            <template #default="scope">
                                                <dict-tag :options="DIC_PROP.OPERATOR" :value="scope.row.operator"></dict-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="varVal" :label="t('flowClazz.varVal')" show-overflow-tooltip/>
                                    </el-table>

                                    <el-form-item label="路由动作">
                                        <el-select v-model="item.routeAction" @change="methods.changeRouteAction(item)">
                                            <el-option v-for="(item, index) in DIC_PROP.ROUTE_ACTIONS" :key="index" :disabled="item.value.indexOf('_define_') !== -1"
                                                       :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="路由到哪个节点" v-if="item.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
                                        <el-select class="input-attr" v-model="item.toFlowNodeId"
                                                   clearable filterable>
                                            <template v-for="(item, index) in data.toFlowNodeIds"  :key="index">
                                                <el-option :label="item.nodeName"
                                                           :value="item.id">
                                                </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 v-if="item.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
                                        <el-form-item label="参与者类型">
                                            <el-tooltip placement="top" content="若节点参与者为空，可指定默认的参与者">
                                                <el-select v-model="item.jobType" @change="methods.changeJobType(item)" clearable>
                                                    <el-option v-for="(item, index) in DIC_PROP.JOB_USER_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
                                                </el-select>
                                            </el-tooltip>
                                        </el-form-item>

                                        <el-form-item label="哪个人来审批" v-if="item.jobType === DIC_PROP.JOB_USER_TYPE[0].value">
                                            <el-tooltip content="请输入用户名称进行模糊搜索" placement="top">
                                                <el-select class="input-attr"
                                                           v-model="item.roleId"
                                                           clearable filterable
                                                           remote :remote-method="methodsRemote.remoteMethodUser" :reserve-keyword="false">
                                                    <template v-for="(item, index) in dicData.users"  :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>

                                        <el-form-item label="哪个角色审批" v-if="item.jobType === DIC_PROP.JOB_USER_TYPE[1].value">
                                            <el-tooltip content="请输入角色名称进行模糊搜索" placement="top">
                                                <el-select class="input-attr" v-model="item.roleId"
                                                           filterable
                                                           clearable
                                                           remote :remote-method="methodsRemote.remoteMethodRole" :reserve-keyword="false">
                                                    <el-option
                                                            v-for="(item, index) in dicData.roles"
                                                            :key="index"
                                                            :label="item.roleName"
                                                            :value="item.roleId">
                                                    </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="item.jobType === DIC_PROP.JOB_USER_TYPE[2].value">
                                            <el-tooltip content="请输入岗位名称进行模糊搜索" placement="top">
                                                <el-select class="input-attr" v-model="item.roleId"
                                                           filterable
                                                           clearable
                                                           remote :remote-method="methodsRemote.remoteMethodPost" :reserve-keyword="false">
                                                    <el-option
                                                            v-for="(item, index) in dicData.posts"
                                                            :key="index"
                                                            :label="item.postName"
                                                            :value="item.postId">
                                                    </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="item.jobType === DIC_PROP.JOB_USER_TYPE[3].value">
                                            <el-tooltip content="请输入部门名称进行模糊搜索" placement="top">
                                                <el-select class="input-attr" v-model="item.roleId"
                                                           filterable
                                                           clearable
                                                           remote :remote-method="methodsRemote.remoteMethodDept" :reserve-keyword="false">
                                                    <el-option
                                                            v-for="(item, index) in dicData.depts"
                                                            :key="index"
                                                            :label="item.name"
                                                            :value="item.deptId">
                                                    </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>
                                    </template>

                                    <el-form-item label="驳回到哪个节点" v-if="item.routeAction === DIC_PROP.ROUTE_ACTIONS[3].value">
                                        <el-select class="input-attr" v-model="item.toFlowNodeId"
                                                   clearable filterable>
                                            <template v-for="(item, index) in data.toFlowNodeIds"  :key="index">
                                                <el-option :label="item.nodeName"
                                                           :value="item.id">
                                                </el-option>
                                            </template>
                                        </el-select>

                                        <el-tooltip placement="top" content="组内条件满足时，驳回到哪个节点（注意：必须是已审批过的节点）">
                                            <el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
                                        </el-tooltip>
                                    </el-form-item>

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

        </el-tabs>
    </div>
</template>

<script setup lang="ts" name="FlowMethod">
    import {useI18n} from "vue-i18n";
    import {useMessage} from "/@/hooks/message";
    import {rule, validateNull} from "/@/utils/validate";
    import {deepClone} from "/@/utils/other";
    import {DIC_PROP} from "/@/flow/support/dict-prop";
    import {buildSysFieldsFormOption} from "../../utils/form-perm";
    import {
        onFormLoadedUrl,
        onLoadDicUrl,
        initRemoteMethodAllByKey
    } from "../../components/convert-name/convert";
    import {PROP_CONST} from "../../support/prop-const";
    import {handleChangeJobType} from "../../index";
    import {validateNodeType} from "./index";

    const { proxy } = getCurrentInstance();
    const FlowHttpParam = defineAsyncComponent(() => import('./flow-http-param.vue'));
    const $emit = defineEmits(["openFlowRoutes"]);

    const {t} = useI18n();
    const $message = useMessage();
    const props = defineProps({
        currFlowForm: {
            type: Object,
            default: null,
        },
        currSelect: {
            type: Object,
            default: {},
        },
        flowData: {
            type: Object,
            default: null,
        },
    });

    const condData = {
        httpMethod: 'GET',
        roleId: null,
        jobType: null,
        routeAction: null,
        toFlowNodeId: null,
        groupsType: '1',
        condGroup: [],
        groupType: '0',
        valType: '0',
        varKeyVal: null,
        operator: null,
        varVal: null,
    }

    const data = reactive({
        activeKey: 'flow-rule',
        collapse: [0],
        allFieldPerms: [],
        formFieldPerms: [],
        cond: deepClone(condData),
        httpUrlParamsVisible: false,
        oldCurrentRow: null,
        condGroups: [],
        toFlowNodeIds: [],
        existData: false,
    })

    // 定义字典
    const dicData = reactive({});
    const onLoad = onLoadDicUrl();
    const onFormLoaded = onFormLoadedUrl(...PROP_CONST.LOAD_USER_ROLE);
    onMounted(async () => {
        // await onLoad(dicData);

        methods.changeTabPane(props.currSelect)
    })

    const methodsRemote = initRemoteMethodAllByKey(onLoad, dicData)

    const methods = {
        changeJobType(item) {
            handleChangeJobType(dicData, item)
        },
        onFormLoaded() {
            let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups
            if (validateNull(condGroups)) return
            onFormLoaded(dicData, condGroups)
        },
        changeRouteAction(item) {
            // 切换清空
            let b = item.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value;
            if(!b && item.routeAction !== DIC_PROP.ROUTE_ACTIONS[3].value) {
                data.cond.toFlowNodeId = null
            }
        },
        openHttpUrlParams() {
            if (!data.cond.varKeyVal) {
                $message.warning("请先输入【Http请求地址】")
                return
            }
            if (data.httpUrlParamsVisible) {
                props.currSelect.attributes.attrs.cdata.attrs.httpParams = []
                data.httpUrlParamsVisible = false
            } else {
                data.httpUrlParamsVisible = true
            }
        },
        handleCurrentChange(row) {
            if (!row) return
            let condGroupsRow;
            for (let i = 0; i < data.condGroups.length; i++) {
                let index = data.condGroups[i].condGroup.indexOf(row);
                if (index !== -1) {
                    condGroupsRow = data.condGroups[i];
                }
            }
            // 先清空之前选中的其他条件组
            if (data.oldCurrentRow !== condGroupsRow) {
                let oldIndex = data.condGroups.indexOf(data.oldCurrentRow);
                if (oldIndex !== -1) {
                    proxy.$refs['tableDataRef' + oldIndex][0].setCurrentRow(null)
                }
            }
            data.cond = condGroupsRow
            data.oldCurrentRow = condGroupsRow
        },
        handleVarKeyVal(row) {
            let dots = row.varKeyVal.split('.').length - 1;
            if (dots === 2) {
                let find = DIC_PROP.OPERATOR.slice(6).find(f => f.value === row.operator);
                if (!find && row.operator) {
                    $message.warning("子表单的字段只能选择包含或不包含")
                    row.operator = null
                }
            }
        },
        changeGroupsType(groupsType) {
            let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups;
            if (validateNull(condGroups)) return
            props.currSelect.attributes.attrs.cdata.attrs.condGroups.forEach(each => {
                each.groupsType = groupsType
            })
            methods.validateCondData()
        },
        changeGroupType(item, index) {
            let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups;
            if (validateNull(condGroups)) return
            props.currSelect.attributes.attrs.cdata.attrs.condGroups[index].groupType = item.groupType
            methods.validateCondData()
        },
        onAddItem(isAdd) {
            if (validateNull(data.formFieldPerms)) {
                buildSysFieldsFormOption(data, props, $message)
            }
            if (data.cond.condGroup.length > 0) {
                let find = data.cond.condGroup.find(f => !f.varKeyVal || !f.operator || !f.varVal);
                if (find) {
                    let b = !find.varKeyVal || !find.operator || !find.varVal;
                    if (isAdd && b) {
                        $message.warning("请先填写 表单字段 或 运算符 或 值")
                        return
                    }
                }
                if (!isAdd) data.cond.condGroup.splice(0, data.cond.condGroup.length);
            }
            let obj = {varKeyVal: '', operator: '', varVal: ''};
            data.cond.condGroup.push(obj);
        },
        addFlowNodeCondGroup() {
            if (validateNull(data.cond.condGroup)) {
                $message.warning("请先添加组内条件")
                return
            }
            let valType = data.cond.valType;
            let find = data.cond.condGroup.find(f => !f.varKeyVal || !f.operator || !f.varVal);
            if (find) {
                if (valType === DIC_PROP.VAL_TYPE[2].value) {
                    if (!find.varKeyVal || !find.operator || !find.varVal) {
                        $message.warning("表单字段 或 运算符 或 值 不能为空")
                        return
                    }
                }
            }
            if (!methods.validateCondGroupAttrs()) return;
            if (data.oldCurrentRow) {
                // 先清空之前选中
                let index = data.condGroups.indexOf(data.cond);
                if (index !== -1) {
                    proxy.$refs['tableDataRef' + index][0].setCurrentRow(null)
                }
                data.oldCurrentRow = null
                data.cond = deepClone(condData);
            } else {
                let cond = deepClone(data.cond);
                props.currSelect.attributes.attrs.cdata.attrs.condGroups.push(cond)
                methods.validateCondData()
                methods.updateCondVarKeyVal(true)
            }
            methods.onFormLoaded()
        },
        validateCondGroupAttrs() {
            if (!data.cond.routeAction) {
                $message.warning("路由动作 不能为空")
                return false
            }
            // 校验动作类型参数
            let b = data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value;
            if(b || data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[3].value) {
                if (!data.cond.toFlowNodeId) {
                    $message.warning("路由到哪个节点 不能为空")
                    return false
                }
            }
            return true
        },
        handleCondGroupDelete(index: number) {
            props.currSelect.attributes.attrs.cdata.attrs.condGroups.splice(index, 1)
            methods.validateCondData()
        },
        handleSingleCondDelete(index: number, row: any, groupIndex) {
            props.currSelect.attributes.attrs.cdata.attrs.condGroups[groupIndex].condGroup.splice(index, 1)
            if (validateNull(props.currSelect.attributes.attrs.cdata.attrs.condGroups[groupIndex].condGroup)) {
                methods.handleCondGroupDelete(groupIndex)
            }
            methods.validateCondData()
        },
        handleCondDelete(index: number, row: any) {
            data.cond.condGroup.splice(index, 1)
        },
        handleCondValType(type?) {
            if (type) {
                data.cond.varKeyVal = null
                methods.updateCondVarKeyVal(false)
            }
            if (!type) {
                type = methods.initCurrVarKeyVal()
            }
            if (type === DIC_PROP.VAL_TYPE[2].value) {
                data.varValOperator = DIC_PROP.OPERATOR
                methods.onAddItem(false)
            } else {
                data.varValOperator = []
            }
            data.cond.operator = null
            data.cond.varVal = null
        },
        handleCondVarKeyVal() {
            let val = data.cond.varKeyVal
            let valType = data.cond.valType;
            if (!val) {
                methods.updateCondVarKeyVal(false)
                return
            }
            if (valType === DIC_PROP.VAL_TYPE[2].value) return
            if (valType === DIC_PROP.VAL_TYPE[4].value && val.indexOf("#") === -1) {
                data.cond.varKeyVal = null
                $message.warning("当选择专业模式时, 函数表达式必须符合规定的格式")
                return;
            }
            methods.updateCondVarKeyVal(true)
        },
        updateCondVarKeyVal(isSave) {
            props.currSelect.attributes.attrs.cdata.attrs.valType = data.cond.valType
            if (isSave) {
                if (data.cond.valType === DIC_PROP.VAL_TYPE[2].value) {
                    props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = PROP_CONST.VAR_KEY_VAL.route
                    props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName = PROP_CONST.VAR_KEY_VAL.routeName
                } else {
                    props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = data.cond.varKeyVal
                }
                props.currSelect.attributes.attrs.cdata.attrs.httpMethod = data.cond.httpMethod
            } else {
                props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = null
                props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName = null

                props.currSelect.attributes.attrs.cdata.attrs.condGroups = []

                props.currSelect.attributes.attrs.cdata.attrs.httpParams = []
                props.currSelect.attributes.attrs.cdata.attrs.httpMethod = null
                data.httpUrlParamsVisible = false
            }
        },
        validateCondData() {
            let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups;
            if (!condGroups) {
                props.currSelect.attributes.attrs.cdata.attrs.condGroups = []
            }
            data.condGroups.splice(0, data.condGroups.length);
            props.currSelect.attributes.attrs.cdata.attrs.condGroups.forEach(each => data.condGroups.push(each))
            data.existData = !validateNull(data.condGroups)
        },
        initCurrVarKeyVal() {
            data.cond.valType = props.currSelect.attributes.attrs.cdata.attrs.valType
            if (data.condGroups.length <= 0) {
                data.cond.varKeyVal = props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal
                let httpMethod = props.currSelect.attributes.attrs.cdata.attrs.httpMethod
                if (httpMethod) data.cond.httpMethod = httpMethod
            }
            let httpParams = props.currSelect.attributes.attrs.cdata.attrs.httpParams;
            if (!validateNull(httpParams)) {
                data.httpUrlParamsVisible = true
            }
            return data.cond.valType
        },
        handleFlowNodeIds() {
            data.toFlowNodeIds = []
            let models = window._jfGraph.getElements();
            if (validateNull(models)) return
            models.forEach(each => {
                if (!validateNodeType(each)) return
                if (props.currSelect.id !== each.id) {
                    let id = each.id
                    let nodeName = each.attributes.attrs.label.text
                    data.toFlowNodeIds.push({id, nodeName})
                }
            })
        },
        changeTabPane(val) {
            methods.validateCondData()
            methods.handleCondValType()
            methods.handleFlowNodeIds()
            methods.onFormLoaded()
        }
    }
    // 监听双向绑定
    watch(
        () => props.currSelect,
        (val) => {
            if (Object.keys(val).length === 0) {
                return
            }
            methods.changeTabPane(val)
        }
    );

</script>

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