<template>
    <div class="app-container">
        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="roleList">
            <template v-for="(item,index) of columns">
                <el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width" v-if="item.visible" :show-overflow-tooltip="true">
                    <template v-if="item && item.tooltip" #header>
                        <span class="verticalAlign">{{item.label}}</span>
                        <el-tooltip trigger="click" effect="dark" placement="top">
                            <template #content><div style="width: 300px">{{item.tooltip}}</div></template>
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </template>
        </el-table>

        <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"/>
    </div>
</template>

<!--<script setup name="ServerEdit">-->
<!--    import {listServer} from "@/api/disRevenue/server"-->
<!--    const { proxy } = getCurrentInstance()-->
<!--    const route = useRouter()-->

<!--    const roleList = ref([])-->
<!--    const loading = ref(true)-->
<!--    const total = ref(0)-->
<!--    const dateRange = ref([])-->

<!--    // 列显隐信息-->
<!--    const columns = ref([-->
<!--        { label: `时间`, prop: 'roleName', sortable: true, visible: true },-->
<!--        { label: `流量端口`, prop: 'roleKey', visible: true },-->
<!--        { label: `发送流量值（bytes）`, prop: 'jkName', visible: true },-->
<!--    ])-->

<!--    const data = reactive({-->
<!--        queryParams: {-->
<!--            pageNum: 1,-->
<!--            pageSize: 10,-->
<!--            roleName: undefined,-->
<!--            roleKey: undefined,-->
<!--            status: undefined-->
<!--        },-->
<!--    })-->

<!--    const { queryParams } = toRefs(data)-->

<!--    /** 查询角色列表 */-->
<!--    getList()-->
<!--    function getList() {-->
<!--        loading.value = true-->
<!--        listServer(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {-->
<!--            roleList.value = response.rows-->
<!--            total.value = response.total-->
<!--            loading.value = false-->
<!--        })-->
<!--    }-->

<!--    (() => {-->
<!--        const serverId = route.params && route.params.serverId;-->
<!--        console.log('serverId==',route);-->
<!--        if (serverId) {-->
<!--            loading.value = true-->
<!--        }-->
<!--    })()-->
<!--</script>-->

<!--<style scoped>-->
<!--</style>-->

<script setup name="AuthRole">
    import { getAuthRole, updateAuthRole } from "@/api/system/user"

    const route = useRoute()
    const { proxy } = getCurrentInstance()

    const loading = ref(true)
    const total = ref(0)
    const pageNum = ref(1)
    const pageSize = ref(10)
    const roleIds = ref([])
    const roles = ref([])
    const form = ref({
        nickName: undefined,
        userName: undefined,
        userId: undefined
    })

    // 列显隐信息
    const columns = ref([
        { label: `时间`, prop: 'roleName', sortable: true, visible: true },
        { label: `流量端口`, prop: 'roleKey', visible: true },
        { label: `发送流量值（bytes）`, prop: 'jkName', visible: true },
    ])

    /** 单击选中行数据 */
    function clickRow(row) {
        if (checkSelectable(row)) {
            proxy.$refs["roleRef"].toggleRowSelection(row)
        }
    }

    /** 多选框选中数据 */
    function handleSelectionChange(selection) {
        roleIds.value = selection.map(item => item.roleId)
    }

    /** 保存选中的数据编号 */
    function getRowKey(row) {
        return row.roleId
    }

    // 检查角色状态
    function checkSelectable(row) {
        return row.status === "0" ? true : false
    }

    /** 关闭按钮 */
    function close() {
        const obj = { path: "/system/user" }
        proxy.$tab.closeOpenPage(obj)
    }

    /** 提交按钮 */
    function submitForm() {
        const userId = form.value.userId
        const rIds = roleIds.value.join(",")
        updateAuthRole({ userId: userId, roleIds: rIds }).then(response => {
            proxy.$modal.msgSuccess("授权成功")
            close()
        })
    }

    (() => {
        const userId = route.params && route.params.userId
        console.log('route==',route);
        if (userId) {
            loading.value = true
            getAuthRole(userId).then(response => {
                form.value = response.user
                roles.value = response.roles
                total.value = roles.value.length
                nextTick(() => {
                    roles.value.forEach(row => {
                        if (row.flag) {
                            proxy.$refs["roleRef"].toggleRowSelection(row)
                        }
                    })
                })
                loading.value = false
            })
        }
    })()
</script>
