<style lang="sass">
@import "./../../sass/page/comment.scss";
</style>

<template>
    <div class="page-bbs-post">
        <section class="v-mod-comment">
            <ul class="list-comment">
                <li class="item-comment">
                    <div class="item-fl">
                        <img :src="postUser.head">
                    </div>
                    <div class="item-fr">
                        <div class="info">
                            <div class="info-fl">
                                <h4>{{postUser.nick}}</h4>
                                <p>{{post.createTime | parseTime}}</p>
                            </div>
                            <div class="info-fr">
                                <span class="icon-zan">{{post.zanCount}}</span>
                            </div>
                        </div>
                        <div class="cont">
                            <p>{{postExtend.text}}</p>
                            <ul class="list-pic ext-list" v-if="postPics.length==1">
                                <li v-for="(pic,picIndex) in postPics" :key="picIndex" class="item-pic" :style="{backgroundImage : 'url('+pic+'?imageview/4/0/w/400/h/400/format/)'}" @click="previewImage(picIndex)"></li>
                            </ul>
                            <ul class="list-pic" v-else>
                                <li v-for="(pic,picIndex) in postPics" :key="picIndex" class="item-pic" :style="{backgroundImage : 'url('+pic+'?imageview/4/0/w/400/h/400/format/)'}" @click="previewImage(picIndex)"></li>
                            </ul>
                        </div>
                        <p class="tip" v-if="post.commentaryTitle">评：{{post.commentaryTitle}}</p>
                    </div>
                </li>
            </ul>
        </section>
        <section class="v-mod-comment mt-16 pb-150">
            <p class="tip-count">回复 <em>{{comments.length}}</em></p>
            <ul class="list-comment">
                <li class="item-comment" v-for="(comment,commentIndex) in comments" :key="commentIndex" v-if="commentIndex<5">
                    <div class="item-fl">
                        <img :src="comment.user.head">
                    </div>
                    <div class="item-fr">
                        <div class="info">
                            <div class="info-fl">
                                <h4>{{comment.user.nick}}</h4>
                                <p>{{comment.createTime | parseTime}}</p>
                            </div>
                            <div class="info-fr">
                                <span class="icon-zan">{{comment.zanCount}}</span>
                                <span class="icon-comment">{{comment.replyCount}}</span>
                            </div>
                        </div>
                        <div class="cont">
                            <p>{{comment.content}}</p>
                            <ul class="list-post">
                                <li v-for="(replie,index) in comment.postReplies" :key="index"><span>{{replie.user.nick}}：</span>{{replie.content}}</li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <a :href="downloadUrl" class="btn-more" v-if="comments.length>5">进入APP查看更多回复</a>
        </section>

        <dlfooter></dlfooter>
        <photoswipe></photoswipe>
    </div>
</template>

<script>
    import post from './js/post.js'
    export default post
</script>