<template>
    <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.jobType" @change="methods.changeJobType(data.cond)">
                <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-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.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.condMethodExplain5 }}
                <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.condMethodExplain5 }}</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.defJob"
                         :httpParamType="DIC_PROP.PARAM_RULE_TYPE[0].value"
                         v-if="data.httpUrlParamsVisible"></flow-http-param>
    </template>

    <template v-if="data.cond.valType === '0'">
        <el-tooltip content="当节点属性【多人审批方式】为依次审批时，审批顺序由下方条件组的顺序决定" placement="bottom">
            <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-tooltip>
        <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.jobType" @change="methods.changeJobType(item)">
                            <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-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>

                </el-collapse-item>
            </el-collapse>
        </template>
    </template>
</template>

<script setup lang="ts" name="FlowUserRule">
    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";

    const {proxy} = getCurrentInstance();
    const FlowHttpParam = defineAsyncComponent(() => import('./flow-http-param.vue'));

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

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

    const data = reactive({
        collapse: [0],
        allFieldPerms: [],
        formFieldPerms: [],
        cond: deepClone(condData),
        httpUrlParamsVisible: false,
        oldCurrentRow: null,
        condGroups: [],
        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.defJob.condGroups
            if (validateNull(condGroups)) return
            onFormLoaded(dicData, condGroups)
        },
        openHttpUrlParams() {
            if (!data.cond.varKeyVal) {
                $message.warning("请先输入【Http请求地址】")
                return
            }
            if (data.httpUrlParamsVisible) {
                props.currSelect.attributes.attrs.cdata.defJob.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.defJob.condGroups;
            if (validateNull(condGroups)) return
            props.currSelect.attributes.attrs.cdata.defJob.condGroups.forEach(each => {
                each.groupsType = groupsType
            })
            methods.validateCondData()
        },
        changeGroupType(item, index) {
            let condGroups = props.currSelect.attributes.attrs.cdata.defJob.condGroups;
            if (validateNull(condGroups)) return
            props.currSelect.attributes.attrs.cdata.defJob.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 (!data.cond.roleId) {
                $message.warning("参与者 不能为空")
                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.defJob.condGroups.push(cond)
                methods.validateCondData()
                methods.updateCondVarKeyVal(true)
            }
            methods.onFormLoaded()
        },
        handleCondGroupDelete(index: number) {
            props.currSelect.attributes.attrs.cdata.defJob.condGroups.splice(index, 1)
            methods.validateCondData()
        },
        handleSingleCondDelete(index: number, row: any, groupIndex) {
            props.currSelect.attributes.attrs.cdata.defJob.condGroups[groupIndex].condGroup.splice(index, 1)
            if (validateNull(props.currSelect.attributes.attrs.cdata.defJob.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.defJob.valType = data.cond.valType
            if (isSave) {
                if (data.cond.valType === DIC_PROP.VAL_TYPE[2].value) {
                    props.currSelect.attributes.attrs.cdata.defJob.userKeyVal = PROP_CONST.VAR_KEY_VAL.person
                    props.currSelect.attributes.attrs.cdata.defJob.userKeyValName = PROP_CONST.VAR_KEY_VAL.personName
                } else {
                    props.currSelect.attributes.attrs.cdata.defJob.userKeyVal = data.cond.varKeyVal
                }
                props.currSelect.attributes.attrs.cdata.defJob.httpMethod = data.cond.httpMethod
            } else {
                props.currSelect.attributes.attrs.cdata.defJob.userKeyVal = null
                props.currSelect.attributes.attrs.cdata.defJob.userKeyValName = null

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

                props.currSelect.attributes.attrs.cdata.defJob.httpParams = []
                props.currSelect.attributes.attrs.cdata.defJob.httpMethod = null
                data.httpUrlParamsVisible = false
            }
        },
        validateCondData() {
            let condGroups = props.currSelect.attributes.attrs.cdata.defJob.condGroups;
            if (!condGroups) {
                props.currSelect.attributes.attrs.cdata.defJob.condGroups = []
            }
            data.condGroups.splice(0, data.condGroups.length);
            props.currSelect.attributes.attrs.cdata.defJob.condGroups.forEach(each => data.condGroups.push(each))
            data.existData = !validateNull(data.condGroups)
        },
        initCurrVarKeyVal() {
            data.cond.valType = props.currSelect.attributes.attrs.cdata.defJob.valType
            if (data.condGroups.length <= 0) {
                data.cond.varKeyVal = props.currSelect.attributes.attrs.cdata.defJob.userKeyVal
                let httpMethod = props.currSelect.attributes.attrs.cdata.defJob.httpMethod
                if (httpMethod) data.cond.httpMethod = httpMethod
            }
            let httpParams = props.currSelect.attributes.attrs.cdata.defJob.httpParams;
            if (!validateNull(httpParams)) {
                data.httpUrlParamsVisible = true
            }
            return data.cond.valType
        },
        changeTabPane(val) {
            methods.validateCondData()
            methods.handleCondValType()
            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>
