<template>
    <div class="container">
        <div class="Msg">
            <div class="Msg_Tit">
                <div class="Msg_Tit_left">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 }}
                </div>
                <div class="Msg_Tit_right">
                    <image v-for="(item, index) in 5" :key="index"
                        :src="indez < info.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
                        mode="aspectFill"></image>
                </div>
            </div>

            <div class="Msg_con">
                {{ info.comment }}
                <div 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>
                </div>
            </div>

            <div class="Msg_iconList">
                <div class="Msg_iconList_left">
                    <div class="Msg_iconList_leftIcon">
                        <image
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
                            mode="widthFix"></image>
                        {{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
                    </div>

                    <div class="Msg_iconList_leftIcon">
                        <image v-if="info.is_like == 2"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png"
                            mode="widthFix" @click="like(info)"></image>
                        <image v-if="info.is_like == 1"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 }}
                    </div>
                </div>
                <div class="Msg_iconList_right">
                    <div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte">
                        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_del.png"
                            mode="widthFix"></image>
                    </div>
                </div>
            </div>

            <!-- 回复列表 -->
            <div class="reply" v-for="(item, index) in replyList" :key="index">
                <div class="reply_tit">
                    <div class="reply_tit_left">
                        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 }}
                    </div>
                    <div class="reply_tit_right">{{ item.reply_time }}</div>
                </div>
                <div class="reply_con">{{ item.reply_content }}</div>
            </div>
        </div>

        <div class="comment">
            <div class="comment_con">
                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_send.png"
                    mode="aspectFill"></image>
                <input type="text" v-model="reply_content" placeholder="说点什么">

                <button id="send" @click="sendComment">发送</button>
            </div>
        </div>
    </div>
</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('发送评论');
            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 => {
                console.log(res);
                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++
                that.replyList = that.replyList.concat(res.rows)
            })
        },

    },


}
</script>

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