@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>评论管理 ([[total]]条)</b>
        </div>
        <el-form :inline="true">
            <el-form-item label="">
                <el-input placeholder="请输入视频标题" v-model="form.video_title"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input placeholder="评论会员ID" v-model="form.member_id"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input placeholder="评论会员昵称/姓名、手机号" v-model="form.member_msg"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-date-picker value-format="timestamp"  type="datetimerange" v-model="date" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" class="el-icon-search" @click="search1(1)">搜索</el-button>
            </el-form-item>
            <el-table :data="listData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="created_at" label="评论时间"></el-table-column>
                <el-table-column label="发现标题">
                    <template slot-scope="scope">
                        <span>[[scope.row.video?.video_title]]</span>
                    </template>
                </el-table-column>
                <el-table-column label="发现视频">
                    <template slot-scope="scope">
                        <img :src="scope.row.video?.cover" class="video-style" @click="checkVideo(scope.row)">
                    </template>
                </el-table-column>
                <el-table-column label="评论者">
                    <template slot-scope="scope">
                        <img :src="scope.row.head_img_url" alt="" class="img-style" v-if="scope.row.head_img_url">
                        <div>[[scope.row.nick_name]]</div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="评论内容"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <i class="el-icon-delete-solid" @click="delCommit(scope.row.id)"></i>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <!-- 分页 -->
        <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>
        <el-dialog  title="视频播放" :visible.sync="visibleVideo" >
            <div style="text-align: center">
                <video :src="video_url"  controls="controls"></video>
            </div>
        </el-dialog>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    form: {
                        video_title: "",
                        member_id: "",
                        member_msg: ""
                    },
                    date: [],
                    listData:[],
                    visibleVideo:false,
                    video_url:'',
                    current_page: 1,
                    total: 1,
                    per_page: 1,
                }
            },
            mounted() {
                this.getData(1);
            },
            methods: {
                search1(page) {
                    this.getData(page);
                },
                async getData(page) {
                    let time = null;
                    if(this.date !== null && this.date.length) {
                        time = {
                                start: this.date[0] / 1000 ,
                                end: this.date[1] / 1000 
                            }
                    }
                    let res = await this.$http.post("{!! yzWebFullUrl('plugin.video-share.admin.video-comments.get-comments-category-list') !!}", {
                        page,
                        search:{
                            ...this.form,
                            time
                        }
                    })
                    if(res.data.result){
                        // console.log(res.data,'121213');
                        this.listData =  res.data.data.data;
                        this.current_page = res.data.data.current_page;
                        this.total = res.data.data.total;
                        this.per_page = res.data.data.per_page;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                },
                // 查看视频
                checkVideo(row) {
                    this.video_url = row.video.video_url;
                    this.visibleVideo = true;
                },
                // 删除评论
                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