<script setup>
import { ref, onMounted, watch } from 'vue';
import { ElMessage,ElMessageBox  } from 'element-plus'
import {ArrowUp} from "@element-plus/icons-vue";
import * as $api from '@/api/question'

const props = defineProps({
    item: Object
})

const emit = defineEmits(['open_nick_dia'])


const dataInfo = ref({...props.item,commentInfo: {}});

watch(
    ()=>props.item,
    (newval)=>{
        console.log(newval)
        dataInfo.value=props.item
    }
)

/* 点赞/吐槽 */
const setLikeHandle = async(type) => {
    const { community_question_id } = dataInfo.value;
    const { data, code } = await $api.apiSetLike({
        op_type: type,
        community_question_id: community_question_id,
        enable: type === 1 ? Number(dataInfo.value.op_type!==1) : Number(dataInfo.value.op_type!==2)
    })
    
    if(code !== 200) return
    
    const { enabled,op_type,like_total,tease_total } = data;
    dataInfo.value.tease_total = tease_total;
    dataInfo.value.like_total = like_total;
    dataInfo.value.op_type = enabled === 0 ? 0 : op_type ;
    ElMessage.success({
        message: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功'
    })
}


// 展开评论
const openCommentHandle = () => {
    dataInfo.value.commentInfo = {
        show: true,
        commentList: [],
        comment_content: '',
        default_type: 1,//默认全部
    }
    getComment(1)
}
const comment_total = ref({});//评论数量
/* 获取评论 */
const getComment = async(type) => {
    dataInfo.value.commentInfo.default_type = type;
    dataInfo.value.commentInfo.commentList = [];
    const {community_question_id} = dataInfo.value
    const params = {
    community_question_id,
    curr_page: 1,
    page_size: 10000
    }
    const { code,data } = type === 1 ? await $api.apiHotComment(params) : await $api.apiMyComment(params);
    
    if(code !== 200) return
    dataInfo.value.commentInfo.commentList = data.list || [];
    if(type===1){//更新列表中展示的全部评论
        const temarr=data.list || []
        dataInfo.value.comment_list=temarr.map(item=>{
            return {
                comment:item.content,
                qa_avatar_url:item.qa_avatar_url
            }
        })
    }
    comment_total.value = {
        hot_num: data.hot_total,
        my_num: data.my_total
    }
}
/* 收起评论 */
const closeComment = () => {
    dataInfo.value.commentInfo = {
        show: false,
        commentList: [],
        comment_content: '',
        default_type: 1,//默认全部
    }
}
/* 校验昵称状态*/
const checkNickHandle = async() => {
    const { data,code } = await $api.apiCheckNick();
    
    if(code !== 200) return
    !data && emit('open_nick_dia')
}
/* 发布留言*/
const publishMessageHandle = async() => {
    const { commentInfo,community_question_id } = dataInfo.value
    const { code } = await $api.apiPublishComment({
    content: commentInfo.comment_content,
    community_question_id
    })
    
    if(code !== 200) return

    ElMessage.success({
        message: '发布成功'
    })
    commentInfo.comment_content = '';

    // 在我的评论tab下刷数据
    // commentInfo.default_type === 2 && getComment(2)
    //刷新评论数据
    getComment(dataInfo.value.commentInfo.default_type)

}

/* 删除留言 */
const delCommentHandle = ({community_question_comment_id},index) => {
    const { commentInfo } = dataInfo.value
    ElMessageBox({
        title:`温馨提醒`,
        message:'评论删除后不可恢复，确认删除吗？',
        center: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText:'确定',
        confirmButtonClass:'self-elmessage-confirm-btn',
        showCancelButton:true,
        cancelButtonText:'取消',
        cancelButtonClass:'self-elmessage-cancel-btn'
    }).then( async()=>{
        const { code } = await $api.apiDelComment({ community_question_comment_id });
        if( code !== 200 ) return
        
        ElMessage.success({
            message: '删除成功'
        })
        commentInfo.commentList.splice(index,1)
    }).catch(()=>{
    })
}


</script>

