<template>
    <view class="card">
        <view class="card--header flex justify-between col-start">
            <view class="flex">
                <u-image
                    :src="user?.avatar || defaultAvatar"
                    width="80"
                    height="80"
                    border-radius="50%"
                ></u-image>
                <view class="ml-[20rpx]">
                    <view class="text-base normal font-medium">
                        {{ user?.nickname || FieldType.defalutNickname }}
                    </view>
                    <view class="text-muted text-xs mt-[10rpx]">{{ createTime }}</view>
                </view>
            </view>
            <view class="flex">
                <u-rate
                    :count="5"
                    v-model="serviceComment"
                    size="32"
                    inactive-icon="star-fill"
                    activeColor="#FBC02D"
                    disabled
                ></u-rate>
                <!-- <view class="ml-[20rpx] lighter text-xs">
                    <text v-if="serviceComment == 5">非常好</text>
                    <text v-if="serviceComment == 4">好</text>
                    <text v-if="serviceComment == 3">一般</text>
                    <text v-if="serviceComment == 2">差</text>
                    <text v-if="serviceComment == 1">非常差</text>
                </view> -->
            </view>
        </view>

        <view class="card--main">
            <view class="content truncate">
                {{ comment }}
            </view>

            <view class="flex flex-wrap">
                <block v-for="(item3, index) in commentUrlList" :key="index">
                    <view
                        class="mt-[10rpx]"
                        :class="{ 'mr-[10rpx]': (index + 1) % 3 != 0 }"
                        @click.stop="previewImage(index)"
                    >
                        <u-image
                            :src="item3"
                            width="210"
                            height="210"
                            border-radius="15rpx"
                        ></u-image>
                    </view>
                </block>
            </view>

            <view class="reply normal text-base mt-[20rpx] font-medium" v-if="reply">
                商家回复: {{ reply }}
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import defaultAvatar from '@/static/images/user/default_avatar.png'
import { FieldType } from '@/enums/appEnums'
const props = withDefaults(
    defineProps<{
        goodsId: string | number
        comment: string | null
        commentUrlList: string | null
        reply: string | null
        createTime: string | null
        serviceComment: string | number | any
        user: any
    }>(),
    {
        goodsId: '',
        comment: '',
        commentUrlList: '',
        reply: '',
        createTime: '',
        serviceComment: '',
        user: {
            avatar: '',
            nickname: ''
        }
    }
)

// 查看评价图片
const previewImage = (current: number) => {
    uni.previewImage({
        current,
        urls: props.commentUrlList
    })
}
</script>

<style lang="scss" scoped>
.card {
    border-radius: 14rpx;
    background-color: white;
    margin: 0 20rpx 0 20rpx;
    padding: 30rpx;
    &--header {
        width: 100%;
    }
    &--main {
        overflow-x: hidden;
        overflow-y: hidden;
        .content {
            padding: 20rpx 0;
            font-size: 28rpx;
            color: #222222;
        }
        .reply {
            word-break: break-all;
            padding: 24rpx 20rpx;
            background-color: #f6f6f6;
            border-radius: 10rpx;
        }
    }
}
</style>
