<template>
    <el-form label-position="left" class="flow-attr flow-param-attr" label-width="200px">

        <el-divider>关联子流程Http接口</el-divider>

        <el-form-item label="保存子流程表单Http请求地址">
            <el-input class="input-attr" placeholder="可输入全路径或相对路径" v-model="props.currSelect.attributes.attrs.cdata.attrs.startSubFlow"
                      clearable>
                <template #prepend>
                    <el-select v-model="props.currSelect.attributes.attrs.cdata.attrs.startSubMethod">
                        <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 placement="top">
                <template #content>启动子流程时更新子流程表单接口（可输入全路径或相对路径）</template>
                <el-icon style="margin-left: 10px">
                    <QuestionFilled/>
                </el-icon>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="更新子流程表单Http请求地址">
            <el-input class="input-attr" placeholder="可输入全路径或相对路径" v-model="props.currSelect.attributes.attrs.cdata.attrs.restartSubFlow"
                      clearable>
                <template #prepend>
                    <el-select v-model="props.currSelect.attributes.attrs.cdata.attrs.restartSubMethod">
                        <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 placement="top">
                <template #content>重入或重启子流程时更新子流程表单接口（可输入全路径或相对路径）</template>
                <el-icon style="margin-left: 10px">
                    <QuestionFilled/>
                </el-icon>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="更新父流程表单Http请求地址">
            <el-input class="input-attr" placeholder="可输入全路径或相对路径" v-model="props.currSelect.attributes.attrs.cdata.attrs.backParFlow"
                      clearable>
                <template #prepend>
                    <el-select v-model="props.currSelect.attributes.attrs.cdata.attrs.backParMethod">
                        <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 placement="top">
                <template #content>返回父流程时更新父流程表单接口（可输入全路径或相对路径）</template>
                <el-icon style="margin-left: 10px">
                    <QuestionFilled/>
                </el-icon>
            </el-tooltip>
        </el-form-item>

        <el-divider>关联子流程Http请求头</el-divider>

        <el-table :data="data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[0].value)"
                  border style="width: 100%; margin-bottom: 10px" max-height="500">

            <el-table-column type="index" :label="t('jfI18n.operate')" width="80">
                <template #header>
                    <el-button icon="Plus" size="small" type="primary" circle
                               @click="methods.onAddItem(DIC_PROP.PARAM_FROM[0].value, true)"></el-button>
                </template>
                <template #default="scope">
                    <el-button icon="Minus" size="small" type="danger" circle
                               @click="methods.handleSubFlowDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>

            <el-table-column prop="targetProp" :label="t('jfAttr.requestHeader')" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.targetProp" :placeholder="scope.row.paramValType === DIC_PROP.PARAM_VAL_TYPE[0].value ? scope.row.varKeyVal : null"
                              clearable></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="paramValType" :label="t('jfAttr.paramValType')" width="145px">
                <template #default="scope">
                    <el-select v-model="scope.row.paramValType" clearable>
                        <el-option v-for="(item, index) in DIC_PROP.PARAM_VAL_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="varKeyVal" :label="t('jfAttr.varKeyVal')" show-overflow-tooltip>
                <template #default="scope">
                    <el-select v-model="scope.row.varKeyVal"
                               v-if="scope.row.paramValType === DIC_PROP.PARAM_VAL_TYPE[0].value"
                               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>

                    <el-input v-else v-model="scope.row.varKeyVal" clearable> </el-input>
                </template>
            </el-table-column>

        </el-table>

        <el-divider>父流程传参到子流程</el-divider>

        <el-table :data="data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[1].value)"
                  border style="width: 100%; margin-bottom: 10px" max-height="500">

            <el-table-column type="index" :label="t('jfI18n.operate')" width="80">
                <template #header>
                    <el-button icon="Plus" size="small" type="primary" circle
                               @click="methods.onAddItem(DIC_PROP.PARAM_FROM[1].value, true)"></el-button>
                </template>
                <template #default="scope">
                    <el-button icon="Minus" size="small" type="danger" circle
                               @click="methods.handleSubFlowDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>

            <el-table-column prop="varKeyVal" :label="t('jfAttr.varKeyVal')" show-overflow-tooltip>
                <template #default="scope">
                    <el-select v-model="scope.row.varKeyVal"
                               v-if="scope.row.paramValType === DIC_PROP.PARAM_VAL_TYPE[0].value"
                               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>

                    <el-input v-else v-model="scope.row.varKeyVal" clearable> </el-input>
                </template>
            </el-table-column>

            <el-table-column prop="paramValType" :label="t('jfAttr.paramValType')" width="145px">
                <template #default="scope">
                    <el-select v-model="scope.row.paramValType" clearable>
                        <el-option v-for="(item, index) in DIC_PROP.PARAM_VAL_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="targetProp" :label="t('jfAttr.subVarKeyVal')" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.targetProp" :placeholder="scope.row.paramValType === DIC_PROP.PARAM_VAL_TYPE[0].value ? scope.row.varKeyVal : null"
                              clearable></el-input>
                </template>
            </el-table-column>
        </el-table>

        <el-divider>子流程回参到父流程</el-divider>

        <el-table :data="data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[2].value)"
                  border style="width: 100%; margin-bottom: 10px" max-height="500">

            <el-table-column type="index" :label="t('jfI18n.operate')" width="80">
                <template #header>
                    <el-button icon="Plus" size="small" type="primary" circle
                               @click="methods.onAddItem(DIC_PROP.PARAM_FROM[2].value, true)"></el-button>
                </template>
                <template #default="scope">
                    <el-button icon="Minus" size="small" type="danger" circle
                               @click="methods.handleSubFlowDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>

            <el-table-column prop="targetProp" :label="t('jfAttr.subVarKeyVal2')" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.targetProp"
                              :placeholder="scope.row.paramValType === DIC_PROP.PARAM_VAL_TYPE[0].value ? scope.row.varKeyVal : null"
                              clearable></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="paramValType" :label="t('jfAttr.paramValType')" width="145px">
                <template #default="scope">
                    <el-switch
                            v-model="scope.row.paramValType"
                            :active-value="DIC_PROP.PARAM_VAL_TYPE[0].value"
                            :active-text="DIC_PROP.PARAM_VAL_TYPE[0].label"
                            :inactive-value="DIC_PROP.PARAM_VAL_TYPE[2].value"
                            :inactive-text="DIC_PROP.PARAM_VAL_TYPE[2].label"
                            inline-prompt>
                    </el-switch>
                </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"
                               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>

    </el-form>
