<template>
    <div class="system-add-blackList-container">
        <el-dialog v-model="state.isShowDialog" draggable :title="'（' + state.currentRow.displayName + '）' + '用户列表'">
            <!-- 表格 -->
            <el-table :data="state.tableData">
                <el-table-column type="index" width="60" label="序号" />
                <el-table-column prop="name" label="姓名" show-overflow-tooltip width="120"></el-table-column>
                <el-table-column prop="userName" label="账号" show-overflow-tooltip width="120"></el-table-column>
                <el-table-column prop="orgName" label="所属部门" show-overflow-tooltip width="190"></el-table-column>
                <el-table-column prop="roles" label="角色" show-overflow-tooltip width="300"></el-table-column>
                <el-table-column prop="phoneNo" label="电话号码" show-overflow-tooltip width="130"></el-table-column>
                <el-table-column prop="staffNo" label="工号" show-overflow-tooltip width="80"></el-table-column>
                <el-table-column prop="genderText" label="性别" show-overflow-tooltip width="80"></el-table-column>
                <el-table-column prop="creationTime" 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="state" label="状态" show-overflow-tooltip width="60" fixed="right"></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';
import { getUserListByIds } from '/@/api/system/roles';
import qs from 'qs';

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

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

// 定义变量内容
const state = reactive<StateBacklist>({
    isShowDialog: false,
    currentRow: {},
    tableData: [],
})
// 打开弹窗
const openDialog = (row: any) => {
    state.currentRow = row;
    let req: string = ''
    if (row.accountIds.length >= 1) req = '?' + qs.stringify({ ids: row.accountIds }, { indices: false })
    else req = '?' + 'ids='
    getUserListByIds(req).then((res: any) => {
        state.tableData = res?.result ?? [];
    })
    state.isShowDialog = true;
    emit('openDialog')
}
// 关闭弹窗
const closeDialog = () => {
    state.isShowDialog = false;
    emit('closeDialog')
};

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