<template>
    <view class="jy-content mt40 bfff">
        <!-- 更多评论 -->
        <JyGuidance @click="moreComments" :titleStyle="titleStyle" :title="title" icon="right" :path="path" isShowIcon>
        </JyGuidance>
        <!-- 分割线 -->
        <view class="jy-line"></view>
        <!-- 部分评论 -->
        <view class="jy-comment-list">
            <view class="jy-comment-item mb40" v-for="(item, index) in commentList" :key="index">
                <view class="jy-comment-item-header">
                    <image class="jy-comment-item-header-img" :src="item.userPortrait" mode="aspectFill"></image>
                    <view class="jy-comment-item-header-info">
                        {{ item.userNickname }}
                    </view>
                </view>
                <view class="content">{{ item.reviewText }}</view>
            </view>
        </view>
        <JyCommentPopup ref="commentPopup"></JyCommentPopup>
    </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import JyGuidance from '../jy-guidance'
import JyCommentPopup from '../jy-comment-popup'
import { screenHeight } from '@/components/public/Mixins.js'
const prosp = defineProps({

    // 评论列表
    commentList: {
        type: Array,
        default: () => []
    }
})
const title = ref('商品评价（123）')
const path = ref('/pages/index/index')
const titleStyle = {
    'color': '#333333',
    'font-size': '30rpx',
    'font-weight': 600
}
const commentPopup = ref(null)
onMounted(() => {
    // commentPopup.value.open()
})
const moreComments = () => {
    commentPopup.value.open();
}
</script>
<style lang="scss" scoped>
.jy-line {
    width: 100%;
    height: 1px;
    margin: 30rpx 0;
    background-color: #E5E5E5;
}

.jy-comment-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    //头像
    //圆形
    .jy-comment-item-header-img {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
    }

    //名称
    .jy-comment-item-header-info {
        margin-left: 20rpx;
        color: #666666;
        font-size: $uni-font-size-sm;

    }
}

.comment-popup {
    border-radius: 20px 20px 0px 0px;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        padding: 28rpx 0 14rpx 0;
        font-size: $uni-font-size-lg;
    }

    .close {
        position: absolute;
        right: 20rpx;
        top: 30rpx;
        display: inline-block;
        width: 50rpx;
        height: 50rpx;
    }

    //滚动
    .jy-comment-list-content {
        overflow: auto;
    }
}

//超出两行隐藏 显示省略号
.content {
    color: #666666;
    font-size: $uni-font-size-sm;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>