<!-- 开始节点配置 -->
<template>
    <div class="user-task">
        <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
            <a-collapse v-model:activeKey="activeKey" accordion ghost>
                <a-collapse-panel key="1" header="基础配置">
                    <a-form-item label="节点标识">
                        <a-input v-model:value="node.id" placeholder="请输入" readonly />
                    </a-form-item>
                    <a-form-item label="继承表单">
                        <a-switch v-model:checked="node.isInherit" @change="updateWfData('isInherit')" />
                    </a-form-item>
                    <a-form-item label="允许加签">
                        <a-switch v-model:checked="node.isAddSign" @change="updateWfData('isAddSign')" />
                    </a-form-item>
                    <a-form-item label="允许转移">
                        <a-switch v-model:checked="node.isTransfer" @change="updateWfData('isTransfer')" />
                    </a-form-item>
                    <a-form-item label="允许批量审核">
                        <a-switch v-model:checked="node.isBatchAudit" @change="updateWfData('isBatchAudit')" />
                    </a-form-item>
                    <a-form-item label="自动同意规则">
                        <a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions"
                            @change="updateWfData('autoAgree')">
                        </a-select>
                    </a-form-item>
                    <a-form-item label="无对应处理人">
                        <a-select v-model:value="node.noAuditor" @change="updateWfData('noAuditor')"
                            :options="data.noAuditorOptions">
                        </a-select>
                    </a-form-item>
                    <a-form-item label="驳回策略">
                        <a-radio-group v-model:value="node.rejectType" name="checkboxgroup"
                            @change="updateWfData('rejectType')"
                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]" />
                    </a-form-item>
                    <a-form-item label="通知策略">
                        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
                            @change="updateWfData('messageType')"
                            :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
                    </a-form-item>
                </a-collapse-panel>
                <a-collapse-panel key="2" header="审核人员设置">
                    <a-space>
                        <a-radio-group size="small">
                            <a-radio-button value="1" @click="handlePostClick(false)">岗位</a-radio-button>
                            <a-radio-button value="2" @click="handleRoleClick(false)">角色</a-radio-button>
                            <a-radio-button value="3" @click="handleAccountClick(false)">用户</a-radio-button>
                            <a-radio-button value="3" @click="handleLevelClick(false)">上下级</a-radio-button>
                            <a-radio-button value="3" @click="handleNodeAuditorClick(false)">节点执行人</a-radio-button>
                            <a-radio-button value="3" @click="handleAuditorSqlClick(false)">表字段</a-radio-button>
                        </a-radio-group>
                    </a-space>
                    <a-table size="small" :columns="data.userColumns" :data-source="node.auditUsers" bordered
                        @change="updateWfData('auditUsers')" :pagination="false">
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="['name'].includes(column.dataIndex)">
                                <div>
                                    {{ text }}
                                </div>
                            </template>
                            <template v-else-if="[ 'type'].includes(column.dataIndex)">
                                <div>
                                    {{ typeFormat(text) }}
                                </div>
                            </template>
                            <template v-else-if="['condition'].includes(column.dataIndex)">
                                <div>
                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions"
                                        v-if="record.type == '2'">
                                    </a-select>
                                </div>
                            </template>
                            <template v-else-if="column.dataIndex === 'operation'">
                                <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name,false)">
                                    <delete-outlined two-tone-color='#eb2f96' />
                                </a-popconfirm>
                            </template>
                        </template>
                    </a-table>
                </a-collapse-panel>
                <a-collapse-panel key="3" header="传阅人员设置">
                    <a-space>
                        <a-radio-group size="small">
                            <a-radio-button value="1" @click="handlePostClick(true)">岗位</a-radio-button>
                            <a-radio-button value="2" @click="handleRoleClick(true)">角色</a-radio-button>
                            <a-radio-button value="3" @click="handleAccountClick(true)">用户</a-radio-button>
                            <a-radio-button value="3" @click="handleLevelClick(true)">上下级</a-radio-button>
                            <a-radio-button value="3" @click="handleNodeAuditorClick(true)">节点执行人</a-radio-button>
                            <a-radio-button value="3" @click="handleAuditorSqlClick(true)">表字段</a-radio-button>
                        </a-radio-group>
                    </a-space>
                    <a-table size="small" :columns="data.userColumns" :data-source="node.lookUsers" bordered
                        :pagination="false">
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="['name'].includes(column.dataIndex)">
                                <div>
                                    {{ text }}
                                </div>
                            </template>
                            <template v-else-if="[ 'type'].includes(column.dataIndex)">
                                <div>
                                    {{ typeFormat(text) }}
                                </div>
                            </template>
                            <template v-else-if="['condition'].includes(column.dataIndex)">
                                <div>
                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions"
                                        v-if="record.type == '2'" @change="updateWfData('lookUsers')">
                                    </a-select>
                                </div>
                            </template>
                            <template v-else-if="column.dataIndex === 'operation'">
                                <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name,true)">
                                    <delete-outlined two-tone-color='#eb2f96' />
                                </a-popconfirm>
                            </template>
                        </template>
                    </a-table>
                </a-collapse-panel>
                <a-collapse-panel key="4" header="按钮设置">
                    <a-table size="small" :columns="data.columns" :data-source="node.btnlist" bordered
                        @change="updateWfData('btnlist')" :pagination="false">
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="['name', 'code'].includes(column.dataIndex)">
                                <div>
                                    <a-input v-model:value="record[column.dataIndex]" placeholder="请输入" @change="updateWfData('btnlist')"/>
                                </div>
                            </template>
                            <template v-else-if="['isNextAuditor', 'isSign','hidden'].includes(column.dataIndex)">
                                <div>
                                    <a-switch v-model:checked="record[column.dataIndex]" @change="updateWfData('btnlist')"/>
                                </div>
                            </template>
                            <template v-else-if="column.dataIndex === 'operation'">
                                <delete-outlined two-tone-color='#eb2f96' @click='handleDeleteBtns(record.code)' />
                            </template>
                        </template>
                    </a-table>
                    <a-divider plain="true"></a-divider>
                    <a-space>
                        <a-button @click="handleAddBtns" width="100%" type="dashed" danger :icon="h(PlusOutlined)">
                            添加字段</a-button>
                    </a-space>
                </a-collapse-panel>
                <a-collapse-panel key="5" header="会签设置">
                    <a-form-item label="是否会签">
                        <a-switch v-model:checked="node.isCountersign" @change="updateWfData('isCountersign')" />
                    </a-form-item>
                    <template v-if="node.isCountersign">
                        <a-form-item label="审核方式">
                            <a-radio-group v-model:value="node.countersignType" name="checkboxgroup"
                                @change="updateWfData('countersignType')"
                                :options="[{value:'1',label:'并行'},{value:'2',label:'串行'}]" />
                        </a-form-item>
                        <template v-if="node.countersignType == 1">
                            <a-form-item label="是否等待">
                                <a-switch v-model:checked="node.isCountersignAll"
                                    @change="updateWfData('isCountersignAll')" />
                            </a-form-item>
                            <a-form-item label="通过百分比">
                                <a-input-number id="inputNumber" v-model:value="node.countersignAllType" :min="1"
                                    :max="100" @change="updateWfData('countersignAllType')" />
                            </a-form-item>
                        </template>
                        <a-form-item label="再次审核">
                            <a-radio-group v-model:value="node.countersignAgian" name="checkboxgroup"
                                @change="updateWfData('countersignAgian')"
                                :options="[{value:'1',label:'已同意不需要审核'},{value:'2',label:'已同意需要审核'}]" />
                        </a-form-item>
                    </template>
                </a-collapse-panel>
                <a-collapse-panel key="6" header="超时设置">
                    <a-form-item label="超时通知">
                        <a-switch v-model:checked="node.isOvertimeMessage" />
                    </a-form-item>
                    <template v-if="node.isOvertimeMessage">
                        <a-form-item label="第一次通知(时)">
                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageStart" :min="1"
                                @change="updateWfData('overtimeMessageStart')" />
                        </a-form-item>
                        <a-form-item label="通知间隔(时)">
                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageInterval" :min="1"
                                @change="updateWfData('overtimeMessageInterval')" />
                        </a-form-item>
                        <a-form-item label="超时流转时间(时)">
                            <a-input-number id="inputNumber" v-model:value="node.overtimeGo" :min="1"
                                @change="updateWfData('overtimeGo')" />
                        </a-form-item>
                        <a-form-item label="超时通知策略">
                            <a-checkbox-group v-model:value="node.overtimeMessageType" name="checkboxgroup"
                                @change="updateWfData('overtimeMessageType')"
                                :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
                        </a-form-item>
                    </template>
                </a-collapse-panel>
            </a-collapse>

        </a-form>
        <a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
            <SelectPos ref="posRef"></SelectPos>
        </a-modal>
        <a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
            <SelectRole ref="roleRef"></SelectRole>
        </a-modal>
        <a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.accountOpen" title="添加用户"
            @ok="accountHandleOk">
            <SelectAccount ref="accountRef"></SelectAccount>
        </a-modal>
        <a-modal width="40%" v-model:open="data.levelOpen" title="添加上下级" @ok="levelHandleOk">
            <AuditorLevel ref="levelRef"></AuditorLevel>
        </a-modal>
        <a-modal width="40%" v-model:open="data.nodeOpen" title="流程节点选择" @ok="nodeHandleOk">
            <AuditorNode ref="nodeRef" :id="nodeId"></AuditorNode>
        </a-modal>
        <a-modal width="40%" v-model:open="data.auditorSqlOpen"  title="数据表字段选择" @ok="sqlHandleOk">
            <AuditorSql ref="sqlRef" ></AuditorSql>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
    import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
    import { BasicTree, TreeItem } from '@/components/Tree';
    import SelectPos from '@/components/SelectPos/index.vue';
    import SelectRole from '@/components/SelectRole/index.vue';
    import SelectAccount from '@/components/SelectAccount/index.vue';
    import AuditorLevel from './src/auditorLevel.vue'
    import AuditorSql from './src/auditorSql.vue'
    import AuditorNode from './src/auditorNode.vue'
    import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
    import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
    import { getDetail } from '@/api/sys/WFSchemeInfo'
    import { flowStore } from '@/store/modules/flow';
    const flowWfDataStore = flowStore();
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
    const activeKey = ref('1')
    const nodeId = ref('')
    const data = reactive({
        atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
        noAuditorOptions: [{ value: '1', label: '超级管理员处理' }, { value: '2', label: '跳过此步骤' }, { value: '3', label: '不能提交' }],
        postOpen: false,
        roleOpen: false,
        accountOpen: false,
        levelOpen: false,
        nodeOpen: false,
        auditorSqlOpen: false,
        userColumns: [
            { title: '类型', dataIndex: 'type' },
            { title: '名称', dataIndex: 'name' },
            { title: '附加条件', dataIndex: 'condition', width: 130 },
            { title: '操作', dataIndex: 'operation' }
        ],
        columns: [
            {
                title: '名称',
                dataIndex: 'name',
            },
            {
                title: '编码',
                dataIndex: 'code',
            },
            {
                title: '隐藏',
                dataIndex: 'hidden',
            },
            {
                title: '签章',
                dataIndex: 'isSign',
            },
            {
                title: '下一审批人',
                dataIndex: 'isNextAuditor',
            },
            {
                title: '',
                dataIndex: 'operation',
            }

        ],
        isLooker: false,
        conditionOptions: [{ value: '1', label: '同一个部门' }, { value: '2', label: '同一个公司' }, { value: '3', label: '发起人上级' }, { value: '4', label: '发起人下级' }],
        componentDisabled: props.pageType == 'detail' ? true : false

    })
    let node = ref({})
    const props = defineProps({
        element: Object,
        schemeCode: String,
        pageType: String,
        pageView: String,
        taskData: Object
    })

    watch(
        () => props.element,
        (newVal, oldVal) => {
            if (newVal.type == "bpmn:Task") {
                const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
                if (currentNode) {
                    node.value = currentNode
                } else {
                    node.value = newVal
                }
            }
        }
    )
    function updateWfData(key) {
        flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
    }
    function typeFormat(type) {
        switch (type) {
            case '1':
                return '岗位'
            case '2':
                return '角色'
            case '3':
                return '用户'
            case '4':
                return '上下级'
            case '5':
                return '节点'
            case '6':
                return '表字段'
        }
    }
   
    onMounted(() => {
        
    })
    // 岗位
    const posRef = ref < any > ()
    function handlePostClick(isLooker) {
        data.postOpen = true;
        data.isLooker = isLooker;
    }
    function addTableData(selectData) {
        if (data.isLooker) {
            let addData2 = selectData.filter(t => node.value.lookUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
            node.value.lookUsers = node.value.lookUsers.concat(addData2);
            updateWfData('lookUsers')
        }
        else {
            let addData = selectData.filter(t => node.value.auditUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
            node.value.auditUsers = node.value.auditUsers.concat(addData);
            updateWfData('auditUsers')
        }
    }
    function postHandleOk() {
        let selectData = posRef.value.getRow().map(t => {
            return { type: '1', id: t.id, name: t.name }
        });
        addTableData(selectData);
        data.postOpen = false;
    }
    // 角色
    const roleRef = ref < any > ()
    function handleRoleClick(isLooker) {
        data.isLooker = isLooker;
        data.roleOpen = true;
    }
    function roleHandleOk() {
        let selectData = roleRef.value.getRow().map(t => { return { type: '2', id: t.id, name: t.name, condition: '' } });
        addTableData(selectData);
        data.roleOpen = false;
    }
    // 用户
    const accountRef = ref < any > ()
    function handleAccountClick(isLooker) {
        data.isLooker = isLooker;
        data.accountOpen = true;
    }
    function accountHandleOk() {
        let selectData = accountRef.value.getRow().map(t => { return { type: '3', id: t.id, name: t.name } });
        addTableData(selectData);
        data.accountOpen = false;
    }
    // 上下级
    const levelRef = ref < any > ()
    function handleLevelClick(isLooker) {
        data.isLooker = isLooker;
        data.levelOpen = true;
    }
    async function levelHandleOk() {
        const value = await levelRef.value.validateForm()
        let obj = levelRef.value.getForm();
        if (obj.id != '') {
            addTableData([obj]);
            data.levelOpen = false;
        }
    }
    //节点执行人
    const nodeRef = ref < any > ()

    function handleNodeAuditorClick(isLooker) {
        nodeId.value = node.value.id
        data.isLooker = isLooker;
        data.nodeOpen = true
    }
    function nodeHandleOk() {
        nodeRef.value.validateForm()
        let obj = nodeRef.value.getForm()
        if (obj.id != '') {
            addTableData([obj]);
            data.nodeOpen = false;
        }
    }

    // 数据表字段选择
    const sqlRef = ref < any > ()
    function handleAuditorSqlClick(isLooker) {
        data.isLooker = isLooker;
        data.auditorSqlOpen = true;
    }
    function sqlHandleOk() {
        sqlRef.value.validateForm()
        let obj = sqlRef.value.getForm()
        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
            data.auditorSqlOpen = true;
        } else {
            obj.name = `${data.table}【${data.auditorField}】`
            addTableData([data]);
            data.auditorSqlOpen = false;
        }
    }
    // 审核人员设置
    function onDelete(key, isLook) {
        if (isLook) {
            node.value.lookUsers = node.value.lookUsers.filter(item => item.name !== key);
            updateWfData('lookUsers')
        } else {
            node.value.auditUsers = node.value.auditUsers.filter(item => item.name !== key);
            updateWfData('auditUsers')
        }
    }
    // 按钮设置
    function handleAddBtns() {
        node.value.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
        updateWfData('btnlist')
    }
    function handleDeleteBtns(key) {
        node.value.btnlist = node.value.btnlist.filter(item => item.code !== key);
        updateWfData('btnlist')
    }
  
    defineExpose({

    })

</script>

<style lang="less" scoped>
    ::v-deep .ant-select-single {
        width: 100%;
    }

    .site-space-compact-wrapper {
        width: 100%;

        .ant-select {
            width: 100%;
        }
    }

    ::v-deep .ant-tabs {
        padding: 0 !important;
    }

    ::v-deep .ant-space {
        width: 90%;
        margin-left: 5%;

        .ant-space-item {
            width: 100%;

            button {
                width: 100%;
            }
        }
    }

    ::v-deep .ant-table-content {
        margin-top: 10px;
    }

    ::v-deep .ant-collapse-content-box {
        padding: 0;
    }

    ::v-deep .ant-collapse .ant-collapse-content>.ant-collapse-content-box {
        padding: 0;
    }

    ::v-deep .ant-collapse>.ant-collapse-item>.ant-collapse-header {
        padding: 12px 0;
    }
</style>
<style lang="less">
    .full-modal {
        .ant-modal {
            max-width: 100%;
        }

        .ant-modal-content {
            height: calc(80vh);
        }

        .ant-modal-body {
            height: 80%;
        }
    }
</style>