@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">
            <div class="vue-crumbs">
                小程序直播 > 直播间管理 > 直播间详情
            </div>
            <div class="vue-main">
                <el-form ref="form" :model="form" ref="form" label-width="240px">
                    <el-form-item label="直播间名称">
                        [[data.name]]
                    </el-form-item>
                    <el-form-item label="直播间封面">
                        <img style="width: 200px;height: 160px" :src="data.cover_img" alt="">
                    </el-form-item>
                    <el-form-item label="直播间海报">
                        <template>
                            <el-select v-model="choose_poster" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in data.poster"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="主播介绍" style="margin-bottom: 60px;width: 70%">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                resize="none"
                                v-model="data.anchor_content">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="直播间介绍" style="margin-bottom: 60px;width: 70%">
                        <tinymceee v-model="data.content"></tinymceee>
                    </el-form-item>
                    <el-form-item label="" prop="">
                        <el-button type="success" @click="submit()">
                            提交
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    @include('public.admin.tinymceee')
    @include('public.admin.uploadImg')
    <script>
        let data_room = {!! json_encode($data)?:'[]' !!};
        console.log(data_room)
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    form: {},
                    data: data_room,
                    choose_poster: data_room.choose_poster ? data_room.choose_poster : '',
                }
            },
            mounted() {
            },
            methods: {
                submit() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    let data = {
                        'r_id': this.data.id,
                        'p_id': this.choose_poster ? this.choose_poster : '',
                        'content': this.data.content,
                        'anchor_content': this.data.anchor_content,
                    }
                    this.$http.post("{!! yzWebFullUrl('plugin.appletslive.admin.controllers.room-management.detailSave') !!}", {data: data}).then(response => {
                        this.$message({
                            message: response.data.msg,
                            type: 'success'
                        });
                        loading.close();
                    }, response => {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
            },
        })
    </script>
@endsection