<!-- 开始节点配置 -->
<template>
    <div class="user-task">
        <a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol">
            <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" />
                    </a-form-item>
                    <a-form-item label="允许加签">
                        <a-switch v-model:checked="node.isAddSign" />
                    </a-form-item>
                    <a-form-item label="允许转移">
                        <a-switch v-model:checked="node.isBatchAudit" />
                    </a-form-item>
                    <a-form-item label="允许批量审核">
                        <a-switch v-model:checked="node.isBatchAudit" />
                    </a-form-item>
                    <a-form-item label="自动同意规则">
                        <a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions">
                        </a-select>
                    </a-form-item>
                    <a-form-item label="无对应处理人">
                        <a-select v-model:value="node.rejectType"
                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]">
                        </a-select>
                    </a-form-item>
                    <a-form-item label="驳回策略">
                        <a-radio-group v-model:value="node.rejectType" name="checkboxgroup"
                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]" />
                    </a-form-item>
                    <a-form-item label="通知策略">
                        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
                            :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
                        :pagination="false">
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="['name', 'type'].includes(column.dataIndex)">
                                <div>
                                    {{ text }}
                                </div>
                            </template>
                            <template v-else-if="['condition'].includes(column.dataIndex)">
                                <div>
                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions">
                                    </a-select>
                                </div>
                            </template>
                            <template v-else-if="column.dataIndex === 'operation'">
                                <delete-outlined two-tone-color='#eb2f96' @click='onDelete(record.name,false)' />
                            </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', 'type'].includes(column.dataIndex)">
                                <div>
                                    {{ text }}
                                </div>
                            </template>
                            <template v-else-if="['condition'].includes(column.dataIndex)">
                                <div>
                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions">
                                    </a-select>
                                </div>
                            </template>
                            <template v-else-if="column.dataIndex === 'operation'">
                                <delete-outlined two-tone-color='#eb2f96' @click='onDelete(record.name,true)' />
                            </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
                        :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="请输入" />
                                </div>
                            </template>
                            <template v-else-if="['isNextAuditor', 'isSign','hidden'].includes(column.dataIndex)">
                                <div>
                                    <a-switch v-model:checked="record[column.dataIndex]" />
                                </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" />
                    </a-form-item>
                    <template v-if="node.isCountersign">
                        <a-form-item label="审核方式">
                            <a-radio-group v-model:value="node.countersignType" name="checkboxgroup"
                                :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" />
                            </a-form-item>
                            <a-form-item label="通过百分比">
                                <a-input-number id="inputNumber" v-model:value="node.countersignAllType" :min="1"
                                    :max="100" />
                            </a-form-item>
                        </template>
                        <a-form-item label="再次审核">
                            <a-radio-group v-model:value="node.countersignAgian" name="checkboxgroup"
                                :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" />
                        </a-form-item>
                        <a-form-item label="通知间隔(时)">
                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageInterval" :min="1" />
                        </a-form-item>
                        <a-form-item label="超时流转时间(时)">
                            <a-input-number id="inputNumber" v-model:value="node.overtimeGo" :min="1" />
                        </a-form-item>
                        <a-form-item label="超时通知策略">
                            <a-checkbox-group v-model:value="node.overtimeMessageType" name="checkboxgroup"
                                :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%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
            <SelectPos ref="posRef"></SelectPos>
        </a-modal>
        <a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
            <SelectRole ref="roleRef"></SelectRole>
        </a-modal>
        <a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
            <SelectAccount ref="accountRef"></SelectAccount>
        </a-modal>
        <a-modal width="60%" v-model:open="data.levelOpen" title="添加角色" @ok="accountHandleOk">
            <AuditorLevel ref="levelRef"></AuditorLevel>
        </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 { getOrgPositonTree, userOrgs } from '@/api/demo/system';
    import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
    const data = reactive({
        activeKey: '1',
        atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
        postOpen: false,
        roleOpen: false,
        accountOpen: false,
        levelOpen: 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: '发起人下级' }],
    })
    const node = reactive({
        id: "edb713be-7a25-44a2-8048-1f9abc638680",
        type: "userTask",
        isAddSign: false,
        isTransfer: false,
        isBatchAudit: false,
        autoAgree: "",
        noAuditor: "1",
        rejectType: "1",
        messageType: "",
        auditUsers: [],
        lookUsers: [],
        formRelations: [],
        formType: "1",
        formCode: "",
        formVerison: "",
        formRelationId: "",
        formUrl: "",
        formAppUrl: "",
        authFields: [],
        name: "审核节点",
        btnlist: [
            {
                code: "agree",
                name: "同意",
                hidden: false,
                isNextAuditor: false,
                isSign: false,
                isSys: true
            },
            {
                code: "disagree",
                name: "驳回",
                hidden: false,
                isNextAuditor: false,
                isSign: false,
                isSys: true
            }
        ],
        isCountersign: false,
        isCountersignAll: false,
        countersignAgian: "1",
        countersignType: "1",
        countersignAllType: 100,
        isOvertimeMessage: false,
        overtimeMessageType: "",
        overtimeMessageStart: 1,
        overtimeMessageInterval: 1,
        overtimeGo: 12,
        isInherit: true,
        isInit: true,

    })
    const props = defineProps({
        element: Object
    })
    watch(
        () => props.element,
        (newVal, oldVal) => {
            node.id = newVal.id
            node.type = newVal.type
        }
    )
    // 岗位
    const posRef = ref < any > ()
    function handlePostClick(isLooker) {
        data.postOpen = true;
        data.isLooker = isLooker;
    }
    function postHandleOk() {
        console.log(posRef.value.getRow())
    }
    // 角色
    const roleRef = ref < any > ()
    function handleRoleClick(isLooker) {
        data.isLooker = isLooker;
        data.roleOpen = true;
    }
    function roleHandleOk() {
        console.log(roleRef.value.getRow())
        var list = roleRef.value.getRow()
        list.forEach(element => {
            if (data.isLooker) {
                // 传阅人员
                node.lookUsers.push({
                    name: element.name,
                    type: '角色',
                    condition: ''
                })
            } else {
                // 审核人员
                node.auditUsers.push({
                    name: element.name,
                    type: '角色',
                    condition: ''
                })
            }
        });
        data.roleOpen = false;
    }
    // 用户
    const accountRef = ref < any > ()
    function handleAccountClick(isLooker) {
        data.isLooker = isLooker;
        data.accountOpen = true;
    }
    function accountHandleOk() {
        console.log(accountRef.value.getRow())
    }
    // 上下级
    const levelRef = ref < any > ()
    function handleLevelClick(isLooker) {
        data.isLooker = isLooker;
        data.levelOpen = true;
    }
    function levelHandleOk() {
        console.log(levelRef.value.getRow())
    }
    // 审核人员设置
    function onDelete(key, isLook) {
        if (isLook) {
            node.lookUsers = node.lookUsers.filter(item => item.name !== key);
        } else {
            node.auditUsers = node.auditUsers.filter(item => item.name !== key);
        }
    }
    // 按钮设置
    function handleAddBtns() {
        node.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
    }
    function handleDeleteBtns(key) {
        node.btnlist = node.btnlist.filter(item => item.code !== key);
    }
    function getForm() {
        return node
    }
    defineExpose({
        getForm
    })

</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>