@extends('layouts.base')
@section('title', "专题详情 ")
@section('content')

    <link rel="stylesheet" href="{{resource_get('plugins/store-cashier/src/common/static/index.css')}}">

    <style>
        .rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
        .rightlist #app{margin-left:30px;}
        .el-form-item__label{padding-right:30px;}
        .tip{font-size:12px;color:#999;}
        .rightlist-head-con{line-height:50px;padding-right:20px;font-size:16px;color:#888;}
        .el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
        .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
        /* 滑块选择小白点 */
        .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;}

        /* 上传图片 */
        .avatar-uploader .el-upload {margin-top:15px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
        .avatar-uploader .el-upload:hover {border-color: #409EFF;}
        .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
        .avatar {width: 178px;height: 178px;display: block;}
        .el-upload-tip{width:178px;margin:0;padding:0;color:#999;text-align:center;}
        input[type=file] {display: none;}
        .avatar-uploader-box{position:relative;width:200px;}
        .el-icon-circle-close{position:absolute;top:10px;right:0;color:#999;}
        .el-table::before {

            width: 100%;
            height: 0px;
        }
        .img_grop img{
            width: 100%;
            height: 100%;
        }
        .el-dialog__header{
            padding: 0px;
        }
        .el-dialog__body{
            padding: 0px;
        }
    </style>

    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                聚合供应链专题 > 专题详情
            </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" style="flex:0 0 130px">基础信息</div>

                    </div>
                    <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                        <template>
                            <el-form-item label="专题名称">
                               [[form.name]]
                            </el-form-item>
                            <el-form-item label="专题分类" >
                                [[form.cate]]
                            </el-form-item>
                            <el-form-item label="专题类型">
                                [[form.type]]
                            </el-form-item>
                            <el-form-item label="模块图片">
                                <div class="upload-boxed">
                                    <img :src="form.thumb"  @click="tapFimg(form.thumb)" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                </div>
                                <div class="tip">提示: 点击右键保存图片!</div>
                            </el-form-item>

                        </template>

                        <div class="vue-head" style="margin-top:20px">
                            <div class="vue-main-title">
                                <div class="vue-main-title-left"></div>
                                <div class="vue-main-title-content">专题素材</div>
                            </div>
                            <div class="vue-main-form">

                                <el-form-item label="海报背景" >
                                    <div class="upload-boxed" v-for="(item,index) in form.poster" :key="index" style="margin-right:5px">
                                        <el-image :src="item" alt="" @click="tapFimg(item)" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;"></el-image>
                                    </div>
                                    <div class="tip">提示: 点击右键保存图片!</div>
                                </el-form-item>

                                <el-form-item label="广告图片" >
                                    <div class="upload-boxed" v-for="(item,index) in form.adv" :key="index" style="margin-right:5px">
                                        <el-image :src="item"  @click="tapFimg(item)" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;"></el-image>
                                    </div>
                                    <div class="tip">提示: 点击右键保存图片!</div>
                                </el-form-item>

                                <el-form-item label="推广文案">
                                    <tinymceee v-model="form.promote" style="width:70%;"></tinymceee>
                                </el-form-item>

                            </div>
                        </div>

                    </el-form>
                    <div class="vue-page">
                        <div class="vue-center">
                            <el-button @click="goBack">返回</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog
                    :visible.sync="dialogVisible"
                    :show-close="false"
                    width="20%"
                    top="20%"
            >
                <div style="width:100%;" class="img_grop" v-if="dialogVisible">
                    <img :src="dialogImageUrl" id="thumb_url" alt="">
                </div>
            </el-dialog>
        </div>



        <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
        @include('public.admin.tinymceee')
        <script>
            var app = new Vue({
                el:"#app",
                delimiters: ['[[', ']]'],
                data() {
                        let topic = {!! json_encode($data) ?: '{}' !!}
                    console.log(topic);
                    return{
                        dialogVisible: false,
                        dialogImageUrl: '',
                        uploadListShow:false,
                        chooseImgListName:'',
                        uploadShow:false,
                        uploadImg1:'',
                        chooseImgName:'',
                        submit_loading:false,
                        dialog_loading:false,
                        loading:false,
                        table_loading:false,
                        is_dialog:false,
                        name: '',
                        search_form:{},
                        goods_list:[],
                        options: [{
                            value: 1,
                            label: 'H5'
                        }, {
                            value: 2,
                            label: '小程序',
                        }, ],
                        value: '',
                        form:topic,
                        // 分页
                        current_page:0,
                        total:0,
                        per_size:0,
                        rules:{},
                    }
                },
                methods: {
                    goBack() {
                        history.go(-1)
                    },
                    // 点击图片放大
                    tapFimg(item){
                        console.log(item);
                        this.dialogVisible=true;
                        this.dialogImageUrl=item;
                    },
                },
            })

        </script>
@endsection