<template>
    <div class="auth-config">
        <a-tabs v-model:activeKey="f_AuthType" type="card" size="small">
            <a-tab-pane key="1" tab="所有成员">
                <a-alert message="权限说明" description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。" type="info" show-icon />
            </a-tab-pane>
            <a-tab-pane key="2" tab="指定成员">
                <a-space>
                    <a-radio-group>
                        <a-radio-button value="1" @click="handlePostClick">岗位</a-radio-button>
                        <a-radio-button value="2" @click="handleRoleClick">角色</a-radio-button>
                        <a-radio-button value="3" @click="handleAccountClick">用户</a-radio-button>
                    </a-radio-group>
                    <a-button danger :size="size">清空</a-button>
                </a-space>
                <a-table size="small" :columns="columns" :data-source="dataSource" bordered :pagination="false">
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="['name', 'type'].includes(column.dataIndex)">
                            <div>
                                {{ text }}
                            </div>
                        </template>
                        <template v-else-if="column.dataIndex === 'operation'">
                            <a-popconfirm v-if="dataSource.length" title="Sure to delete?"
                                @confirm="onDelete(record.key)">
                                <a>Delete</a>
                            </a-popconfirm>
                        </template>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
        <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>
    </div>
</template>

<script lang="ts" setup>
    import { reactive, ref, onMounted, nextTick, unref } from 'vue';
    const f_AuthType = ref("1")
    import { cloneDeep } from 'lodash-es';
    import type { UnwrapRef } from 'vue';
    import SelectPos from '@/components/SelectPos/index.vue';
    import SelectRole from '@/components/SelectRole/index.vue';
    import SelectAccount from '@/components/SelectAccount/index.vue';
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '类型',
            dataIndex: 'type',
        },
        {
            title: '操作',
            dataIndex: 'operation',
        },

    ];
    const dataSource = [
        {
            id: 0,
            name: "王五",
            type: "管理员",
        },
        {
            id: 1,
            name: "王五",
            type: "管理员",
        },
    ]
    const data = reactive({
        postOpen: false,
        roleOpen: false,
        accountOpen: false,
    })
    // 岗位
    const posRef = ref < any > ()

    function handlePostClick() {
        data.postOpen = true;
    }
    function postHandleOk() {
        console.log(roleRef.value.getRow())
    }
    // 角色
    const roleRef = ref < any > ()

    function handleRoleClick() {
        data.roleOpen = true;
    }
    function roleHandleOk() {
        console.log(roleRef.value.getRow())
    }
    // 用户
    const accountRef = ref < any > ()

    function handleAccountClick() {
        data.accountOpen = true;
    }
    function accountHandleOk() {
        console.log(accountRef.value.getRow())
    }
    function getForm() {
        return {
            f_AuthType: f_AuthType.value,
            authData: dataSource.value
        }
    }
    defineExpose({
        getForm
    })

</script>
<style lang="less" scoped>
    .site-space-compact-wrapper {
        width: 100%;

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

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

    ::v-deep .ant-table-content {
        margin-top: 10px;
    }
</style>