<script setup>
import likeIcon from '@/assets/question/like.png'
import likeactIcon from '@/assets/question/like_act.png'
import teaseIcon from '@/assets/question/tease.png'
import teaseactIcon from '@/assets/question/tease_act.png'

import {reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
import {apiSetLike,apiHotComment,apiMyComment,apiPublishComment,apiDelComment} from '@/api/question'
import { ElMessage, ElMessageBox } from 'element-plus'

const router=useRouter()
const props=defineProps({
    videoInfo:null
})

let info=ref(props.videoInfo)

//点赞\吐槽
const handleSetLike=async (type)=>{
    const res=await apiSetLike({
        community_question_id:info.value.id,
        op_type: type,
        enable: type === 1 ? Number(info.value.op_type!==1) : Number(info.value.op_type!==2),
        source:info.value.source
    })
    if(res.code===200){
        const { enabled,op_type,like_total,tease_total } = res.data;
        info.value.tease_total = tease_total;
        info.value.like_total = like_total;
        info.value.op_type = enabled === 0 ? 0 : op_type ;
        ElMessage({
            message: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功',
            type: 'success',
        })
    }
}

let popData=reactive({
    show:false,
    msg:'',
    list:[],
    select_comment_type:1,
    total:0,
    myTotal:0,
})
//点击显示评论弹窗
const handleShowPop=()=>{
    popData.show=true
    popData.select_comment_type=1
    popData.msg=''
    getComment()
}

//获取评论
const getComment=async (flag)=>{
    const params={
        community_question_id:info.value.id,
        curr_page: 1,
        page_size: 10000,
        source:info.value.source
    }
    const { code,data } = popData.select_comment_type===1 ? await apiHotComment(params) : await apiMyComment(params);
    if(code !== 200) return
    popData.list = data.list || [];
    popData.total=data.hot_total
    popData.myTotal=data.my_total

    // 如果flag='refresh' 则获取一次全部留言 更新到列表上面去
    if(flag==='refresh'){
        let res={
            data:{}
        }
        if(popData.select_comment_type===1){
            res.data=data
        }else{
            res=await apiHotComment(params)
        }
        const arr=res.data.list||[]
        info.value.comment_list=arr.map(item=>{
            return {
                comment:item.content,
                qa_avatar_url:item.qa_avatar_url
            }
        })
        info.value.comment_total=arr.length
    }
}

//切换评论类型
const  handleChangeCommentType=(type)=>{
    popData.select_comment_type=type 
    getComment()
}

// 发布评论
const handlePublish=async ()=>{
    if(!popData.msg){
        ElMessage({
            message: '请输入留言内容',
            type: 'warning',
        })
    }

    const { code } = await apiPublishComment({
        content: popData.msg,
        community_question_id: info.value.id,
        source:info.value.source,
    })
    if(code===200){
        ElMessage({
            message: '发布成功',
            type: 'success',
        })
        popData.msg=''
        getComment('refresh')
    }
}

//删除评论
const handleDelMyComment=(item)=>{
    ElMessageBox({
        title:`温馨提示`,
        message:'评论删除后不可恢复，确认删除吗？',
        dangerouslyUseHTMLString: true,
        center: true,
        confirmButtonText:'确定',
        confirmButtonClass:'self-elmessage-confirm-btn',
        showCancelButton:true,
        cancelButtonText:'取消',
        cancelButtonClass:'self-elmessage-cancel-btn'
    }).then(res=>{
        apiDelComment({ community_question_comment_id:item.community_question_comment_id}).then(res=>{
            if(res.code===200){
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                getComment('refresh')
            }
        })
    }).catch(()=>{})
}

//跳转至报告详情
const goReportDetail = (item)=>{
  router.push({
        path:'/report/detail',
        query:{
            reportId:item.report_id,
            frompage:'video'
        }
    })
}
</script>

<template>
    <div class="video-comment-wrap">
        <div class="flex action-wrap">
            <div class="item" @click="handleSetLike(1)">
                <img :src="info.op_type===1?likeactIcon:likeIcon" alt="">
                <span>{{info.like_total>0?info.like_total:''}}</span>
            </div>
            <div class="item" @click="handleSetLike(2)">
                <img :src="info.op_type===2?teaseactIcon:teaseIcon" alt="">
                <span>{{info.tease_total>0?info.tease_total:''}}</span>
            </div>
            <div class="item" @click="handleShowPop">
                <img src="@/assets/question/comment.png" alt="">
                <span>{{info.comment_total>0?info.comment_total:''}}</span>
            </div>
            <div class="item" @click="goReportDetail(info)" v-if="info.report_id">
                <img src="@/assets/video/report-btn.png" alt="">
            </div>
        </div>
        <div class="list-comment-wrap" v-if="info.comment_list.length>0">
            <template v-for="(item,index) in info.comment_list" :key="index">
                <img class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="false" />
				<span>{{item.comment}}</span>
            </template>
        </div>
        <el-dialog 
            v-model="popData.show"
            width="50%" 
            title="评论"
            draggable
        >
            <div class="write-wrap">
                <el-input
                    v-model="popData.msg"
                    :rows="6"
                    type="textarea"
                    placeholder="发布一条友善的评论"
                />
                <div class="clear-float" style="margin-top:20px">
                    <el-button type="info" text @click="popData.show=false">取消发布</el-button>
                    <div class="global-main-btn" style="float:right;width:140px" @click="handlePublish">发布</div>
                </div>
            </div>
            <div class="all-commnet-list-wrap">
                <div class="type-box">
                    <span :class="popData.select_comment_type==1?'act':''" @click="handleChangeCommentType(1)">全部评论<span v-if="popData.total>0">（{{popData.total}}）</span></span>
                    <span :class="popData.select_comment_type==2?'act':''" @click="handleChangeCommentType(2)">我的评论<span v-if="popData.myTotal>0">（{{popData.myTotal}}）</span></span>
                </div>
                <ul>
                    <li class="item" v-for="item in popData.list" :key="item.community_question_comment_id">
                        <div class="flex" style="align-items: center;">
                            <img :src="item.qa_avatar_url" alt="">
                            <div class="flex con">{{item.content}}</div>
                        </div>
                        <span class="del-btn" v-if="popData.select_comment_type==2" @click="handleDelMyComment(item)">删除</span>
                    </li>
                </ul>
                <div class="empty-box" v-if="popData.list.length==0">
                    <img :src="$store.state.globalImgUrls.chartEmpty" alt="">
                    <p>暂无评论</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.video-comment-wrap{
    ::v-deep(.el-dialog__header){
        border-bottom: 1px solid #E9E9E9;
        margin-right: 0;
    }
    ::v-deep(.el-dialog__body){
        padding: 0;
    }
    margin-top: 20px;
    .action-wrap{
        justify-content: space-between;
        .item{
            cursor: pointer;
            img{
                width: 22px;
                height: 22px;
                vertical-align: middle;
            }
            span{
                font-size: 16px;
                color: #999;
                vertical-align: middle;
            }
        }
    }

    .list-comment-wrap{
        margin-top: 22px;
        font-size: 16px;
        color: #666;
        .avatar{
            width: 28px;
            height: 28px;
            object-fit: cover;
            margin-right: 8px;
			vertical-align: middle;
            border-radius: 50%;
        }
        span{
            vertical-align: middle;
            margin-right: 20px;
        }
    }

    .write-wrap{
        padding: 30px;
        border-bottom: 1px solid #E9E9E9;
    }

    .all-commnet-list-wrap{
        max-height: 40vh;
        overflow-y: auto;
        padding: 30px;
        .type-box{
            span{
                font-size: 16px;
                color: #999;
                display: inline-block;
                margin-right: 30px;
                cursor: pointer;
            }
            .act{
                font-size: 18px;
                color: #F3A52F;
            }
        }
        ul{
            margin-top: 30px;
        }
        .item{
            
            margin-bottom: 14px;
            img{
                width: 28px;
                height: 28px;
                object-fit: cover;
                margin-right: 8px;
                flex-shrink: 0;
                border-radius: 50%;
            }
            .con{
                align-items: center;
                font-size: 16px;
                color: #666;
            }
            .del-btn{
                color: #D63535;
                cursor: pointer;
                margin-left: 37px;
                margin-top: 5px;
                display: block;
            }
        }
        .empty-box{
            text-align: center;
            color: #666;
            img{
                width: 200px;
            }
        }
    }
}
</style>

