<template>
    <div>
        <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="150px" v-loading="loading" :disabled="operType === 'view'">
            <span style="margin-left: 30px">什么是加减节点？加节点指在流程图里增加其他节点及【参与者】参与审批，加节点分为前加节点、后加节点、加并节点 <br/><span  style="margin-left: 30px">1、前加节点即在当前审批人节点之前增加一个节点及参与者参与审批，该参与者节点审批完成之后会回到当前审批人节点</span>
                 <br/><span  style="margin-left: 30px">2、后加节点即在当前审批人节点之后增加一个节点及参与者参与审批，当前审批人节点审批之后流转到该参与者节点</span><br/><span  style="margin-left: 30px">3、加并节点即与当前审批人节点在同一个节点层级，若当前审批人节点为会签节点，则需所有节点通过。</span>
                若当前审批人节点为或签节点，则一个节点通过即可。若当前审批人节点为依次审批，则按顺序依次通过即可<br/><span  style="margin-left: 30px">4、减节点即减少节点及参与者</span></span>
            <el-row :gutter="24">
                <el-divider> 加节点设置 </el-divider>

                <el-col :span="12" class="mb20">
                    <el-form-item label="基于当前节点加节点" prop="runNodeId">
                        <el-select v-model="form.runNodeId" placeholder="默认当前节点" clearable filterable disabled>
                            <el-option v-for="(item, index) in cascadeDic.runNodeId" :key="index" :label="item.nodeName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="mb20">
                    <el-form-item :label="t('runNode.nodeName')" :rules="{ required: true, message: '节点名称不能为空', trigger: 'blur' }">
                        <el-input v-model="form.nodeJobSigned.nodeName" :placeholder="t('runNode.inputNodeNameTip')"/>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="mb20">
                    <el-form-item label="加节点参与者类型" prop="jobType">
                        <el-radio-group @change="handleRoleType"
                                        v-model="form.jobType">
                            <el-radio v-for="(item, index) in DIC_PROP.JOB_USER_TYPE" :key="index" :label="item.value">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="24" class="mb20" v-if="props.currJob.runNodeVO.nodeApproveMethod === DIC_PROP.NODE_APPROVE_METHOD[2].value
                && props.currJob.nodeJobSigned.nodeSignedType === DIC_PROP.NODE_SIGNATURE_TYPE[2].value">
                    <el-form-item label="依次审批节点顺序" prop="signedType">
                        <el-radio-group v-model="form.nodeJobSigned.signedType">
                            <el-radio v-for="(item, index) in DIC_PROP.NODE_SEQUENTIAL_TYPE" :key="index" :label="item.value">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="mb20" v-if="form.jobType === DIC_PROP.JOB_USER_TYPE[0].value">
                    <el-form-item label="指定参与者" prop="roleId">
                        <el-tooltip content="请输入用户名称进行模糊搜索" placement="top">
                            <el-select v-model="form.roleId" placeholder="请输入用户名称进行模糊搜索" clearable filterable
                                       remote :remote-method="methodsRemote.remoteMethodUser" :reserve-keyword="false">
                                <el-option v-for="(item, index) in dicData.users" :key="index" :label="item.name" :value="item.userId"></el-option>
                            </el-select>
                        </el-tooltip>
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="mb20" v-if="form.jobType === DIC_PROP.JOB_USER_TYPE[1].value">
                    <el-form-item label="指定参与者" prop="roleId">
                        <el-tooltip content="请输入角色名称进行模糊搜索" placement="top">
                            <el-select v-model="form.roleId" placeholder="请输入角色名称进行模糊搜索" clearable filterable
                                       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-form-item>
                </el-col>

                <el-col :span="12" class="mb20" v-if="form.jobType === DIC_PROP.JOB_USER_TYPE[2].value">
                    <el-form-item label="指定参与者" prop="roleId">
                        <el-tooltip content="请输入岗位名称进行模糊搜索" placement="top">
                            <el-select v-model="form.roleId" placeholder="请输入岗位名称进行模糊搜索" clearable filterable
                                       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-form-item>
                </el-col>

                <el-col :span="12" class="mb20" v-if="form.jobType === DIC_PROP.JOB_USER_TYPE[3].value">
                    <el-form-item label="指定参与者" prop="roleId">
                        <el-tooltip content="请输入部门名称进行模糊搜索" placement="top">
                            <el-select v-model="form.roleId" placeholder="请输入部门名称进行模糊搜索" clearable filterable
                                       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-form-item>
                </el-col>

                <el-col :span="12" class="mb20">
                    <el-form-item :label="t('runNode.nodeType')" prop="nodeType">
                        <el-select v-model="form.nodeJobSigned.nodeType" :placeholder="t('runNode.inputNodeTypeTip')" filterable>
                            <el-option v-for="(item, index) in DIC_PROP.NODE_TYPE.slice(1, 3)" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <footer class="el-dialog__footer">
            <span class="dialog-footer">
              <el-button type="primary" @click="handleUpdate" :loading="loading">{{ $t('common.confirmButtonText') }}</el-button>
            </span>
        </footer>
    </div>
