<style >
.discussBox{
    height: 100%;
    box-sizing: border-box;
}
.discussBox .discussBox-tit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f6f6f6;
}
.discussBox .discussBox-tit .num{
    font-size: 16px;
    font-weight: 600;
}
.discussBox .discussBox-tit .change{
    font-size: 14px;
    color: #409eff !important;
}
.discussBox .jingxuan{
    padding: 10px 20px;
    font-size: 14px;
    color: grey;
    background-color: #f6f6f6;
    font-weight: 600;
}
.discussBox .list .list-item {
    padding: 12px 20px 10px;
    font-size: 15px;
}
.discussBox .list{
    overflow-y: auto;
    height: calc(100% - 102px);
    overflow-x: hidden;
    position: absolute;
    width: 100%;
}
.discussBox .list .list-item .list-item-tit{
    height: 24px;
    padding-right: 3px;
    padding-left: 1px;
    margin-bottom: 4px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.discussBox .list .list-item .list-item-tit div{
    display: flex;
    align-items: center;
}
.discussBox .list .list-item .list-item-tit div img{
    margin-right: 8px;
}
.discussBox .list .list-item>div{
    position: relative;
    border-bottom: 1px solid #f6f6f6;
    padding-bottom: 10px;
}
.discussBox .list .list-item .content{
    padding-left: 33px;
    line-height: 1.6;
    font-size: 12px;
}
.discussBox .list .list-item .footer{
    padding-left: 33px;
    color: #8590a6;
    display: flex;
    align-items: center;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    margin-top: 4px;
}
.discussBox .list .list-item .footer>span{
    margin-right: 15px;
}
.discussBox .list .list-item .footer>span .iconfont {
    padding-right: 3px;
}
.discussBox .list .list-item .footer>span:hover {
    color: #175199;
}
.like{
    color: #76839b;
}
.discussBox .list .list-item .msg-box{
    padding-left: 33px;
}
.discussBox .el-button--primary {
    color: #FFF !important;
    background-color: #409EFF !important;
    border-color: #409EFF  !important;
    border-radius: 0 !important;
}
.discussBox .el-input-group__append{
    border-color: #409EFF  !important;
}
.discussBox .level2{
    margin-top: 10px;
    padding-left: 33px;
}
.discussBox .level2 .huifu{
    margin-right: 8px;
    margin-left: 8px;
    color: #8590a6;
}
.next{
    width: 100%;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 33px;
    border-bottom: 1px solid #f6f6f6;
}
.next2{
    margin-left: 66px;
}
.discussBox .list .list-item:last-child{
    margin-bottom: 20px
}
.discussBox .reply{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    border-top: 1px solid #f6f6f6;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    bottom: 2px;
}
</style>
<template>
    <div class="discussBox">
        <div class="discussBox-tit">
            <div class="num">{{BbsList.length ? BbsList.length + '条' : '暂无'}}评论</div>
            <div class="cp change" @click="sortS = sortS ? '' : 1, GetBbsListByType() "><i class="el-icon-sort"></i>切换为{{sortS === 1 ? '时间' : '点赞'}}排序</div>
        </div>
        <ul class="list">
            <li class="list-item" v-for="(item, index) in BbsList" :key="index">
               <div>
                   <div class="list-item-tit">
                        <div>
                            <img width="24" height="24" :src="item.ImgPhoto" alt="">
                            <span style="font-size:14px;font-family:perfectFont;font-weight:700;">{{item.RejectUserName}}</span>
                        </div>
                        <span class="font-color-info">{{item.TimeStr}}</span>
                    </div>
                    <div class="content">
                        <p>{{item.Content}}</p>
                    </div>
                    <div class="footer">
                        <span class="cp like" @click="AddLike(item)"><i class="iconfont iconzan"></i>赞 {{item.Likes > 0 ? item.Likes : ''}}</span>
                        <span class="cp" @click="setHF(item.Id)"><i class="iconfont iconhuifu"></i>{{hfID === item.Id ? '取消' : ''}}回复</span>
                    </div>
                    <div class="msg-box" v-if="hfID === item.Id">
                        <div style="margin-top: 5px;">
                            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                                <el-button slot="append" type="primary" @click="AddNewBbs(2, item)">发布</el-button>
                            </el-input>
                        </div>
                    </div>
                    <template v-if="item.Childs.length">
                        <template v-for="(c, cindex) in item.Childs" >
                            <div class="next" :key="cindex + item.Id" :class="{'next2': cindex === 0}"></div>
                            <div class="level2" :key="cindex">
                                <div class="list-item-tit">
                                    <div>
                                        <img width="24" height="24" :src="c.ImgPhoto" alt="">
                                        <div>
                                            <span>{{c.CreateByStr}}</span>
                                            <span class="huifu">回复</span>
                                            <span>{{c.RejectUserName}}</span>
                                        </div>
                                    </div>
                                    <span class="font-color-info">{{c.TimeStr}}</span>
                                </div>
                                <div class="content">
                                    <p>{{c.Content}}</p>
                                </div>
                                <div class="footer">
                                    <span class="cp like" @click="AddLike(c)"><i class="iconfont iconzan"></i>赞 {{c.Likes > 0 ? c.Likes : ''}}</span>
                                    <span class="cp" @click="setHF(c.Id)"><i class="iconfont iconhuifu"></i>{{hfID === c.Id ? '取消' : ''}}回复</span>
                                </div>
                                <div class="msg-box" v-if="hfID === c.Id">
                                    <div style="margin-top: 5px;">
                                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                                            <el-button slot="append" type="primary" @click="AddNewBbs(2, item, c)">发布</el-button>
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
               </div>
            </li>
        </ul>
        <div class="reply">
            <div class="msg-box" style="    width: 100%;">
                <div style="margin-top: 5px;">
                    <el-input placeholder="请输入内容" v-model="content" class="input-with-select">
                        <el-button slot="append" type="primary" @click="AddNewBbs()">发布</el-button>
                    </el-input>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        type:{
            type:Number,
            default:1
        }
    },
    data(){
        return {
            sort: true,
            msgBoxShow: false,
            input3: '',
            content: '',
            BbsList:[],
            userInfo: {},
            hfID: -1,
            sortS: 1
        }
    },watch:{
        type: {
            handler(val, oldVal){
                this.GetBbsListByType()
            },
            deep:true
        }
    },
    methods: {
        AddLike(obj){
            let msg = {
                bid: obj.Id,
                photo: this.userInfo.Icon,
                uname: this.userInfo.EmName
            }
            this.apipost("/api/Customer/AddLike", msg, res => {
                if(res.data.resultCode === 1){
                    this.GetBbsListByType()
                    this.$message.success('操作成功')
                }
            });  
        },
        setHF(id){
            this.hfID = this.hfID === -1 ? id : -1
        },
        AddNewBbs(type, obj, cObj){
            let msg = {
                t: this.type,
                content: this.content,
                pid: 0,
                ru: 0,
                run: this.userInfo.EmName
            }
            if (type){
                msg.pid = obj.Id
                msg.ru = obj.Id
                msg.content = this.input3
                msg.run = obj.RejectUserName
            }
            if (cObj){
                msg.pid = obj.Id
                msg.ru = cObj.Id
                msg.run = cObj.CreateByStr
            }
            this.apipost("/api/Customer/AddNewBbs", msg, res => {
                if(res.data.resultCode === 1){
                    this.GetBbsListByType()
                    this.input3 = ''
                    this.hfID = -1
                    this.content = ''
                    this.$message.success('操作成功')
                }
            });  
        },
        GetBbsListByType(){
            this.apipost("/api/Customer/GetBbsListByType", {t: this.type, o: this.sortS,}, res => {
                this.BbsList = res.data.data
            });
        },
    },
    mounted(){
        this.GetBbsListByType()
        this.userInfo = this.getLocalStorage()
    }
}
</script>