<!-- 编辑弹窗 -->
<template>
    <ele-modal form :width="800" v-model="visible" title="拉黑历史">
        <ele-data-table
            ref="tableRef"
            class="flex-1"
            row-key="id"
            :columns="columns"
            :data="dataList"
        />

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import request from '@/utils/request';

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
    };

    /** 弹窗打开事件 */
    let dataList = ref([]);
    const tableRef = ref();
    const handleOpen = (row) => {
        visible.value = true;
        nextTick(() => {
            fetchPage(row.id);
        });
    };

    function fetchPage(userId) {
        request.get('/user/black/getUserBlackReocrd/' + userId).then((res) => {
            dataList.value = res.data;

            if (res.data.code == 200) {
                dataList.value = res.data.data;
            }
        });
    }

    // 表格数据
    const columns = reactive([
        { label: '拉黑时间', prop: 'createTime', width: 180 },
        { label: '拉黑原因', prop: 'reason' },
        { label: '操作员', prop: 'createName', width: 100 }
    ]);

    defineExpose({
        handleOpen
    });
</script>
