@extends('layouts.base')
@section('title', '查看评论')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/video-share/assets/css/comment.css?time='.time())}}">
<div class="find-manage">
    <div id="app">
        <div class="commit-title">
            <b>查看评论 ([[num]])</b>
            <b class="space-li" @click="expendAllCommit">展开子评论</b>
            <b class="space-li" @click="stowAllReplay">收起子评论</b>
            <el-button plain size="small" @click="goBack">返回列表</el-button>
        </div>
        <div class="commit-box">
            <div class="commit-detail" v-for="(item,index) in commit" :key="index">
                <div class="parent-text">
                    <img :src="item.head_img_url" >
                    <div class="right-text">
                        <b class="member-detail">
                            <span class="username">[[item.nick_name]]</span>
                            <i class="el-icon-delete" @click="delCommit(item.id)"></i>
                        </b>
                        <div class="time color-bg">[[item.created_at]]</div>
                        <div class="bottom-text color-bg parent-content">[[item.content]]</div>
                        <div class="stow color-bg" v-if="item.children_comment.length && !item.moreReply" @click="expendMoreReplay(item.id)">
                            <span>展开更多回复</span>
                            <i class="el-icon-arrow-down"></i>
                        </div>
                    </div>
                </div>
                <div class="son-text" v-for="(sonItem , sonIndex) in item.children_comment" :key="sonIndex" v-if="item.moreReply">
                    <img :src="sonItem.head_img_url" >
                    <div class="right-text">
                        <b class="member-detail">
                            <span class="username">[[sonItem.nick_name]]</span>
                            <i class="el-icon-delete" @click="delCommit(sonItem.id)"></i>
                        </b>
                        <div class="time color-bg">[[sonItem.created_at]]</div>
                        <div class="bottom-text color-bg"><span v-if="sonItem.reply_name !== null">回复 <b class="replay-name">[[sonItem.reply_name]]</b></span> &nbsp;<span>[[sonItem.content]]</span></div>
                        <div class="stow color-bg" v-if="sonIndex == item.children_comment.length - 1" @click="stowReplay(item.id)">
                            <span>收起</span>
                            <i class="el-icon-arrow-up"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="vue-page">
            <el-row>
                <el-col align="right">
                <el-pagination layout="prev, pager, next,jumper" @current-change="search1" :total="total" :page-size="per_page" :current-page="current_page" background></el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
    <script>
        let id = "{{ request()-> id }}"
        var vm = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    commit: [],
                    num:0,
                    current_page: 1,
                    total: 1,
                    per_page: 1,
                }
            },
            mounted() {
                this.getData(1);
            },
            methods: {
                async getData(page) {
                    let res = await this.$http.post("{!! yzWebFullUrl('plugin.video-share.admin.video-comments.get-display-comments-list') !!}", {
                        page,
                        id
                    })
                    if(res.data.result){
                        // console.log(res.data,'121213');
                        this.num  = res.data.data.num;
                        this.commit = res.data.data.commentsList.data;
                        this.current_page = res.data.data.commentsList.current_page;
                        this.total = res.data.data.commentsList.total;
                        this.per_page = res.data.data.commentsList.per_page;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                },
                search1(page) {
                    this.getData(page);
                },
                // 展开更多回复
                expendMoreReplay(id) {
                    for(let item of this.commit) {
                        if(item.id == id) {
                            this.$set(item,'moreReply',true);
                            break;
                        }
                    }
                },
                // 收起评论
                stowReplay(id) {
                    for(let item of this.commit) {
                        if(item.id == id) {
                            this.$set(item,'moreReply',false);
                            break;
                        }
                    }
                },
                // 展开子评论
                expendAllCommit() {
                    for(let item of this.commit) {
                        this.$set(item,'moreReply',true);
                    }
                },
                // 收起子评论
                stowAllReplay() {
                    for(let item of this.commit) {
                        this.$set(item,'moreReply',false);
                    }
                },
                // 返回列表
                goBack() {
                    window.history.back();
                },
                // 删除评论
                delCommit(id) {
                    this.$confirm('是否删除该评论?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        }).then(async () => {
                            let res =  await this.$http.post("{!! yzWebFullUrl('plugin.video-share.admin.video-comments.del') !!}", {id})
                            if(res.data.result){
                                this.getData(1);
                                this.$message.success(res.data.msg);
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        }).catch(() => {});
                }
            }
        })
    </script>
    @endsection