4dkankan_bim/src/components/files/content/Comment.vue

<!--  -->
<template>
    <div class="aside-item right-item">
        <div class="comment-content" ref="slider" v-if="slideHeigt" :style="`height:${slideHeigt - 84}px;`">
            <div class="comment-header">
                <span>{{ $t('tag.comment') }}</span>
            </div>
            <div class="comment-msg">
                <div class="comment-item" v-for="(i, index) in commentList">
                    <div class="avatar-box" :style="i.head ? `background-image:url(${i.head});` : `background-image:url(${emptyAvatar});`"></div>
                    <div class="comment-box">
                        <div class="view-box view-top">
                            <span class="user-name">{{ i.nickName || $t('tag.unkownUser') }}</span>
                            <i class="iconfont icon-comment_delete" v-if="i.userId == userId" @click="delComment({ commentId: i.commentId, index })"></i>
                        </div>
                        <div class="view-box view-middle">
                            <span class="comment-text">{{ i.content }}</span>
                        </div>
                        <div class="view-box view-bottom">
                            <span class="comment-time">{{ i.createTime }}</span>
                            <span class="reply-btn" @click="handlerReply({ parentId: i.commentId, nickName: i.nickName }, index)">{{ $t('tag.reply') }}</span>
                        </div>
                        <div class="reply-content" v-if="i.children">
                            <div class="reply-item" v-for="(j, j_index) in i.children">
                                <div class="avatar-box" :style="j.head ? `background-image:url(${j.head});` : `background-image:url(${emptyAvatar});`"></div>
                                <div class="reply-box">
                                    <div class="view-box view-top">
                                        <span class="user-name">{{ j.nickName || $t('tag.unkownUser') }}</span>
                                        <i class="iconfont icon-comment_delete" v-if="j.userId == userId" @click="delComment({ commentId: j.commentId, index: j_index, parentIndex: index })"></i>
                                    </div>
                                    <div class="view-box view-middle">
                                        <span class="reply-text"
                                            ><span v-if="j.replyId"
                                                >{{ $t('tag.reply') }}<span class="reply-tips">@{{ j.replyNickName || $t('tag.unkownUser') }}</span></span
                                            >
                                            {{ j.content }}</span
                                        >
                                    </div>
                                    <div class="view-box view-bottom">
                                        <span class="reply-time">{{ j.createTime }}</span>
                                        <span class="reply-btn" @click="handlerReply({ parentId: i.commentId, replyId: j.commentId, parentUserId: j.userId, nickName: j.nickName }, j_index)">{{
                                            $t('tag.reply')
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty-box" v-if="!commentList.length">
                <div class="pic"></div>
                <div>{{ $t('tag.noComment') }}</div>
            </div>
        </div>

        <div class="input-content">
            <div class="input-box">
                <input ref="input$" @input="handlerInput" v-model="inputText" :placeholder="placeholderText" type="text" :maxlength="commentMaxLength" />
                <div class="maxlength">
                    <span>{{ inputText.length }}</span
                    >&nbsp;/&nbsp;{{ commentMaxLength }}
                </div>
            </div>
            <div class="send-btn" @click="hanlderSubmit">{{ $t('common.publish') }}</div>
        </div>
    </div>
    <Toast v-if="showTips" :type="tipsType" :content="showTips" :close="() => (showTips = null)" />

    <ui-confirm v-if="delComfirm" :title="$t('common.tips')" :noText="$t('common.cancel')" :okText="$t('common.confirm')" @ok="handlerDel" @no="handlerDel">
        <template #content>
            <div>{{ $t('tag.deletetCommentTips') }}</div>
        </template>
    </ui-confirm>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, inject, nextTick, defineProps } from 'vue'
import Toast from '@/components/dialog/Toast'
import { http } from '@/utils/request'
import avatar from '@/assets/img/avatar@2x.png'
import UiConfirm from '@/components/dialog/Confirm.vue'
import i18n from '@/i18n'
import UiInput from '../../form/Input.vue'
const { t } = i18n.global
const props = defineProps({
    slideHeigt: Number,
})
const commentMaxLength = ref(200)
let canPut = true
const delComfirm = ref(null)
const emptyAvatar = ref(avatar)
const notify = inject('notify')
const emits = defineEmits(['action'])
const input$ = ref(null)
const inputText = ref('')
const placeholderText = ref(t('tag.addComment'))
const replyInfo = ref(null)
const tipsType = ref('warn')
const showTips = ref(null)
const slider = ref(null)

const handlerReply = (data, index) => {
    inputText.value = ''
    let name = data.nickName ? data.nickName : t('tag.unkownUser')
    placeholderText.value = '@' + name
    delete data.nickName
    replyInfo.value = data
}

const handlerInput = () => {
    // console.log(inputText.value.length)
    // if (replyInfo.value && inputText.value.length) {
    //     // console.log(1)
    // }
}
let parentId = null
let commentId = null
const userId = ref(localStorage.getItem('userId') - 0)
const commentList = ref([])
const hanlderSubmit = () => {
    if (inputText.value == '') {
        tipsType.value = 'warn'
        showTips.value = t('tag.addCommentTips')
        return
    }

    let params = {
        markingId: notify.value.id,
        content: inputText.value,
        userId: userId.value,
        parentId: parentId,
    }

    if (replyInfo.value) {
        for (let key in replyInfo.value) {
            if (replyInfo.value[key]) {
                params[key] = replyInfo.value[key]
            }
        }
    }

    if (canPut) {
        canPut = false
        http.post(`smart-site/comment/reply`, params)
            .then(response => {
                if (response.success) {
                    getAllComments()

                    // if (replyInfo.value) {
                    // } else {
                    //     // slider.value.
                    //     slider.value.scrollTo({
                    //         top: 0,
                    //         behavior: 'smooth',
                    //     })
                    // }

                    replyInfo.value = null
                    inputText.value = ''
                    placeholderText.value = t('tag.addComment')
                } else {
                    tipsType.value = 'error'
                    showTips.value = response.message
                }
                canPut = true
            })
            .catch(err => {
                canPut = true
            })
    }
}
const onClose = () => {
    if (window.kankan) {
        if (notify.value.__temp) {
            kankan.TagManager.remove(notify.value.sid)
        }
    } else {
    }
    notify.value = null
}
const getAllComments = () => {
    http.post(`smart-site/comment/tree/all`, { markingId: notify.value.id }).then(response => {
        if (response.success) {
            commentList.value = response.data
        } else {
        }
    })
}
const handlerDel = status => {
    if (status == 'ok') {
        http.post(`smart-site/comment/del`, { commentId: delComfirm.value.commentId }).then(response => {
            if (response.success) {
                // if (!delComfirm.value.parentIndex) {
                //     commentList.value.splice(delComfirm.value.index, 1)
                // } else {
                //     commentList.value[delComfirm.value.parentIndex].children.splice(delComfirm.value.index, 1)
                // }
                getAllComments()
                if (replyInfo.value?.parentId == delComfirm.value.commentId) {
                    replyInfo.value = null
                    inputText.value = ''
                    placeholderText.value = t('tag.addComment')
                }
                tipsType.value = 'success'
                showTips.value = t('common.deleteSuccess')
            } else {
                tipsType.value = 'error'
                showTips.value = response.message
            }
            delComfirm.value = null
        })
    } else {
        delComfirm.value = null
    }
}
const delComment = data => {
    delComfirm.value = data
}
onMounted(() => {
    getAllComments()
    // if (window.kankan) {
    //     window.kankan.TagManager.focusTag(notify.value.sid, {
    //         direction: 'left',
    //         attrs: {
    //             width: 0,
    //             // height: 400,
    //         },
    //     })
    // } else if (window.laser) {
    //     window.laser.then(sdk => {
    //         let pos = notify.value.position
    //         sdk.scene.comeToTag(new THREE.Vector3(pos.x, pos.y, pos.z))
    //     })
    // }
    nextTick(() => {
        input$.value.addEventListener('keydown', function (e) {
            if (e.keyCode == 8) {
                if (replyInfo.value && !inputText.value.length) {
                    replyInfo.value = null
                    placeholderText.value = t('tag.addComment')
                }
            }
        })
    })
})

onBeforeUnmount(() => {})
</script>
<style lang="scss" scoped>
.aside-item {
    padding: 20px 0 20px 20px;
    box-sizing: border-box;
    line-height: 28px;
    flex: 1;
    &.right-item {
        position: relative;
        .input-content {
            width: 100%;
            height: 34px;
            margin: 20px 0;
            padding: 0 20px;
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .input-box {
                width: 226px;
                height: 34px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                opacity: 1;
                border: 1px solid rgba(255, 255, 255, 0.2);
                position: relative;
                input {
                    width: 75%;
                    line-height: 34px;
                    padding: 0 5px;
                    color: #fff;
                }
                .maxlength {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    white-space: nowrap;
                    margin-top: 2px;
                    margin-right: 0px;
                    color: #999;
                    span {
                        color: #0076f6;
                    }
                }
            }
            .send-btn {
                width: 60px;
                height: 34px;
                background: #0076f6;
                border-radius: 4px;
                opacity: 1;
                text-align: center;
                line-height: 34px;
                cursor: pointer;
            }
        }
        .empty-box {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .pic {
                width: 134px;
                height: 134px;
                background: url('~@/assets/img/pic_bg.png') no-repeat;
                background-size: 100% 100%;
            }
            div {
                margin-top: 5px;
                color: #999;
            }
        }
        .comment-content {
            // height: calc(100% - 54px);
            overflow-y: auto;
            padding: 0 20px 0 0;
            position: relative;
            .comment-header {
                font-size: 16px;
                font-weight: bold;
                color: #999;
            }
            .comment-msg {
                .comment-item {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    margin-top: 14px;
                    .avatar-box {
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        margin-right: 6px;
                        background-size: 100% 100%;

                        background-repeat: no-repeat;
                    }
                    .comment-box {
                        flex: 1;
                        > div.view-box {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        }
                        .view-top {
                            .user-name {
                                font-size: 14px;
                                color: #999;
                            }
                            .iconfont {
                                color: #999;
                                font-size: 1em;
                                cursor: pointer;
                            }
                        }
                        .view-middle {
                            .comment-text {
                                word-break: break-all;
                                font-size: 14px;
                                color: #fff;
                            }
                        }
                        .view-bottom {
                            font-size: 12px;
                            .comment-time {
                                color: #999;
                            }
                            .reply-btn {
                                color: #0076f6;
                                cursor: pointer;
                            }
                        }
                        .reply-content {
                            .reply-item {
                                display: flex;
                                align-items: flex-start;
                                justify-content: flex-start;
                                margin-top: 14px;
                                width: 100%;
                                .avatar-box {
                                    width: 24px;
                                    height: 24px;
                                    border-radius: 50%;
                                    margin-right: 6px;
                                    background-size: 100% 100%;

                                    background-repeat: no-repeat;
                                }
                                .reply-box {
                                    flex: 1;
                                    > div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                    }
                                    .view-top {
                                        .user-name {
                                            font-size: 14px;
                                            color: #999;
                                        }
                                        .iconfont {
                                            color: #999;
                                            font-size: 1em;
                                            cursor: pointer;
                                        }
                                    }
                                    .view-middle {
                                        .reply-text {
                                            font-size: 14px;
                                            color: #fff;
                                            word-break: break-all;
                                            .reply-tips {
                                                color: #0076f6;
                                                margin: 0 2px;
                                            }
                                        }
                                    }
                                    .view-bottom {
                                        font-size: 12px;
                                        .reply-time {
                                            color: #999;
                                        }
                                        .reply-btn {
                                            color: #0076f6;
                                            cursor: pointer;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>