<template>
    <div ref="formWrap">
        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign"
            :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol"
            @keypress.enter="handleEnterPress">
            <!-- id  -->

            <!-- <Col v-if="getIfShow2('e21c39e056964ba1af0207c8dfa7b54b')"
                v-show="getIsShow2('e21c39e056964ba1af0207c8dfa7b54b')"
                :span="getColWidth(schemaMap['e21c39e056964ba1af0207c8dfa7b54b'])">
            <template v-if="showComponent(schemaMap['e21c39e056964ba1af0207c8dfa7b54b'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['e21c39e056964ba1af0207c8dfa7b54b'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['e21c39e056964ba1af0207c8dfa7b54b']" />
            </template>
</Col> -->
            <!-- 节点名称  -->

            <!-- <Col v-if="getIfShow2('a7f8acb0021c4df09452039b01ec313d')"
                v-show="getIsShow2('a7f8acb0021c4df09452039b01ec313d')"
                :span="getColWidth(schemaMap['a7f8acb0021c4df09452039b01ec313d'])">
            <template v-if="showComponent(schemaMap['a7f8acb0021c4df09452039b01ec313d'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['a7f8acb0021c4df09452039b01ec313d'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['a7f8acb0021c4df09452039b01ec313d']" />
            </template>
            </Col> -->
            <!-- 流程名称  -->

            <!-- <Col v-if="getIfShow2('7107f6f6ef594c6687b9087e7f823c4d')"
                v-show="getIsShow2('7107f6f6ef594c6687b9087e7f823c4d')"
                :span="getColWidth(schemaMap['7107f6f6ef594c6687b9087e7f823c4d'])">
            <template v-if="showComponent(schemaMap['7107f6f6ef594c6687b9087e7f823c4d'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['7107f6f6ef594c6687b9087e7f823c4d'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['7107f6f6ef594c6687b9087e7f823c4d']" />
            </template>
            </Col> -->
            <!-- 流程默认id  -->

            <!-- <Col v-if="getIfShow2('76db839377a7417f87d9d7540dd1f5f4')"
                v-show="getIsShow2('76db839377a7417f87d9d7540dd1f5f4')"
                :span="getColWidth(schemaMap['76db839377a7417f87d9d7540dd1f5f4'])">
            <template v-if="showComponent(schemaMap['76db839377a7417f87d9d7540dd1f5f4'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['76db839377a7417f87d9d7540dd1f5f4'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['76db839377a7417f87d9d7540dd1f5f4']" />
            </template>
            </Col> -->
            <!-- 根节点实例id  -->

            <!-- <Col v-if="getIfShow2('11acfec9f51b4a45a390840acd00b077')"
                v-show="getIsShow2('11acfec9f51b4a45a390840acd00b077')"
                :span="getColWidth(schemaMap['11acfec9f51b4a45a390840acd00b077'])">
            <template v-if="showComponent(schemaMap['11acfec9f51b4a45a390840acd00b077'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['11acfec9f51b4a45a390840acd00b077'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['11acfec9f51b4a45a390840acd00b077']" />
            </template>
            </Col> -->
            <!-- 流程实例id  -->

            <!-- <Col v-if="getIfShow2('31d294d5c7c845f88d1176ab5a4913e0')"
                v-show="getIsShow2('31d294d5c7c845f88d1176ab5a4913e0')"
                :span="getColWidth(schemaMap['31d294d5c7c845f88d1176ab5a4913e0'])">
            <template v-if="showComponent(schemaMap['31d294d5c7c845f88d1176ab5a4913e0'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['31d294d5c7c845f88d1176ab5a4913e0'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['31d294d5c7c845f88d1176ab5a4913e0']" />
            </template>
            </Col> -->
            <!-- 执行节点id  -->

            <!-- <Col v-if="getIfShow2('f58327d6d3b04aad93eb415b3b8bfc60')"
                v-show="getIsShow2('f58327d6d3b04aad93eb415b3b8bfc60')"
                :span="getColWidth(schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'])">
            <template v-if="showComponent(schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['f58327d6d3b04aad93eb415b3b8bfc60']" />
            </template>
            </Col> -->
            <!-- 节点实例id  -->

            <!-- <Col v-if="getIfShow2('c88aeae388c4488aa459e023cd1a35e8')"
                v-show="getIsShow2('c88aeae388c4488aa459e023cd1a35e8')"
                :span="getColWidth(schemaMap['c88aeae388c4488aa459e023cd1a35e8'])">
            <template v-if="showComponent(schemaMap['c88aeae388c4488aa459e023cd1a35e8'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['c88aeae388c4488aa459e023cd1a35e8'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['c88aeae388c4488aa459e023cd1a35e8']" />
            </template>
            </Col> -->
            <!-- 节点名称  -->

            <!-- <Col v-if="getIfShow2('e444605174364af2b10897b2987d2dec')"
                v-show="getIsShow2('e444605174364af2b10897b2987d2dec')"
                :span="getColWidth(schemaMap['e444605174364af2b10897b2987d2dec'])">
            <template v-if="showComponent(schemaMap['e444605174364af2b10897b2987d2dec'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['e444605174364af2b10897b2987d2dec'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['e444605174364af2b10897b2987d2dec']" />
            </template>
            </Col> -->

            <!--任务id-->
            <!-- <Col v-if="getIfShow2('e111605174364af2b10897b2987d2dec')"
                v-show="getIsShow2('e111605174364af2b10897b2987d2dec')"
                :span="getColWidth(schemaMap['e111605174364af2b10897b2987d2dec'])">
            <template v-if="showComponent(schemaMap['e111605174364af2b10897b2987d2dec'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['e111605174364af2b10897b2987d2dec'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['e111605174364af2b10897b2987d2dec']" />
            </template>
            </Col> -->

            <!--任务名称-->
            <!-- <Col v-if="getIfShow2('e444555174364af2b10897b2987d2dec')"
                v-show="getIsShow2('e444555174364af2b10897b2987d2dec')"
                :span="getColWidth(schemaMap['e444555174364af2b10897b2987d2dec'])">
            <template v-if="showComponent(schemaMap['e444555174364af2b10897b2987d2dec'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['e444555174364af2b10897b2987d2dec'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['e444555174364af2b10897b2987d2dec']" />
            </template>
            </Col> -->

            <!--审核人-->
            <!-- <Col v-if="getIfShow2('c33aeae997a4488aa459e023ae1a21e8')"
                v-show="getIsShow2('c33aeae997a4488aa459e023ae1a21e8')"
                :span="getColWidth(schemaMap['c33aeae997a4488aa459e023ae1a21e8'])">
            <template v-if="showComponent(schemaMap['c33aeae997a4488aa459e023ae1a21e8'])">
                <SimpleFormItem v-model:value="formModel[schemaMap['c33aeae997a4488aa459e023ae1a21e8'].field]"
                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
                    :schema="schemaMap['c33aeae997a4488aa459e023ae1a21e8']" />
            </template>
            </Col> -->

            <!--流程id-->
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>流程实列id</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.processInstId }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>子流程实例id</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.subProcessInstId ? assignee.value.subProcessInstId : '无' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>子流程实例名</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.subProcessInstName ? assignee.value.subProcessInstName : '无' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--任务名称-->
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>节点key</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.taskDefKey }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--任务id-->
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>节点id</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.taskId }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>节点名称</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.taskName }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ant-col ant-form-item-control ant-col-12">
                        <a-button v-if="canClick" v-allAuth="'adminOperation:toDesignatedNode'" @click="flowChange">{{
                            t('将任务流转到')
                            }}</a-button>
                    </div>
                </div>
            </div>
            <!--审批人-->
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>
                            审批人
                            <a-tooltip title="当前节点为会签节点时是加减签，为普通节点时是加减审批人抢令牌">
                                <QuestionCircleOutlined style="margin-left: 4px; cursor: pointer; color: #1890ff;" />
                            </a-tooltip>
                        </label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ users }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ant-col ant-form-item-control ant-col-12">
                        <AddOrSubtractV2 :schemaId="schemaId" :taskId="assignee.value.taskId" v-if="canClick" v-allAuth="'adminOperation:setAssignee'"
                            :lastAddStepUser="assignee.value.assigneeVoList" @change="changedUser">
                        </AddOrSubtractV2>
                    </div>
                </div>
            </div>

            <!-- 创建时间 -->
            <div class="ant-col ant-col-24">
                <div class="ant-row ant-form-item" style="row-gap: 0px;">
                    <div class="ant-col ant-form-item-label" style="width: 120px;">
                        <label>创建时间</label>
                    </div>
                    <div class="ant-col ant-form-item-control">
                        <div class="ant-form-item-control-input">
                            <div class="ant-form-item-control-input-content">
                                <div class="field-readonly">
                                    {{ assignee.value.createTime }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div :style="{ textAlign: getProps.buttonLocation }">
                <slot name="buttonBefore"></slot>
                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
                    {{ t('提交') }}
                </a-button>
                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
                    {{ t('重置') }}
                </a-button>
                <slot name="buttonAfter"></slot>
            </div>
        </Form>
    </div>
    <template>
        <ApproveProcessMonitor v-if="showApproveUser" :taskId="assignee.value.taskId" :userList="assignee.value"
            title="修改审批人" @close="
                (val) => {
                    showApproveUser = false;
                    if (val.length > 0) {
                        assignee.value.assigneeNameStr = val.map((ele) => {
                            return ele.name;
                        }).join(',');
                    }
                }
            " />
    </template>
    <!-- 指派审核人 -->
    <!-- 流程流转 -->
    <opinionDialog ref="opinionDlg" />

</template>

<script>
// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
import { Col, Form, message, Row } from 'ant-design-vue';
import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
import { ref, reactive, inject } from 'vue';
import { CheckCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
import ApproveProcessMonitor from '../../../views/workflow/task/components/flow/ApproveProcessMonitorUser.vue';
import { data } from '../../demo/excel/data';
import opinionDialog from '/@/components/SecondDev/OpinionDialogSelected.vue';
import { getProcessUserNodes, SetChangeProcessNode } from '/@/api/workflow/adminOperation'
import AddOrSubtract from '../../workflow/task/components/flow/AddOrSubtractWork.vue';
import AddOrSubtractV2 from '../../workflow/task/components/flow/AddOrSubtractV2.vue';


const FormItem = Form.Item;

export default {
    components: {
        CheckCircleOutlined,
        QuestionCircleOutlined,
        Form,
        Col,
        SimpleFormItem,
        Row,
        FormItem,
        ApproveProcessMonitor,
        opinionDialog,
        AddOrSubtract,
        AddOrSubtractV2
    },
    mixins: [SimpleFormSetup],
    setup(props, ctx) {
        const ret = SimpleFormSetup.setup(props, ctx);
        const expose = ctx.expose;
        const assignee = ctx.attrs.clickedTaskAssignees
        const currentTaskAssigneeNames = ctx.attrs.currentTaskAssigneeNames
        const isCustom = ref(Boolean)
        const schemaId = ctx.attrs.schemaId;
        const processId = ctx.attrs.processId;
        const canClick = ctx.attrs.canClick
        isCustom.value = ctx.attrs.isCustom;

        const showApproveUser = ref(Boolean);
        showApproveUser.value = false;

        const opinionDlg = ref();
        const selectedInfo = ref();
        const allTaskNodes = inject('taskNode');
        const refreshInfo = inject('refreshApproveInfo', () => {})

        const users = ref('');
        users.value = assignee.value.assigneeVoList.map((ele) => {
            return ele.name + '(' + ele.code + ')';
        }).join('，')

        function approveUser() {
            showApproveUser.value = true;
        }

        function flowChange() {
            opinionDlg.value.toggleDialog({
                action: 'select',
                schemaId: schemaId,
                choseTime: false,
                title: '流程流转',
                taskNode: allTaskNodes,
                callback(args) {
                    selectedInfo.value = args.info
                    submit(args.info)
                }
            });
        }

        function changedUser() {
            refreshInfo()
        }

        function submit(info) {
            const key = info.taskId;
            const userIds = info.selectedList.map((ele) => {
                return ele.id
            }).join(',');
            SetChangeProcessNode({
                'taskId': assignee.value.taskId,
                'targetTaskNodeId': info.taskId,
                'nextTaskUserMap': {
                    [key]: userIds
                },
                "remark": info.opinion
            }).then((res) => {
                if (res) {
                    message.info("流程流转成功！");
                    flowFail();
                } else {
                    message.info("操作失败，请稍后再试！");
                }
            })
        }

        function flowFail() {
            opinionDlg.value.stopLoading();
        }



        return {
            approveUser,
            flowChange,
            processId,
            schemaId,
            showApproveUser,
            isCustom,
            assignee,
            currentTaskAssigneeNames,
            opinionDlg,
            users,
            canClick,
            changedUser,
            ...ret
        };
    },
    computed: {
        // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
        schemaMap() {
            const schemaMap = {};
            this.getSchemas.forEach((schema) => {
                schemaMap[schema.key] = schema;
                if (schema.children) {
                    schema.children.forEach(sChild => {
                        if (sChild.list) {
                            sChild.list.forEach(lChild => {
                                schemaMap[lChild.key] = lChild;
                            });
                        }
                    });
                }
            });
            return schemaMap;
        },
    },
    methods: {
        getIfShow2: function (key) {
            return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
        },

        getIsShow2: function (key) {
            return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
        },

        getTabProps(key) {
            const schema = this.schemaMap[key];
            return {
                size: schema.componentProps.tabSize,
                tabPosition: schema.componentProps.tabPosition,
                type: schema.componentProps.type
            }
        },

        getTdStyle(tdElement) {
            return {
                height: tdElement.height ? tdElement.height + 'px' : '',
                minHeight: (tdElement.height || '42') + 'px',
                overflow: 'hidden',
                padding: '10px'
            }
        },
        // approveUser: function () {
        //     return data.value.approvedUserVisible = true;
        // }
    }
};
</script>
