@extends('layouts.base')
@section('title', "直播间管理")
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                小程序直播 > 直播间管理
            </div>
            <div class="vue-head">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">直播间管理</div>
                    <div class="vue-main-title-button">
                    </div>
                </div>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <el-form-item label="">
                            <el-input v-model="search_form.room_name" placeholder="直播间名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template>
                                <el-select v-model="search_form.live_status" clearable placeholder="直播间状态">
                                    <el-option
                                            v-for="item in live_status_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.close_replay" clearable placeholder="是否回放">
                                    <el-option
                                            v-for="item in close_replay_options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="search(1)">搜索</el-button>
                        </el-form-item>


                    </el-form>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-bottom:20px">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">直播时间</div>

                    </div>
                    <el-table :data="data_list" style="width: 100%">
                        <el-table-column label="直播时间" align="center" prop="" width="auto">
                            <template slot-scope="scope">
                                <div>开始：[[ scope.row.start_time]]</div>
                                <div>结束：[[scope.row.end_time]]</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="直播间信息" align="center" prop="created_at" width="auto">
                            <template slot-scope="scope">
                                <div style="display:flex;justify-content:center">
                                    <div style="width: 120px;height: 80px;">
                                        <el-image :src="scope.row.cover_img" alt=""></el-image>
                                    </div>
                                    <div style="width: 120px;height: 80px;display: flex;flex-direction:column">
                                        <span style="font-weight: bold">[[scope.row.name]]</span>
                                        <span style="margin-top: 10px">房间号:[[scope.row.roomid]]</span>
                                        <span>主播:[[scope.row.anchor_name]]</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="直播间状态" align="center" prop="">
                            <template slot-scope="scope">
                                <span>[[scope.row.live_status_name]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="开启/关闭回放" align="center" prop="" width="auto">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.close_replay"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        :active-value="0"
                                        :inactive-value="1"
                                        @change="changeCloseReplay(scope.row)">

                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="推广" align="center" prop="" width="auto">
                            <template slot-scope="scope">
                                <el-popover
                                        placement="right"
                                        width="400"
                                        trigger="click"
                                        style="text-align: center"
                                >
                                    <div style="width:400px;text-align: center">
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="qr_code">
                                        </el-image>
                                        <br>
                                        <span class="demonstration">[[detail_url]]</span>
                                    </div>
                                    <el-button @click="qrCode(scope.row.roomid)" style="border: none;background: none;color: #0a0a0a;font-weight: bold" slot="reference">推广</el-button>
                                </el-popover>
                                <button style="border: none;background: none;color: #0a0a0a;font-weight: bold"
                                        @click="detail(scope.row.id)">编辑
                                </button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page">
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                                       :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    data_list: [],
                    search_form: {
                        room_name: "",
                        live_status: "",
                        close_replay: "",
                    },
                    live_status_options: [{
                        value: '101',
                        label: '直播中'
                    }, {
                        value: '103',
                        label: '未开始'
                    }, {
                        value: '104',
                        label: '禁播'
                    }, {
                        value: '105',
                        label: '暂停'
                    }, {
                        value: '106',
                        label: '异常'
                    }, {
                        value: '107',
                        label: '已过期'
                    }],
                    close_replay_options: [{
                        value: 0,
                        label: '否'
                    }, {
                        value: 1,
                        label: '是'
                    }],
                    current_page: 1,
                    total: 1,
                    per_page: 1,
                    amount_total: 0.00,
                    id: '',
                    qr_code:"",
                    detail_url:''
                }
            },
            mounted() {
                this.getData(1);
            },
            methods: {
                getData(page) {
                    let json = {
                        page: page,
                        search: {
                            live_status: this.search_form.live_status,
                            close_replay: this.search_form.close_replay,
                            room_name: this.search_form.room_name,
                        },
                    };
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.post('{!! yzWebFullUrl('plugin.appletslive.admin.controllers.room-management.get-room-list') !!}', json).then(function (response) {
                        if (response.data.result) {
                            this.data_list = response.data.data.data
                            this.total = response.data.data.last_page
                            this.current_page = response.data.data.current_page
                            loading.close();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }

                        loading.close();
                    }, function (response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
                detail(id) {
                    let link = `{!! yzWebFullUrl('plugin.appletslive.admin.controllers.room-management.detail') !!}` + `&id=` + id;
                    window.location.href = link;
                },
                search(val) {
                    this.getData(val);
                },
                changeCloseReplay(res) {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.get("{!! yzWebFullUrl('plugin.appletslive.admin.controllers.room-management.change-close-replay') !!}" + '&room_id=' + res.roomid + '&close_replay=' + res.close_replay).then(response => {
                        if (response.data.result) {
                            this.$message({
                                message: response.data.msg,
                                type: 'success'
                            });
                            this.getData(this.current_page)
                            loading.close();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                            this.getData(this.current_page)
                            loading.close();
                        }

                    }, function (response){
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        this.getData(this.current_page)
                        loading.close();
                    });
                },
                qrCode(roomid) {
                    this.$http.post('{!! yzWebFullUrl('plugin.appletslive.admin.controllers.room-management.get-qr-code') !!}',{roomid:roomid}).then(function (response) {
                        if (response.data.result) {
                            this.qr_code = response.data.data.qrCode
                            this.detail_url = response.data.data.url
                            loading.close();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }

                        loading.close();
                    }, function (response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                }
            },
        })
    </script>
@endsection