<template>
    <div class="question-comment-wrapper">
        <view class="commetn-item-wrap" @click="setLikeHandle(1)">
            <img src="@/assets/question/like_act.png" alt="" v-if="dataInfo.op_type===1" class="icon">
            <img src="@/assets/question/like.png" alt="" v-else class="icon">
            <text style="min-width:50px;">{{dataInfo.like_total || ''}}</text>
        </view>
        <view class="commetn-item-wrap" @click="setLikeHandle(2)">
            <img src="@/assets/question/tease_act.png" alt="" v-if="dataInfo.op_type===2" class="icon">
            <img src="@/assets/question/tease.png" alt="" v-else class="icon">
            <text style="min-width:50px;">{{dataInfo.tease_total || ''}}</text>
        </view>
        <view class="commetn-item-wrap" >
            <span 
                @click="closeComment" 
                v-if="dataInfo.commentInfo &&dataInfo.commentInfo.show"
                style="cursor:pointer;color:#F3A52F"
            >收起评论 <el-icon><ArrowUp /></el-icon></span>
            <template v-else>
                <img src="@/assets/question/comment.png" alt="" class="icon"  @click="openCommentHandle">
                <text style="min-width:50px;">{{dataInfo.comment_total || ''}}</text>
            </template>
        </view>
        
    </div>
    <!-- 全部留言模块 -->
    <div class="hot-comment-wrap" v-if="dataInfo.commentInfo&&!dataInfo.commentInfo.show&&dataInfo.comment_list.length>0">
        <template v-for="(item,index) in dataInfo.comment_list" :key="index">
            <img class="avatar" :src="item.qa_avatar_url" alt="">
            <span>{{item.comment}}</span>
        </template>
    </div>
    <!-- 评论区域 -->
    <div class="comment-list-wrapper" v-if="dataInfo.commentInfo &&dataInfo.commentInfo.show">
        <div class="write-cont">
            <el-input
                v-model="dataInfo.commentInfo.comment_content"
                :autosize="{minRows: 2}"
                type="textarea"
                placeholder="发布一条友善的评论"
                class="write-ipt"
            />
            <div class="btn-bottom">
                <el-button type="" link style="font-size: 16px;" @click="closeComment">取消发布</el-button>
                <el-button 
                    type="warning" 
                    round 
                    size="large" 
                    style="width: 120px" 
                    @click="publishMessageHandle" 
                    :disabled="!dataInfo.commentInfo.comment_content"
                >发布</el-button>
            </div>
        </div>

        <div class="list-cont">
            <ul class="list-tab">
                <li :class="dataInfo.commentInfo.default_type===1 && 'act'" @click="getComment(1)">全部评论({{comment_total.hot_num}})</li>
                <li :class="dataInfo.commentInfo.default_type===2 && 'act'" @click="getComment(2)">我的评论({{comment_total.my_num}})</li>
            </ul>
            <ul class="list-ul" v-if="dataInfo.commentInfo.commentList.length">
                <li class="list-item" v-for="(item,index) in dataInfo.commentInfo.commentList" :key="item.community_question_comment_id">
                    <div class="flex">
                        <img class="avatar" :src="item.qa_avatar_url" alt="">
                        <div style="display:flex;align-items:center">{{item.content}}</div>
                        <!-- <span style="color: #333">{{item.user_name}}：</span>
                        {{item.content}} -->
                    </div>
                    <div class="del" v-if="dataInfo.commentInfo.default_type===2" @click="delCommentHandle(item,index)">删除</div>
                </li>
            </ul>
            <div class="nodata" v-else>暂无评论</div>
        </div>
        <!-- <div class="slide-up" @click="closeComment">
            收起评论 <el-icon><ArrowUp /></el-icon>
        </div> -->
    </div>
</template>

<style lang='scss' scoped>
.question-comment-wrapper {
    color: #999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
    margin-top: 20px;
	.commetn-item-wrap {
		display: flex;
		align-items: center;
		.icon {
			width: 22px;
			height: 22px;
			margin-right: 6px;
            cursor: pointer;
		}
	}
}
.comment-list-wrapper {
    position: relative;
    .write-ipt {
        width: 100%;
        margin-bottom: 15px;
        ::v-deep(.el-textarea__inner) {
            border: 1px solid #F3A52F;
            box-shadow: none;
        }
        ::v-deep(.el-textarea__inner:focus) {
            box-shadow: none;
        }
    }
    .btn-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .btn-sty {
            width: 140px;
            height: 40px !important;
            line-height: 40px  !important;
        }
    }
    .list-cont {
        border-top: 1px solid #F2F2F2;
        margin-top: 20px;
        padding: 20px 0;
        color: #999;
        font-size: 16px;
        .list-tab{
            display: flex;
            li {
                margin-right: 30px;
                cursor: pointer;
                &.act { color: #F3A52F; }
            }
        }
        .list-ul {
            margin-top: 30px;
            max-height: 400px;
            overflow-y: auto;
            .list-item {
                margin-bottom: 20px;
                .flex{
                    .avatar{
                        width: 28px;
                        height: 28px;
                        border-radius: 50%;
                        flex-shrink: 0;
                        margin-right: 10px;
                        object-fit: cover;
                    }
                    div{
                        flex: 1;
                    }
                }
            }
            .del {
                color: #f00;
                margin-top: 10px;
                cursor: pointer;
                margin-left: 38px;
            }
        }
    }
}
.nodata {
    text-align: center;
    margin: 40px 0;
}
.slide-up {
    color: #F3A52F;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.hot-comment-wrap{
    background-color: #F9F9F9;
    width: calc(100% + 60px);
    position: relative;
    left: -30px;
    padding: 20px 30px;
    line-height: 40px;
    .avatar{
        width: 28px;
        height: 28px;
        object-fit: cover;
        margin-right: 8px;
        vertical-align: middle;
        border-radius: 50%;
    }
    span{
        font-size: 16px;
        color: #6666;
        margin-right: 30px;
        vertical-align: middle;
    }
}
</style>