<template>
    <div class="system-add-blackList-container">
        <el-dialog v-model="state.isShowDialog" width="600px" draggable title="操作记录">
            <!-- 表格 -->
            <el-table :data="state.tableData">
                <el-table-column type="index" width="60" label="序号" />
                <el-table-column label="操作时间" show-overflow-tooltip width="170">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneNo" label="操作人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phoneNo" label="操作" show-overflow-tooltip fixed="right" align="center">
                </el-table-column>
                <template #empty>
                    <Empty />
                </template>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog" class="default-button">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="operationRecord">
import { reactive } from 'vue';
import { formatDate } from '/@/utils/formatTime';

// 定义接口来定义对象的类型
interface StateBacklist {
    isShowDialog: boolean;
    tableData: Array<any>;
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog', 'closeDialog'])

// 定义变量内容
const state = reactive<StateBacklist>({
    isShowDialog: false,
    tableData: [],
})
// 打开弹窗
const openDialog = (row: any) => {
    console.log(row)
    state.isShowDialog = true;
    emit('openDialog')
}
// 关闭弹窗
const closeDialog = () => {
    state.isShowDialog = false;
    emit('closeDialog')
};

//暴漏变量和方法
defineExpose({ closeDialog, openDialog })
</script>
