<template>
    <div class="complain-item flex mt-2 pr-4">
        <el-avatar shape="square" :size="40" fit="cover" :src="displayAvatar" />

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

<script setup>
    import { computed } from 'vue';
    import Logo from '@/assets/logo.png';

    const props = defineProps({
        item: {
            type: Object,
            default: () => ({})
        }
    });

    const displayAvatar = computed(() => {
        // userType: 1-用户 2-商家/管理员
        if (props.item.userType === '1') {
            return (
                props.item.imgPath ||
                props.item.avatar ||
                props.item.userAvatar ||
                Logo
            );
        }
        return Logo;
    });

    const displayImages = computed(() => {
        const imgs =
            props.item.imgList || props.item.fileUrls || props.item.imgs || [];
        if (typeof imgs === 'string') {
            try {
                return JSON.parse(imgs);
            } catch (e) {
                return imgs.split(',').filter((i) => i);
            }
        }
        return Array.isArray(imgs) ? imgs : [];
    });

    const displayContent = computed(() => {
        return props.item.description || props.item.content || '';
    });
</script>
