<template>
    <div class="page">
        <div class="report" v-for="(item, index) in list" :key="index">
            <div class="user">
                <van-image :src="item.avatar" width="34" height="34" radius="4" fit="cover" />
                <div class="user-info">
                    <div class="text1">{{ item.name }}</div>
                    <div class="text2">{{ item.createdAt }}</div>
                </div>
            </div>
            <div class="text">{{ item.content }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            reportId: 0,
            list: []
        };
    },
    mounted() {
        if (this.$route.query.reportId) {
            this.reportId = this.$route.query.reportId;
        }
        this.getList();
    },
    methods: {
        getList() {
            this.$http
                .post(
                    '/reportMessage/all',
                    {
                        query: {
                            reportId: this.reportId
                        }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.list = res.content;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    padding: 16px;
}
.report {
    background-color: @bg2;
    padding: 10px 12px;
    border-radius: 8px;
    .user {
        .flex();
        .user-info {
            margin-left: 8px;
            .text1 {
                font-size: 14px;
                color: #ffffff;
                line-height: 20px;
            }
            .text2 {
                font-size: 12px;
                color: #6a6d83;
                line-height: 17px;
            }
        }
    }
    .text {
        font-size: 14px;
        color: #ffffff;
        line-height: 20px;
        margin-top: 10px;
    }
}
.report + .report {
    margin-top: 16px;
}
</style>