</template>

<script setup lang="ts" name="JobSignature">
    import { useI18n } from "vue-i18n"
    import {onCascadeChange, onLoadDicUrl, remoteMethodByKey} from "../convert-name/convert";
    import {useMessage} from "/@/hooks/message";
    import {handleChangeJobType} from "../../index";

    const { t } = useI18n();
    const $message = useMessage();
    const $emit = defineEmits(['onNodeSignature']);
    // 定义变量内容
    const dataFormRef = ref();
    const loading = ref(false);
    const operType = ref(false);

    // 定义字典
    const dicData = reactive({});
    const cascadeDic = reactive({});
    const onLoad = onLoadDicUrl();
    const onCascade = onCascadeChange(cascadeDic, {key: "flowInstId", cascades: ["runNodeId"]});
    onMounted(() => {
        // onLoad(dicData);
    });

    // 提交表单数据
    const form = reactive({
        runNodeId: null,
        jobType: '',
        roleId: null,
        nodeJobSigned: {},
    });

    // 定义校验规则
    const dataRules = ref({
        jobType: [{required: true, message: '参与者类型不能为空', trigger: 'blur'}],
        roleId: [{required: true, message: '参与者不能为空', trigger: 'blur'}],
        // nodeName: [{required: true, message: '节点名称不能为空', trigger: 'blur'}],
    })

    const props = defineProps({
        currJob: {
            default: null,
        }
    });

    function initJobData() {
        Object.assign(form, props.currJob)
        form.roleId = null
        onCascade(form)
    }

    function handleRoleType() {
        handleChangeJobType(dicData, form)
    }

    const methodsRemote = {
        remoteMethodUser(query: string) {
            remoteMethodByKey(query, onLoad, dicData, 'userName', "users")
        },
        remoteMethodRole(query: string) {
            remoteMethodByKey(query, onLoad, dicData, 'roleName', "roles")
        },
        remoteMethodPost(query: string) {
            remoteMethodByKey(query, onLoad, dicData, 'postName', "posts")
        },
        remoteMethodDept(query: string) {
            remoteMethodByKey(query, onLoad, dicData, 'deptName', "depts")
        },
    }

    async function handleUpdate() {
        // TOD 上面两种方式都校验不了
        if (!form.nodeJobSigned.nodeName) {
            $message.error("节点名称不能为空");
            return
        }
        const valid = await dataFormRef.value.validate().catch(() => {});
        if (!valid) return false;

        form.nextUserRole = {jobType: form.jobType, roleId: form.roleId}

        props.currJob.nextUserRole = form.nextUserRole
        props.currJob.nodeJobSigned = form.nodeJobSigned

        loading.value = true
        try {
            $emit('onNodeSignature', props.currJob)
            setTimeout(() => { // 异步异常
                loading.value = false
            }, 3000)
        } catch (e) {
            loading.value = false
        }
    }

    // 监听双向绑定
    watch(
        () => props.currJob.id,
        (val) => {
            initJobData();
        }
    );

    onMounted(() => {
        initJobData();
    });

</script>

<style lang="scss" scoped>
  .el-dialog__footer {
    text-align: center;

    .dialog-footer {
      text-align: center;
    }
  }
</style>