</template>

<script setup lang="ts" name="FlowSubParam">
    import {useI18n} from "vue-i18n";
    import {useMessage} from "/@/hooks/message";
    import {validateNull} from "/@/utils/validate";
    import {buildSysFieldsFormOption} from "../../utils/form-perm";
    import {DIC_PROP} from "../../support/dict-prop";

    const {proxy} = getCurrentInstance();

    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 data = reactive({
        allFieldPerms: [],
        formFieldPerms: [],
        subFlowParams: [],
    })

    // 定义字典
    onMounted(async () => {
        methods.changeTabPane(props.currSelect)
    })

    const methods = {
        listFormFieldPerms() {
            if (validateNull(data.formFieldPerms)) {
                buildSysFieldsFormOption(data, props, $message)
            }
        },
        onAddItem(paramFrom, isAdd) {
            methods.listFormFieldPerms()
            let value = DIC_PROP.PARAM_VAL_TYPE[0].value;
            if (data.subFlowParams.length > 0) {
                let find = data.subFlowParams.filter(f => f.paramFrom === paramFrom).find(f => !f.varKeyVal || (f.paramValType !== value && !f.targetProp));
                if (find) {
                    if (isAdd) {
                        if (!find.varKeyVal) {
                            $message.warning("请先填写 表单字段")
                            return
                        }
                        if (find.paramValType !== value && !find.targetProp) {
                            if (DIC_PROP.PARAM_FROM[0].value === paramFrom) {
                                $message.warning("请先填写 请求头")
                            } else {
                                $message.warning("请先填写 子流程表单字段")
                            }
                            return
                        }
                    }
                }
                if (!isAdd) data.subFlowParams.splice(0, data.subFlowParams.length);
            }
            let obj = {paramFrom: paramFrom, varKeyVal: null, paramValType: value, targetProp: null};
            data.subFlowParams.push(obj);
            methods.changeSubFlowParams()
        },
        handleSubFlowDelete(index: number, row: any) {
            let splice = data.subFlowParams.filter(f => f.paramFrom === row.paramFrom);
            splice.splice(index, 1);
            if (DIC_PROP.PARAM_FROM[0].value === row.paramFrom) {
                let res = data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[1].value);
                let res2 = data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[2].value);
                splice.push(...res)
                splice.push(...res2)
            } else if (DIC_PROP.PARAM_FROM[1].value === row.paramFrom) {
                let res = data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[0].value);
                let res2 = data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[2].value);
                splice.push(...res)
                splice.push(...res2)
            } else if (DIC_PROP.PARAM_FROM[2].value === row.paramFrom) {
                let res = data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[0].value);
                let res2 = data.subFlowParams.filter(f => f.paramFrom === DIC_PROP.PARAM_FROM[1].value);
                splice.push(...res)
                splice.push(...res2)
            }
            data.subFlowParams = splice
            methods.changeSubFlowParams()
        },
        validateSubFlowData() {
            // 兼容老版本
            let subFlowParams = props.currSelect.attributes.attrs.cdata.attrs.subFlowParams;
            if (!subFlowParams) {
                props.currSelect.attributes.attrs.cdata.attrs.subFlowParams = []
            }
            let startSubMethod = props.currSelect.attributes.attrs.cdata.attrs.startSubMethod;
            if (!startSubMethod) props.currSelect.attributes.attrs.cdata.attrs.startSubMethod = 'POST'
            let restartSubMethod = props.currSelect.attributes.attrs.cdata.attrs.restartSubMethod;
            if (!restartSubMethod) props.currSelect.attributes.attrs.cdata.attrs.restartSubMethod = 'PUT'
            let backParMethod = props.currSelect.attributes.attrs.cdata.attrs.backParMethod;
            if (!backParMethod) props.currSelect.attributes.attrs.cdata.attrs.backParMethod = 'PUT'

            data.subFlowParams = props.currSelect.attributes.attrs.cdata.attrs.subFlowParams
        },
        changeSubFlowParams() {
            props.currSelect.attributes.attrs.cdata.attrs.subFlowParams = data.subFlowParams
        },
        changeTabPane(val) {
            methods.validateSubFlowData()
            methods.listFormFieldPerms()
        }
    }
    // 监听双向绑定
    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>
