<template>
    <div class="complain-item flex mt-2 pr-4">
        <el-avatar
            shape="square"
            :size="40"
            fit="cover"
            :src="item.userType === '1' ? item.imgPath : Logo"
        />

        <div class="flex-1 flex flex-col ml-2">
            <div class="flex justify-between">
                <ele-text size="small" type="info">{{
                    item.userName
                }}</ele-text>
                <ele-text size="small" type="info">{{
                    item.createTime || ''
                }}</ele-text>
            </div>
            <div class="mt-2">
                <ele-text>{{ item.description || '' }}</ele-text>
            </div>
            <!-- 显示图片列表 -->
            <div
                v-if="item.imgList && item.imgList.length"
                class="mt-2 flex flex-wrap"
            >
                <el-image
                    v-for="(img, imgIndex) in item.imgList"
                    :key="imgIndex"
                    style="
                        width: 70px;
                        height: 70px;
                        border-radius: 5px;
                        margin-right: 8px;
                        margin-bottom: 8px;
                    "
                    :src="img"
                    fit="cover"
                    :preview-src-list="item.imgList"
                    :initial-index="imgIndex"
                    preview-teleported
                />
            </div>
        </div>
    </div>
    <el-divider style="margin: 10px 0" />
</template>

<script setup>
    import Logo from '@/assets/logo.png';
    defineProps({
        item: {
            type: Object,
            default: () => ({
                userType: '用户',
                createTime: '',
                description: '',
                fileUrls: []
            })
        }
    });
</script>
