@extends('layouts.base')
@section('title', '页面编辑')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css')}}"/>
    <link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
    <style>
        .el-checkbox-group {
            position: relative;
            z-index: 0;
        }

        .el-checkbox {
            margin-top: 10px !important;
        }
    </style>
    <div id='re_content'>

        <div class="con" v-cloak>
            <div class="setting">
                <el-form ref="form" label-width="15%">
                    <div class="block">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>分类详情</b>
                        </div>

                        <el-form-item label="页面名称">
                            <el-tag type="primary"> [[form.another_name]]</el-tag>
                        </el-form-item>

                        <el-form-item label="是否启用">
                            <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.open_state"
                                    active-color="#13ce66"
                                    inactive-color="#C0C0C0"
                            >
                            </el-switch>
                        </el-form-item>

                        <el-form-item label="顶部图片">
                            <div class="upload-box" @click="openUpload('top_image',1,'one')" v-if="!form.top_image_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('top_image',1,'one')" class="upload-boxed" v-if="form.top_image_url"
                                 style="height:150px;">
                                <img :src="form.top_image_url" alt=""
                                     style="width:300px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                                <i class="el-icon-close" @click.stop="clearImg('top_image')" title="点击清除图片"></i>
                            </div>
                        </el-form-item>

                        <el-form-item label="H5海报">
                            <template>
                                <el-select v-model="form.web_poster_id" filterable placeholder="请选择">
                                    <el-option
                                            v-for="v in poster_list"
                                            :key="v.id"
                                            :label="v.title"
                                            :value="v.id">
                                    </el-option>
                                </el-select>
                            </template>
                            <div class="tip">建议使用新海报-H5商城海报</div>
                        </el-form-item>

                        <el-form-item label="小程序海报">
                            <template>
                                <el-select v-model="form.mini_poster_id" filterable placeholder="请选择">
                                    <el-option
                                            v-for="v in poster_list"
                                            :key="v.id"
                                            :label="v.title"
                                            :value="v.id">
                                    </el-option>
                                </el-select>
                            </template>
                            <div class="tip">建议使用新海报-微信小程序海报</div>
                        </el-form-item>


                        <el-form-item label="底部提示信息">
                            <div class="vue-main-form">
                                <el-form-item label="" style="margin-bottom: 60px;width: 70%">
                                    <tinymceee v-model="form.bottom_message" v-if="form.bottom_message!==undefined"></tinymceee>
                                </el-form-item>
                            </div>
                        </el-form-item>


                        <upload-multimedia-img :upload-show="uploadShow" :type="type" :name="chooseImgName"
                                               :sel-Num="selNum" @replace="changeProp"
                                               @sure="sureImg"></upload-multimedia-img>


                    </div>
                </el-form>
            </div>
            <div class="confirm-btn">
                <el-button :loading="submit_loading" type="primary" @click="submit">提交</el-button>
            </div>

        </div>


    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    @include('public.admin.uploadMultimediaImg')
    @include('public.admin.tinymceee')
    <script>

        var app = new Vue({
            el: "#re_content",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                let id = "{!!($_GET['id']) !!}";
                return {
                    'form': {
                        'id': id,
                    },
                    'uploadShow': false,
                    'chooseImgName': '',
                    'type': '',
                    'selNum': '',
                    'submit_loading': false,
                    'poster_list': [],
                }
            },
            created() {
                this.getData();
            },
            mounted() {

            },
            methods: {
                clearImg(str, type, index) {
                    if (!type) {
                        this.form[str] = "";
                        this.form[str + '_url'] = "";
                    } else {
                        this.form[str].splice(index, 1);
                        this.form[str + '_url'].splice(index, 1);
                    }
                    this.$forceUpdate();
                }, changeProp(val) {
                    if (val == true) {
                        this.uploadShow = false;
                    } else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name, uploadShow, fileList) {

                    if (fileList.length <= 0) {
                        return
                    }
                    console.log(name);
                    console.log(fileList);
                    this.form[name] = fileList[0].attachment;
                    this.form[name + '_url'] = fileList[0].url;
                },
                openUpload(str, type, sel) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.type = type;
                    this.selNum = sel;
                },
                getData() {
                    this.$http.post('{!! yzWebFullUrl('plugin.cps-sub-platform.admin.plat-activity.edit') !!}', {
                        'id': this.form.id,
                        'is_json': 1
                    }).then(response => {
                        if (response.data.result) {

                            this.form = response.data.data.activity_data;
                            this.poster_list = response.data.data.poster_list;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    })

                },
                submit() {
                    let that = this;
                    this.submit_loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.cps-sub-platform.admin.plat-activity.change') !!}', this.form).then(response => {
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                            this.submit_loading = false;
                            this.getData();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                            this.submit_loading = false;
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                        this.submit_loading = false;
                    })
                }

            },
        })

    </script>
@endsection