@extends('layouts.base')
@section('title', '发现管理')
@section('content')
<style>
.find-manage #app .manage-title{padding:15px 0;padding-bottom:10px;font-size:16px;line-height:30px;border-bottom:solid 1px #eee;color:#333;margin-bottom:25px;}
.el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
.el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
.find-manage #app .el-dialog__body{position:initial;}

#app {
    margin-left: 20px;
}
.replace-sty-box {
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-top: 5px;
}
.replace-sty {
    display: flex;
    justify-content: center;
    background: #29BA9C;
    width: 60px;
    color: white;
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
}

.space-sty {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.find-manage #app .video-sty .el-dialog__body{
    padding: 0;
}

 .video-sty .el-dialog { 
 background: rgba(0, 0, 0, 0);
 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.el-icon-close:before{
    font-size: 50px;
    color: #fff;
}
</style>
<div class="find-manage">
        <div id="app">
            <div class="manage-title">
                <b>发现管理</b>
            </div>
    <template>
        <el-form :inline="true" :model="search_form" ref="search_form">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="视频ID">
                        <el-input v-model="search_form.id" placeholder="请输入视频ID"></el-input>
                    </el-form-item>
                    <el-form-item label="会员ID">
                        <el-input v-model="search_form.uid" placeholder="请输入会员ID"></el-input>
                    </el-form-item>
                    <el-form-item label="会员昵称/姓名/手机号">
                        <el-input v-model="search_form.member" placeholder="请输入会员昵称/姓名/手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="发现标题">
                        <el-input v-model="search_form.title" placeholder="请输入发现标题"></el-input>
                    </el-form-item>
                    <el-form-item label="商品ID">
                        <el-input v-model="search_form.goods_id" placeholder="请输入商品ID"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker v-model="search_form.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                            <template>
                                <el-select v-model="seleceTime" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                    </el-form-item>
                    <el-form-item>
                        <template>
                            <el-select v-model="search_form.category_id" placeholder="请选择">
                                <el-option
                                        v-for="item in categorys"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item style="text-align:right;">
                        <a href="#">
                            <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                        </a>
                        <a href="#">
                            <!-- <el-button type="default" @click="outExcel()">导出EXCEL</el-button> -->
                        </a>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template>
        <!-- 表格start -->
        <el-table :data="list" style="width: 100%" v-loading="search_loading">
            <el-table-column prop="id" label="视频ID" align="center"></el-table-column>

            <el-table-column
                    align="center"
                    label="会员">
                <template slot-scope="scope">
                    <template v-if="scope.row.member">
                        <img :src="scope.row.member.avatar_image" style="width:30px;height:30px;padding:1px;border:1px solid #ccc;">
                        <div>[[scope.row.member.nickname]]</div>
                    </template>
                    <template v-else-if="!scope.row.member">
                        会员已被删除
                    </template>
                </template>
            </el-table-column>

            <el-table-column prop="title" label="发现标题" align="center">
                <template slot-scope="scope">
                    <el-popover class="item" placement="top" effect="light">
                        <div style="text-align:center;">
                            <div style="text-align:left;margin-bottom:10px;font-weight:900">修改视频标题</div>
                            <el-input v-model="change_title" style="width:400px" size="small"></el-input>
                            <el-button size="small" @click="titleChange(scope)">确定</el-button>
                        </div>
                        <a slot="reference">
                            <i class="el-icon-edit edit-i" title="点击编辑" @click="editTitle(scope.$index,'title')"></i>
                        </a>
                    </el-popover>
                    [[scope.row.title]]
                </template>
            </el-table-column>

            <el-table-column prop="cover" label="发现视频" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.cover" @click="video(scope.row.id)" style="width:60px;height:60px;padding:1px;border:1px solid #ccc;margin-bottom:5px">
                    <div class="replace-sty-box">
                        <span class="replace-sty" @click="replaceVideo(scope.row)">更换</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="视频分类" align="center">
                <template slot-scope="scope" >
                    <el-select v-model="scope.row.category_id"  placeholder="请选择" @change="changeCate(scope.row.category_id,scope.row.id)">
                        <el-option
                                v-for="item in categorys"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="关联商品">
                <template slot-scope="scope">
                    <template v-if="scope.row.goods">
                        <div class="space-sty" :title="scope.row.goods.title">[[scope.row.goods.title]]</div>
                    </template>
                    <template v-else-if="!scope.row.goods && !scope.row.goods_id">
                        未关联商品
                    </template>
                    <template v-else-if="!scope.row.goods && scope.row.goods_id">
                        商品已被删除
                    </template>
                    <div>
                        <el-button v-if="scope.row.mid_ground_video_id==0" @click="goodsShow(scope.row.id)">更换</el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="分享次数/点赞次数/评论数量"  align="center">
                <template slot-scope="scope">
                        <span>[[scope.row.share_num]]</span>
                        <span>/</span>
                        <span>[[scope.row.like_num]]</span>
                        <span>/</span>
                        <span>[[scope.row.comment_sum]]</span>
                </template>
            </el-table-column>

            <el-table-column prop="order_price" label="转化订单金额(元)"  align="center"></el-table-column>
            <el-table-column prop="amount_total" label="奖励金额(元)"  align="center"></el-table-column>
            <el-table-column label="" align="center" width="110px">
                    <template slot-scope="scope">
                        <a :href="'{{ yzWebFullUrl('plugin.video-share.admin.bonus.index', array('search[vid]' => '',)) }}'+[[scope.row.id]]">
                            <el-button size="mini">分红记录</el-button>
                        </a>
                    </template>
            </el-table-column>
            <el-table-column label="显示" prop="number" align="center">
                     <template slot-scope="scope">
                        <el-switch
                        v-model="scope.row.status"
                        :active-value="1" :inactive-value="0"
                        active-color="#13ce66"
                        @change="Switch(scope,list)">
                        </el-switch>
                    </template>

            </el-table-column>
            <el-table-column label="推荐" align="center">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.is_recommend"
                            :active-value="1" :inactive-value="0"
                            active-color="#13ce66"
                            @change="Switch2(scope,list)">
                    </el-switch>
                </template>

            </el-table-column>
            <el-table-column prop="isstate" label="操作">
            <template slot-scope="scope">
                <el-dropdown>
                    <el-button type="primary">
                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button
                                    type="text"
                                    size="mini"
                                    @click="displayComments(scope)">查看评论</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button
                                    type="text"
                                    size="mini"
                                    @click="del(scope,list)">删除</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item v-if="scope.row.mid_ground_video_id>0">
                            <el-button
                                    type="text"
                                    size="mini"
                                    @click="updateYzGoods(scope.row.id,scope.row.goods_id)">更新</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
            </el-table-column>

        </el-table>
        <el-row>
            <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
                    :page-size="page_size" :current-page="current_page"></el-pagination>
            </el-col>


        </el-row>
        <el-dialog   :visible.sync="is_open" class="video-sty">
            <div style="text-align: center">
                <video :src="videolist"  controls="controls" style="max-width:600px;max-height: 800px;"></video>
            </div>
        </el-dialog>
        </template>
        <el-dialog :visible.sync="goods_show" width="60%" center title="选择商品">
            <div>
                <div style="text-align: center">
                    <el-input v-model="search_goods_keyword" style="width:80%"></el-input>
                    <el-button type="primary" @click="searchGoods()" style="margin-left:20px;">搜索</el-button>
                </div>
                <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto">
                    <el-table-column label="ID" prop="id" align="center"></el-table-column>
                    <el-table-column label="商品信息" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row"
                                 style="display:flex;align-items: center;justify-content:center;">
                                <img v-if="scope.row.thumb" :src="scope.row.thumb"
                                     style="width:50px;height:50px"></img>
                                <div style="margin-left:10px">[[scope.row.title]]</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="refund_time" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="sureGoods(scope.row)">
                                选择
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                    <el-pagination background layout="prev, pager, next" @current-change="goodsCurrentChange"
                                   :total="goods_page_total"
                                   :page-size="goods_page_size" :current-page="goods_current_page"></el-pagination>
                </el-col>
            </el-row>
    </template>
        <video-card :dialog-visible.sync="dialogVisible" :video_row="video_row" v-if="dialogVisible"></video-card>
    </div>
@include('Yunshop\VideoShare::componemts.videoCard')
@include('public.admin.uploadMultimediaImg')
<script>
        var vm = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
                data() {
                    let List = {!! $list?:'{}' !!}
                    let category = {!! $category?:'{}' !!}
                    console.log(List);
                    return{
                        is_open:false,
                        list:List.data,
                        loading:false,
                        page_total:List.total,
                        page_size:List.per_page,
                        current_page:List.current_page,
                        search_form:{
                            id:'{!! $_REQUEST['id']  !!}',
                            is_time:''
                        },
                        real_search_form:{},
                        search_loading:false,
                        seleceTime:'',
                        options:[
                            {
                                value:1,
                                label:'搜索发布时间'
                            },
                            {
                                value:0,
                                label:'不搜索发布时间'
                            }
                        ],
                        categorys:category,
                        videolist:'',
                        change_title:'',
                        goods_show:false,
                        goods_list:[],
                        goods_page_total:0,
                        goods_page_size:0,
                        goods_current_page:0,
                        search_goods_keyword:'',
                        video_goods_id:0,
                        dialogVisible:false,
                        video_row:{},
                    }
                },
                mounted: function () {
                    
                },
                methods: {
                    updateYzGoods(id,goods_id){
                        this.loading = true;
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.update-yz-goods') !!}',{id:id,goods_id:goods_id}).then(function (response){
                            this.loading = false;
                            this.$message({message: response.data.msg, type: 'success'});
                            window.location.reload()
                            },function (response) {
                                this.loading = false;
                                 this.$message({message: response.data.msg, type: 'error'});
                            }
                        );
                    },
                    video(id){//查询视频
                        this.is_open = true;
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.video') !!}',{id:id}).then(function (response){
                                console.log(response.data.data);
                                this.videolist = response.data.data.video_src
                            },function (response) {
                                console.log(response);

                            }
                        );

                    },
                  currentChange(val) {
                        this.loading = true;
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.search') !!}',{page:val,search:this.real_search_form}).then(function (response){
                            let data = response.data.data.list;
                            this.page_total = data.total;
                            this.list = data.data;
                            this.page_size = data.per_page;
                            this.current_page = data.current_page;
                            this.loading = false;
                            
                        },function (response) {
                            console.log(response);
                            this.loading = false; 
                        }
                        );
                    },
                    goodsShow(id) {
                        this.goods_show = true
                        this.video_goods_id = id
                    },
                    searchGoods() {
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.get-good-list') !!}', {search: this.search_goods_keyword}
                        ).then(function (response) {
                                console.log(response.data.data.data)
                                if (response.data.result) {
                                    this.goods_list = response.data.data.data;
                                    this.goods_page_total = response.data.data.total;
                                    this.goods_page_size = response.data.data.per_page;
                                    this.goods_current_page = response.data.data.current_page;
                                    console.log(response.data.data)
                                } else {
                                    console.log()
                                    this.$message({message: response.data.msg, type: 'error'});
                                }
                                this.search_loading = false;
                            }
                        );
                    },
                    goodsCurrentChange(val) {
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.get-good-list') !!}', {
                            page: val,
                            search: this.search_goods_keyword
                        }).then(function (response) {
                            this.goods_list = response.data.data.data;
                            this.goods_page_total = response.data.data.total;
                            this.goods_page_size = response.data.data.per_page;
                            this.goods_current_page = response.data.data.current_page;
                                this.loading = false;
                            }, function (response) {
                                // console.log(response);
                                this.loading = false;
                            }
                        );
                    },
                    sureGoods(rows) {
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.edit-goods') !!}', {
                            goods_id: rows.id,
                            video_goods_id:this.video_goods_id
                        }).then(function (response) {
                            if (response.data.result){
                                this.$message.success("修改关联商品成功");
                                window.location.reload();
                            }else {
                                this.$message.error(response.data.msg);
                            }
                            }, function (response) {
                            this.$message.error(response.msg);
                            }
                        );
                    },
                    search() {
                        this.search_form.start_time='';
                        this.search_form.end_time='';
                        if(this.seleceTime===0){
                            this.search_form.is_time=0;
                            this.search_loading = true;
                        }
                        else{
                            this.search_loading = true;
                            this.search_form.is_time=1;
                            if(this.search_form.time){
                                this.search_form.is_time=1;
                                this.search_form.start_time = Math.round(this.search_form.time[0]/1000).valueOf();
                                this.search_form.end_time = Math.round(this.search_form.time[1]/1000).valueOf();
                            }
                        }
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.search') !!}',{search:this.search_form}
                        ).then(function (response) {
                              if (response.data.result){
                                let data = response.data.data.list;
                                this.page_total = data.total;
                                this.list = data.data;
                                this.page_size = data.per_page;
                                this.current_page = data.current_page;
                                this.loading = false;
                                this.real_search_form=Object.assign({},this.search_form);
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.search_loading = false;
                        },function (response) {
                            this.search_loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                        );
                    },
                    del(scope, rows){
                            if(confirm("确认删除?")) {
                                rows.splice(scope.$index, 1);
                                    let json={
                                        id:scope.row.id
                                    }
                                    this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.del') !!}',json).then(function (response){
                                        if (response.data.result) {
                                            this.$message.success("删除成功");
                                        } else {
                                            this.$message({message: response.data.msg,type: 'error'});
                                        }
                                    },function (response) {
                                        console.log(response);
                                        this.loading = false;
                                    }
                                );
                            }
                    },
                    titleChange(scope) {
                        let id = scope.row.id
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.edit-title') !!}', {
                            id: id,
                            title: this.change_title
                        }).then(function (response) {
                                if (response.data.result){
                                    this.$message.success("修改标题成功");
                                    scope.row.title = this.change_title
                                } else {
                                    this.$message({message: response.data.msg, type: 'error'});
                                }
                            }, function (response) {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                        );
                    },
                    displayComments(scope){
                        let id = scope.row.id
                        let url =  "{!! yzWebUrl('plugin.video-share.admin.video-comments.display-comments') !!}&id=" + id
                        console.log(url)
                        window.location.href=url
                    },
                    Switch(scope, rows){
                            let json={
                                vid:scope.row.id
                            }
                            this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.changeStatus') !!}',json).then(function (response){
                                if (response.data.result){
                                    this.$message.success("修改状态成功");
                                }
                                else{
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                            },function (response) {
                                console.log(response);
                                this.loading = false;
                            }
                            );
                    },
                    Switch2(scope, rows){
                        let json={
                            vid:scope.row.id
                        }
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.changeRecommend') !!}',json).then(function (response){
                                if (response.data.result){
                                    this.$message.success("修改状态成功");
                                }
                                else{
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                            },function (response) {
                                console.log(response);
                                this.loading = false;
                            }
                        );
                    },

                    changeCate(category_id, id){
                        let json={
                            category_id:category_id,
                            id:id
                        }
                        this.$http.post('{!! yzWebFullUrl('plugin.video-share.admin.video-goods.changeCategory') !!}',json).then(function (response){
                                if (response.data.result){
                                    this.$message.success("修改成功");
                                }
                                else{
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                            },function (response) {
                                console.log(response);
                                this.loading = false;
                            }
                        );
                    },
                    // 更换视频地址
                    replaceVideo(row) {
                        this.dialogVisible = true;
                        this.video_row = row;
                    }
                 

                },
            });
    </script>
@endsection