<template>
    <view>
        <view class="all_comments">
            <view class="header bg-white" v-if="!isEmpty">
                <view class="title xs">
                    <text class="lighter mr10">商品好评率</text>
                    <text class="primary">{{ percent }}</text>
                </view>
                <view class="tab row">
                    <block v-for="(item, index) in categoryList" :key="index">
                        <view
                            :class="
                                'tab-item xs mr10  br60 mb20 ' +
                                (type == item.id ? 'bg-primary white' : 'common-bg')
                            "
                            :key="index"
                            :data-id="item.id"
                            @tap="onChangType"
                            v-if="item.count"
                        >
                            {{ item.name }}({{ item.count }})
                        </view>
                    </block>
                </view>
            </view>
            <view class="main bg-white">
                <view class="evaluation-list">
                    <view v-for="(item, index) in commentList" :key="index" class="evaluation-item">
                        <view class="user-info row">
                            <image class="avatar mr20" :src="item.avatar"></image>
                            <view class="user-name md mr10">{{ item.nickname }}</view>
                            <u-rate
                                disabled
                                size="26rpx"
                                color="#FF2C3C"
                                v-model="item.goods_comment"
                            ></u-rate>
                        </view>
                        <view class="muted xs mt10">
                            <text class="mr20">{{ item.create_time }}</text>
                            <text v-show="item.spec_value_str">{{ item.spec_value_str }}</text>
                        </view>
                        <view v-if="item.comment" class="dec mt20">{{ item.comment }}</view>
                        <view class="img mt20 row" style="flex-wrap: wrap" v-if="item.image.length">
                            <view
                                v-for="(imgitem, imgindex) in item.image"
                                :key="imgindex"
                                class="img-item mr10 mb20"
                                :data-current="imgitem"
                                :data-uri="item.image"
                                @tap="previewImage"
                            >
                                <custom-image
                                    width="160rpx"
                                    fit="cover"
                                    height="160rpx"
                                    radius="6rpx"
                                    lazy-load
                                    class="goods-img"
                                    :src="imgitem"
                                />
                            </view>
                        </view>
                        <view class="seller-recall-container common-bg mt10" v-if="item.reply">
                            <view class="lighter nr" style="word-wrap: break-word">
                                商家回复：<span class="normal two-txt-cut">{{ item.reply }}</span>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <loading-footer :status="status" slotEmpty>
            <view slot="empty" class="column-center" style="padding-top: 200rpx">
                <image class="img-null" src="/static/images/goods_null.png"></image>
                <text class="lighter">暂无评价</text>
            </view>
        </loading-footer>
    </view>
</template>

<script>
// +----------------------------------------------------------------------
// | likeshop开源商城系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | gitee下载：https://gitee.com/likeshop_gitee
// | github下载：https://github.com/likeshop-github
// | 访问官网：https://www.likeshop.cn
// | 访问社区：https://home.likeshop.cn
// | 访问手册：http://doc.likeshop.cn
// | 微信公众号：likeshop技术社区
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
// |  likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | likeshop团队版权所有并拥有最终解释权
// +----------------------------------------------------------------------
// | author: likeshop.cn.team
// +----------------------------------------------------------------------
import { getCommentList, getCommentCategory } from '../../api/store'
import { loadingType } from '../../utils/type'

export default {
    data() {
        return {
            status: loadingType.LOADING,
            page: 1,
            type: '',
            commentList: [],
            categoryList: [],
            percent: '',
            isEmpty: true
        }
    },

    components: {},
    props: {},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        this.id = options.id
        await this.getCommentCategoryFun()
        this.getCommentListFun()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.getCommentListFun()
    },

    /**
     * 用户点击右上角分享
     */
    // onShareAppMessage: function () {},
    methods: {
        onChangType(e) {
            let { id } = e.currentTarget.dataset
            let { type } = this
            if (id == type) return
            this.type = id
            this.page = 1
            this.commentList = []
            this.status = loadingType.LOADING
            this.$nextTick(() => this.getCommentListFun())
        },

        getCommentCategoryFun() {
            return new Promise((resolve) => {
                getCommentCategory(this.id).then((res) => {
                    let {
                        code,
                        data: { comment, percent }
                    } = res
                    if (code == 1) {
                        this.categoryList = comment
                        this.percent = percent
                        this.type = comment[0].id
                        this.$nextTick(() => resolve())
                    }
                })
            })
        },

        getCommentListFun() {
            let { page, status, commentList, type } = this
            if (status == loadingType.FINISHED) return
            getCommentList({
                id: type,
                goods_id: this.id,
                page_no: page
            }).then((res) => {
                if (res.code == 1) {
                    let { list, more } = res.data
                    commentList.push(...list)
                    this.commentList = commentList
                    this.page++
                    this.$nextTick(() => {
                        if (!more) {
                            this.status = loadingType.FINISHED
                        }

                        if (commentList.length <= 0) {
                            this.status = loadingType.EMPTY
                        } else {
                            console.log('commentList false')
                            this.isEmpty = false
                        }
                    })
                }
            })
        },

        previewImage(e) {
            const { current, uri } = e.currentTarget.dataset
            let urls = uri
            uni.previewImage({
                current,
                // 当前显示图片的http链接
                urls // 需要预览的图片http链接列表
            })
        }
    }
}
</script>
<style lang="scss">
.all_comments {
    padding-top: 20rpx;
    .header {
        .title {
            padding: 24rpx 26rpx;
            border-bottom: var(--border);
        }
        .tab {
            padding: 30rpx 0 10rpx 20rpx;
            flex-wrap: wrap;
            .tab-item {
                padding: 9rpx 29rpx;
            }
        }
    }

    .common-bg {
        background-color: #f5f5f5;
    }

    .main {
        .evaluation-list {
            .evaluation-item {
                padding: 20rpx;
                &:not(:last-of-type) {
                    border-bottom: $-solid-border;
                }
                .avatar {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                }
                .seller-recall-container {
                    padding: 24rpx 20rpx;
                    border-radius: 12rpx;
                }
            }
        }
    }
}
</style>
