<template>
    <div class="main">
        <div class="test-top-box white-bg">
            <h2 class="test-title align-center f20 weight-normal">{{title}}</h2>
            <div class="test-intro line-height26 darkgray-font">
                <p>◇ 本卷共分为{{$route.query.dtnum}}大题{{$route.query.tknum||0}}小题，作答时间为{{$route.query.answertime||0}}分钟，总分{{$route.query.sumscore||0}}分</p>
                <p>◇ 试卷来源：{{$route.query.schoolname||'暂无来源'}}</p>
            </div>
        </div>
        <div class="experience">
            <h3 class="f14 weight-normal line-height28">说说我的感受......</h3>
            <div class="white-bg experience-box">
                <textarea rows="10" :maxlength="alltext" @input="descInput" v-model="desc"></textarea>
                <div class="submit clearfix align-right">
                    <span class="mr10 f14">剩余<font class="yellow-font">{{remnant}}</font>个字</span>
                    <ks-button type="danger" btnstyle="height:35px;padding:5px 20px;" @click="save">提交</ks-button>
                </div>
            </div>
            <h3 class="f14 weight-normal line-height28">网友心得</h3>
            <div class="experience-list">
                <ul class="experience-main">
                    <li class="white-bg reply-li" v-for="item in experienceList" :key="item.feelid">
                        <div class="reply-title clearfix">
                            <span class="fr darkgray-font cursor-pointer iconfont icon-zk ml20" :class="item.openFlag?'up':'down'" @click="getreply(item)"></span>
                            <span class="fr darkgray-font cursor-pointer" @click="reply(item)">回复</span>
                            <span class="red-font mr10">{{item.username}}</span>
                            <span class="darkgray-font f12">{{item.adddate}}</span>
                        </div>
                        <div class="reply-con">
                            {{item.feel_content}}
                        </div>
                        <ul class="reply-box" v-if="item.openFlag">
                            <li v-for="citem in item.replylist" :key="citem.commentid">
                                <div class="reply-inner-title clearfix line-height26">
                                    <span class="fr darkgray-font f12">{{citem.adddate}}</span>
                                    <span>
                                        <i class="reply-icon vertical-align"></i>
                                        <font class="red-font vertical-align mr10">{{citem.username}}</font>回复<font class="darkgray-font ml10">{{item.username}}</font>
                                    </span>
                                </div>
                                <div class="reply-inner-con">
                                    {{citem.comment_content}}
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div v-if="experienceList.length==0" class="empty-block"><span class="empty-block_empty">暂无数据</span></div>
                <div class="align-center">
                    <ks-pagination :total="totalCount" @togglePage="togglePage($event)" :pagesize="10" v-if="totalCount"></ks-pagination>
                </div>
            </div>
        </div>
        <ks-dialog :visible.sync="isShow" title="回复心得" width="500px" align="center" top="20%" isshowclose="1">
            <div class="tips-con">
                <p class="align-left weight-normal line-height28 f14">回复：<font class="red-font">{{feelInfo.username}}</font></p>
                <textarea rows="10" v-model="feelInfo.feeldesc" class="reply-textarea"></textarea>
                <div class="dialog-btn" style="margin-top:20px">
                    <ks-button type="info" class="ml10" @click="isShow=false">取消</ks-button>
                    <ks-button type="danger" class="ml10" @click="replysave">提交回复</ks-button>
                </div>
            </div>
        </ks-dialog>
        <ks-dialog :visible.sync="isShowOpera" title="提示" width="300px" align="center" top="30%" isshowclose="1">
            <div class="tips-con">
                <i class="f50 iconfont vertical-align" :class="operatstatus==1 ? 'green-font icon-chenggong':'red-font icon-shibai'"></i>
                <font class="f16 vertical-align ml10">{{operaTips}}</font>
            </div>
        </ks-dialog>
    </div>
