<template>
    <ele-page flex-table>
        <page-search @search="reload" />

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #action="{ row }">
                <div>
                    <el-button
                        type="danger"
                        link
                        v-permission="'riskControl:restrictLog:detail'"
                        @click="handleView(row)"
                    >
                        [查看]
                    </el-button>

                    <el-button
                        type="primary"
                        link
                        v-permission="'riskControl:restrictLog:disarm'"
                        @click="handleDisarm(row)"
                    >
                        [解禁]
                    </el-button>
                </div>
            </template>
        </common-table>
        <restrict-history ref="restrictLogRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './components/page-search.vue';
    import restrictHistory from '@/views/riskControl/restrictLog/components/restrict-history.vue';
    import { ElMessageBox, ElMessage } from 'element-plus';

    defineOptions({ name: 'RestrictLog' });

    const { proxy } = getCurrentInstance();

    /** 表格列配置 */
    const columns = ref([
        { label: '用户昵称', prop: 'nickName', align: 'center' },
        { label: '限制类型', prop: 'limitTypeDesc', align: 'center' },
        { label: '限制时间', prop: 'limitTime', align: 'center' },
        { label: '限制ip', prop: 'userIp', align: 'center' },
        {
            columnKey: 'action',
            label: '操作',
            width: 160,
            align: 'center',
            slot: 'action'
        }
    ]);

    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/user/userRequestLimit/pageList',
        fileName: '访问限制日志',
        cacheKey: 'restrictLogTable'
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //编辑页面
    const restrictLogRef = ref(null);
    function handleView(row) {
        restrictLogRef.value?.handleOpen(row.userId);
    }

    //解禁
    function handleDisarm(row) {
        ElMessageBox.confirm('确定解禁吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            console.log(row);
            proxy.$http
                .post('/user/userRequestLimit/disarm', {
                    userId: row.userId,
                    limitType: row.limitType
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        ElMessage.success('解禁成功');
                        reload();
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        });
    }
</script>
