<template>
    <el-dialog v-model="dialogVisible" title="人员列表" width="500px" :before-close="handleClose">
        <div class="user-list">
            <div v-for="(user, index) in userList" :key="index" class="user-item"
                :class="{ 'success': user.type == 0, 'failure': user.type == 1 }">
                <span class="message">{{ user.mes }}</span>
                <!-- <span>{{ user.type == 1 ? '失败' ? '成功' }}</span> -->
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">关闭并退出</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';

// 定义 props
const props = defineProps({
    userList: {
        type: Array,
        default: () => [],
    },
});

// 定义 emits
const emits = defineEmits(['close']);

// 控制对话框显示
const dialogVisible = ref(true);

// 关闭对话框
const handleClose = () => {
    emits('close');
};
onMounted(() => {

})
</script>

<style scoped lang="scss">
.user-list {
    height: calc(100vh - 400px);
    overflow: auto;

    .user-item {
        margin-top: 2px;
        padding: 10px;
        border-bottom: 1px solid #ccc;

        &.success {
            color: green;
        }

        &.failure {
            color: red;
        }

        .message {
            font-size: 14px;
        }
    }
}

.dialog-footer {
    display: flex;
    justify-content: center;
}
</style>