<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%" :show-header="false">
            <el-table-column width="80">
                <template slot-scope="scope">
                    <img :src="getIcon(scope.$index)" alt="icon" style="width: 2.19rem; height: 1.25rem;">
                </template>
            </el-table-column>
            <el-table-column prop="name" width="300">
            </el-table-column>
            <el-table-column prop="date" width="100">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getAllMessagestwo } from '@/api/ManageApi/index';

export default {
    name: 'MessageTable',
    data() {
        return {
            tableData: []
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const response = await getAllMessagestwo();
            if (response && response.code === 200 && response.data) {
                this.tableData = this.processData(response.data);
            }
        },
        processData(data) {
            return data.map(item => ({
                name: item.content,
                date: this.formatDate(item.createTime)
            }));
        },
        getIcon(index) {
            return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
        },
        formatDate(dateString) {
            if (!dateString) {
                // dateString 为空或 undefined，返回空字符串
                return '';
            }
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
                return ''; 
            }
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
};
</script>

<style scoped>
.container {
    width: 30rem;
    height: 14.5rem;
}
</style>