</template>
<script>
import {GetPaperFeelList,SavePaperFeel,SavePaperFeelComment,GetPaperFeelComment} from '@/api/exam'
export default {
    data(){
        return{
            getParameters:{
                paperid:this.$route.query.paperid,
                categoryid:this.$route.query.categoryid,
                page:1,/**当前页码 */
                pagesize:10,/**当前条数 */
            },
            experienceList:[],
            desc:null,
            remnant:255,
            alltext:255,
            totalCount:0,
            title:'',
            isShowOpera:false,
            isShow:false,
            operatstatus:0,
            operaTips:'',
            feelInfo:{},
            replylist:[],
            replyLoad:true
        }
    },
    methods:{
        /**输入内容字数 */
        descInput(){
            if(this.desc){
                var txtVal = this.desc.length;
                this.remnant = 255-txtVal;
            }else{
                this.remnant = 255;
            }
        },
        //从page组件传递过来的当前page
        togglePage(indexPage){
            //打印出当前页数
            this.getParameters.page = indexPage
            this.loadPage()
        },
        /**获取信息 */
        loadPage(){
            GetPaperFeelList(this.getParameters).then(res=>{
                if(res.result){
                    res.data.map(item=>{
                        item.openFlag = false
                        item.replylist = []
                    })
                    this.experienceList = res.data
                }else{
                    this.experienceList = []
                }
                this.title = res.title
            })
        },
        /**发布心得 */
        save(){
            SavePaperFeel({
                apptoken:this.$store.state.apptoken,
                schoolid:this.$store.state.schoolid,
                paperid:this.$route.query.paperid,
                categoryid:this.$route.query.categoryid,
                content:this.desc
            }).then(res=>{
                if(res.result){
                    this.isShowOpera = true
                    this.operatstatus = 1
                    this.operaTips = '发布成功'
                    setTimeout(()=>{
                        this.isShowOpera = false
                        this.desc = null
                        this.loadPage()
                    },1500)
                }else{
                    this.isShowOpera = true
                    this.operatstatus = 0
                    this.operaTips = res.msg
                    setTimeout(()=>{
                        this.isShowOpera = false
                    },1500)
                }
            })
        },
        /**回复 */
        reply(data){
            this.isShow = true
            this.feelInfo = data
        },
        /**回复提交 */
        replysave(){
            SavePaperFeelComment({
                feelid:this.feelInfo.feelid,
                content:this.feelInfo.feeldesc,
                apptoken:this.$store.state.apptoken
            }).then(res=>{
                if(res.result){
                    this.isShow = false
                    this.isShowOpera = true
                    this.operatstatus = 1
                    this.operaTips = '回复成功'
                    setTimeout(()=>{
                        this.isShowOpera = false
                        this.desc = null
                        this.loadPage()
                    },1500)
                }else{
                    this.isShow = false
                    this.isShowOpera = true
                    this.operatstatus = 0
                    this.operaTips = res.msg
                    setTimeout(()=>{
                        this.isShowOpera = false
                    },1500)
                }
                this.replyLoad = true
            })
        },
        /**回复列表 */
        getreply(data){
            if(!data.openFlag){
                data.openFlag = true
            }else{
                data.openFlag = false
            }
            if(this.replyLoad){
                GetPaperFeelComment({
                    feelid:data.feelid
                }).then(res=>{
                    if(res.result){
                        this.experienceList.map(item=>{
                            if(item.feelid == data.feelid){
                                item.replylist = res.data
                            }
                        })
                    }else{
                        this.experienceList.map(item=>{
                            if(item.feelid == data.feelid){
                                item.replylist = []
                            }
                        })
                    }
                    this.replyLoad = false
                })
            }
        },
    },
    mounted(){
        document.title = '心得体会'
        this.loadPage()
    }
}
</script>
<style scoped>
    .experience h3{
        padding: 10px 0;
    }
    .experience-box{
        border:1px solid #ededed;
        border-radius: 10px;
        overflow: hidden;
    }
    .experience-box textarea{
        width: 100%;
        border:none;
        padding:15px;
        box-sizing: border-box;
    }
    .submit{
        padding: 10px 15px;
        background: #f9f9f9;
        border-top: 1px solid #eee;
    }
    .experience-list{
        margin-bottom:40px;
    }
    .experience-list .reply-li{
        margin-bottom: 20px;
        border:1px solid #eee;
    }
    .reply-li .reply-title{
        background: #f9f9f9;
        line-height: 40px;
        padding: 0 15px;
        border-bottom: 1px solid #eee;
    }
    .reply-con{
        padding: 15px;
    }
    .reply-box{
        margin:0 15px;
    }
    .reply-box li:first-child{
        margin-top: 15px;
    }
    .reply-box li{
        padding: 15px;
        border: 1px dashed #ddd;
        background-color: #f9f9f9;
        margin-bottom: 15px;
        border-radius: 5px;
    }
    .reply-icon{
        display:inline-block;
        width: 15px;
        height: 15px;
        background: url(../assets/common/guestbook_icon.png);
        background-size: 100% 100%;
    }
    .reply-inner-title{
        margin-bottom: 10px;
    }
    .reply-textarea{
        width: 100%;
        border: none;
        padding: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 4px;
        background: #f8f8f8;
        box-shadow: inset 0px 0px 25px #efefef;
        margin-top:10px;
        overflow-y: auto;
    }
    .up{
        transform:rotate(180deg);
    }
</style>
