<template>
    <view class="container">
        <view class="Msg">
            <view class="Msg_Tit">
                <view class="Msg_Tit_left">
                    <image src="https://static.hshuishang.com/property-img-file/user_ava.png"
                        v-if="!info.user.avatar" mode="aspectFill">
                    </image>
                    <image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
                    {{ info.user.nick_name }}
                </view>
                <view class="Msg_Tit_right">
                    <image v-for="(item, index) in 5" :key="index"
                        :src="index < info.satisfaction ? 'https://static.hshuishang.com/property-img-file/local_start1.png' : 'https://static.hshuishang.com/property-img-file/local_start2.png'"
                        mode="aspectFill"></image>
                </view>
            </view>

            <view class="Msg_con">
                {{ info.comment }}
                <view class="Msg_con_img" v-if="info.image_url">
                    <image v-for="(img, index) in info.image_url.split(',')" :key="index" :src="picUrl + img"
                        mode="aspectFill"></image>
                    <video class="Msg_con_video" v-if="info.video_url" :src="picUrl + info.video_url" controls></video>
                </view>
            </view>

            <view class="Msg_iconList">
                <view class="Msg_iconList_left">
                    <view class="Msg_iconList_leftIcon">
                        <image
                            src="https://static.hshuishang.com/property-img-file/local_review.png"
                            mode="widthFix"></image>
                        {{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
                    </view>

                    <view class="Msg_iconList_leftIcon">
                        <image v-if="info.is_like == 2"
                            src="https://static.hshuishang.com/property-img-file/com_likeIcon.png"
                            mode="widthFix" @click="like(info)"></image>
                        <image v-if="info.is_like == 1"
                            src="https://static.hshuishang.com/property-img-file/com_likeIcon2.png"
                            mode="widthFix" @click="unlike(info)"></image>
                        {{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
                    </view>
                </view>
                <view class="Msg_iconList_right">
                    <view class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte">
                        <image src="https://static.hshuishang.com/property-img-file/local_del.png"
                            mode="widthFix"></image>
                    </view>
                </view>
            </view>

            <!-- 回复列表 -->
            <view class="reply" v-for="(item, index) in replyList" :key="index">
                <view class="reply_tit">
                    <view class="reply_tit_left">
                        <image src="https://static.hshuishang.com/property-img-file/user_ava.png"
                            v-if="!item.user.avatar" mode="aspectFill">
                        </image>
                        <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
                        {{ item.user.nick_name }}
                    </view>
                    <view class="reply_tit_right">{{ item.reply_time }}</view>
                </view>
                <view class="reply_con">{{ item.reply_content }}</view>
            </view>
        </view>

        <view class="comment">
            <view class="comment_con">
                <image src="https://static.hshuishang.com/property-img-file/local_send.png"
                    mode="aspectFill"></image>
                <input type="text" v-model="reply_content" placeholder="说点什么">

                <button id="send" @click="sendComment">发送</button>
            </view>
        </view>
    </view>
</template>

<script>
import {
    request,
    picUrl,
    uniqueByField,
    menuButtonInfo,
    NavgateTo
} from '../../../utils';

import {
    apiArr
} from '../../../api/v2local';


export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            info: "",
            id: "",
            reply_content: "",
            isDelte: false,
            page_num: 1,
            page_size: 20,
            flag: false,
            replyList: []
        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        // this.top = meun.height + meun.top;
        this.localHeight = meun.height;
        this.id = options.id
        this.getCommentInfo()
        this.getUserCommentReply()
    },

    onReachBottom() {
        if (this.flag) {
            this.getUserCommentReply()
        }
    },
    methods: {
        sendComment() {
            // 这里添加发送评论的逻辑
            console.log('发送评论');
            if (!this.reply_content) {
                uni.showToast({
                    title: "请输入评论内容",
                    icon: "none",
                    duration: 2000
                })
                return
            }
            let that = this
            request(apiArr.createUserReply, "POST", {
                evaluation_id: that.info.id,
                reply_content: that.reply_content,
                reply_user_type: 1
            }).then(res => {
                uni.showToast({
                    title: "发送成功",
                    icon: "none",
                    duration: 2000
                })
                this.reply_content = ""
                setTimeout(() => {
                    that.page_size = 1
                    this.getUserCommentReply()
                }, 1000);
            })
        },
        //删除
        deletes() {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定删除？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        request(apiArr.deleteMerChantComment, "POST", {
                            id: that.id,
                        }).then(res => {
                            uni.showToast({
                                title: '删除成功',
                                icon: "none",
                                duration: 2000
                            })
                            setTimeout(() => {
                                NavgateTo("1")
                            }, 2000)
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        getCommentInfo(e) {
            let that = this
            request(apiArr.userCommentInfo, "POST", {
                id: that.id
            }).then(res => {
                res.merchant_evaluation_reply_list = res.merchant_evaluation_reply_list.filter((item) => {
                    return item.status == 2;
                });
                that.info = res
                if (res.user_id == uni.getStorageSync('userId')) {
                    that.isDelte = true
                } else {
                    that.isDelte = false
                }

            })
        },

        like(e) {
            request(apiArr.merChantCommentLike, "POST", {
                evaluation_id: e.id,
            }).then(res => {
                if (this.info.merchant_evaluation_like_list) {
                    this.info.merchant_evaluation_like_list.push({})
                } else {
                    this.info.merchant_evaluation_like_list = []
                    this.info.merchant_evaluation_like_list.push({})
                }
                this.info.is_like = 1
                uni.showToast({
                    title: '点赞成功',
                    icon: "none",
                    duration: 2000
                });
            })
        },
        unlike(e) {
            request(apiArr.merChantCommentUnlike, "POST", {
                evaluation_id: e.id,
            }).then(res => {
                this.info.is_like = 2
                this.info.merchant_evaluation_like_list.pop()
                uni.showToast({
                    icon: "none",
                    title: '取消成功',
                    duration: 2000
                });
            })
        },

        getUserCommentReply() {
            let that = this
            request(apiArr.getUserCommentReply, "POST", {
                evaluation_id: that.id,
                page_num: that.page_num,
                page_size: that.page_size,
            }).then(res => {
                if (res.rows.length == that.page_size) {
                    that.flag = true
                } else {
                    that.flag = false
                }
                that.page_num++
                res.rows = res.rows.filter((item) => {
                    return item.status == 2;
                });
                that.replyList = that.replyList.concat(res.rows)
            })
        },

    },


}
</script>

<style>
@import url("./index.css");
</style>
