<template>
    <JyPopup ref="popup" type="bottom" title="评论">
        <view class="sift-list df mtb20 pl20">
            <!-- sift 是否选中 -->
            <view :class="['sift-list-item  df aic', sift == item.value && 'first']" v-for="(item, index) in siftList"
                :key="index" :value="item">
                <image class="sift-list-img" v-if="item.icon" :src="item.icon" />
                <text class="ml10">{{ item.text }}</text>
            </view>
        </view>
        <view class="jy-line"></view>
        <scroll-view class="comment-scroll" @scrolltolower="onScrollToLower" scroll-y scroll-with-animation
            :show-scrollbar="false">
            <view class="commnent-content" v-for="(detail, index) in list" :key="index">
                <view class="comment-item">
                    <view class="f28 df fdc">
                        <view class="df aic jcsb">
                            <view class="portrait df aic fcc mb20">
                                <image class="mr20" :src="detail.portrait" mode="aspectFill" />
                                <view class="name c333">
                                    {{ detail.userName }}
                                </view>
                            </view>
                            <image class="tp" :src="threePoints" />
                        </view>
                        <view class="ml40 bfff content">
                            <!-- 款式日期 -->
                            <view class="df aic jcsb mb10">
                                <view class="c999 "><span>款式：</span>{{ detail.ks }}</view>
                                <view class="c999">{{ detail.time }}</view>
                            </view>
                            <!-- chaoshu 内容 超出3行需要点击查看更多显示 -->
                            <view class="content-text" v-html="detail.content"></view>
                            <view class="image-list" v-if="detail.imageList && detail.imageList.length">
                                <view class="image-item" @click="preview(index)"
                                    v-for="(image, index) in detail.imageList" :key="index">
                                    <image :src="image" mode="aspectFill" />
                                </view>
                            </view>
                            <!-- 点赞 信息 -->
                            <view class="ec-list df aic mt20 fr">
                                <view class="ec-item df aic mr20" v-for="(item, index) in ecList" :key="index">
                                    <image class="tp" :src="item.icon" />
                                    <view class="ml10">{{ item.text }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </JyPopup>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import JyPopup from '@/components/public/jy-popup'
import endorse from '@/static/endorse.png'
import comment from '@/static/comment.png'
import picture from '@/static/picture.png'
import time from '@/static/time.png'
import threePoints from '@/static/three-points.png'
const popup = ref(null)
const onScrollToLower = () => {
    console.log('滚动到底部');
    // 在这里执行你需要的操作，例如加载更多数据
};
const ecList = ref([{
    icon: endorse,
    text: '点赞',
    count: 0
}, {
    icon: comment,
    text: '回复',
    count: 0
}])
const siftList = ref([{
    text: '全部',
    icon: null,
    value: 1
}, {
    text: '好评',
    icon: picture,
    value: 2
}, {
    text: '中评',
    icon: time,
    value: 3
}])
const sift = ref(1)

const emit = defineEmits(['close'])
const open = () => {
    popup.value.open();
}
// 暴露方法
defineExpose({
    open
});
const preview = (index) => {
    uni.previewImage({
        urls: props.detail.imageList,
        current: index
    })
}
const showMore = () => {
    // 显示更多
}
const list = ref([{
    id: 0,
    userId: 1,
    ks: 123,
    userName: '明月天涯',
    portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
    time: '2023年10月30日 14:20',
    content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
    imageList: [
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
    ]
}, {
    id: 0,
    userId: 1,
    ks: 123,
    userName: '明月天涯',
    portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
    time: '2023年10月30日 14:20',
    content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
    imageList: [
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
    ]
}])
</script>

<style lang="scss" scoped>
.sift-list {
    &-img {
        width: 38rpx;
        height: 38rpx;
    }

    .first {
        background: #FF9B27;

        text {
            color: #FFFFFF;
        }
    }

    &-item {
        background: #FFF6EB;
        padding: 6rpx 14rpx;
        border-radius: 4rpx;
        width: 112rpx;
        height: 48rpx;
        margin: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
            font-size: 26rpx;
            color: #666666;
        }
    }

}


.jy-line {
    width: 100%;
    height: 1px;
    background-color: #E5E5E5;
}

.comment-header {
    .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;
    }
}


.commnent-content {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.8);


    .comment-item {
        padding: 18rpx 16rpx;
        background-color: #F4F4F4;

        .content {
            padding: 20rpx 40rpx;
            border-radius: 20rpx;
        }

        .portrait {
            image {
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
            }
        }

        .name {
            margin-bottom: 6rpx;
            font-weight: 600;

            .time {
                font-weight: normal;
                font-size: 24rpx;
                color: rgba(180, 180, 180, 1);
            }
        }

        .image-list {
            margin-top: 12rpx;
            display: flex;
            flex-wrap: wrap;

            .image-item {
                width: 186rpx;
                height: 186rpx;
                margin: 0 12rpx 12rpx 0;

                image {
                    border-radius: 4rpx;
                    width: 186rpx;
                    height: 186rpx;
                }
            }

            .image-item:nth-of-type(3n) {
                margin-right: 0;
            }
        }
    }
}

.tp {
    width: 28rpx;
    height: 28rpx;
}
</style>