{extend name="main" /}

{block name="body"}
<div class="layui-container" style="width: 100%">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class=" layui-card-header layuiadmin-card-header-auto">
                <form class="layui-form" method="post" lay-filter="endpoint_search_form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="title" value="" placeholder="标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div id="status_id"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="endpoint_search">
                                <label>Search</label>
                            </button>
                        </div>


                        <div class="layui-inline" style="float: right;right: 15px;">
                            <button type="button" class="layui-btn layui-bg-blue" id="up_site" >
                                <label>上传网站</label>
                            </button>
                        </div>
                        <div class="layui-inline" style="float: right;right: 15px;">
                            <button type="button" class="layui-btn layui-bg-blue" id="index_create" >
                                <label>生成首页</label>
                            </button>
                        </div>
                        <div class="layui-inline" style="float: right;right: 15px;">
                            <button type="button" class="layui-btn layui-bg-blue" id="create" >
                                <label>添加</label>
                            </button>
                        </div>
                    </div>
                </form>

            </div>
            <div class="layui-card-body">
                <table class="layui-table" id="endpoint_id" lay-filter="endpoint_filter">
                </table>
            </div>
            <script type="text/html" id="site_tool">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="create_html">生成页面</a>
            </script>
        </div>
        <div class="pages">{$list|raw}</div>
    </div>
</div>


<div id="add_endpoint" style="display: none">
    <form class="layui-form" lay-filter="endpoint_form" id="endpoint_form" style="margin-top: 30px;">
        <div class="layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>标题:</label>
                <div class="layui-input-block layui-input-new">
                    <input type="text" name="title" value="" id="title_id" placeholder="标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>分类:</label>
                <div class="layui-input-block layui-input-new">
                    <div id="category_id"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>作者:</label>
                <div class="layui-input-block layui-input-new">
                    <input type="text" name="author" value="" id="author_id" placeholder="作者" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>封面:</label>
                <div class="layui-input-block layui-input-new">
                    <input type="text" name="cover" value="" id="cover_id" placeholder="封面" style="width: 85%;margin-right: 5px;float: left;" class="layui-input">
                    <button type="button" class="layui-btn" id="cover_upload">
                        <i class="layui-icon layui-icon-upload"></i>上传
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>内容:</label>
                <div class="layui-input-block">
                    <textarea style="height:500px" name="content" id="content"  placeholder="内容"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="css"}
<style>
    .layui-table-cell {
        height: 38px;
        line-height: 38px;
    }

    .layui-form-label {
        width: 130px;
    }

    .layui-input-block {
        margin-left: 160px!important;
        margin-right: 65px;
    }

</style>
{/block}

{block name="js"}
<script>

    layui.config({
        base: '/static/admin'
    }).extend({ //设定模块别名
        adx_table: '/js/layui_table', //相对于上述 base 目录的子目录
        tinymce: '/layui_tinymce/tinymce'
    }).use(['adx_table','tinymce'],function(){
        let table = layui.table,
            form = layui.form,
            tinymce = layui.tinymce,
            upload = layui.upload,
            adx_table = layui.adx_table;

        let endpoint_list_url = '/admin/site/index';
        let endpoint_edit_url = '/admin/site/edit';
        let endpoint_add_url = '/admin/site/add';
        let create_detail_url = '/admin/site/createDetail';
        let create_index_url = '/admin/site/createIndex';
        let up_site_url = '/admin/site/upSite';
        let upload_url = '/dsp/creative/upload';

        let status_data = [{'name':'开启','value':8001},{'name':'关闭','value':8002}]
        let category_data = [
            {'name':'rocketnews','value':'rocketnews'},
            {'name':'bitfire','value':'bitfire'},
            {'name':'financetop','value':'financetop'},
            {'name':'highsportnews','value':'highsportnews'},
            {'name':'gamescan','value':'gamescan'},
            {'name':'healthme','value':'healthme'},
        ]
        xmSelect.render({
            el: '#status_id',
            tips: 'Status',
            data: status_data,
            initValue: [8001],
            model: {label: {type: 'text'}},
            name: 'status',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        let category = xmSelect.render({
            el: '#category_id',
            tips: '分类',
            data: category_data,
            name: 'category',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })


        let endpoint_cols = [
            {field:'id', title: 'ID', fixed: 'left', width:'6%' }
            ,{field:'category', title: '分类', fixed: 'left', width:'14%'}
            ,{field:'title', title: '标题', fixed: 'left', width:'26%'}
            ,{field:'author', title: '作者',width:'8%', edit: 'text' }
            ,{field:'content', title: '内容',width:'14%' }
            ,{field:'status', title: 'Status', width:'8%',  templet:"<div>{{layui.status(d.id,d.status)}}</div>"}
            ,{field:'record_time', title: '创建时间',width:'14%', sort: true, templet:function (d) {
                    return utcToBeijing(d.record_time);
                }}
            ,{field:'update_time', title: '更新时间',width:'14%', sort: true, templet:function (d) {
                    return utcToBeijing(d.update_time);
                }}
            ,{fixed: 'right', title:'操作', toolbar: '#site_tool', width:'12%'}
        ]


        adx_table.tableParam('#endpoint_id',endpoint_list_url,'POST',endpoint_cols,true,{});

        $('#index_create').click(function (){
            ajaxRequst('',create_index_url)
        });
        $('#up_site').click(function (){
            ajaxRequst('',up_site_url)
        });
        $('#create').click(function (){
            add_edit(endpoint_add_url);
        });

        table.on('tool(endpoint_filter)', function(obj){
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'edit'){ //编辑
                add_edit(endpoint_edit_url,data.id);
                category.setValue([data.category])

                let t_edit = tinymce.get('#content')
                t_edit.setContent(data.content)
                form.val('endpoint_form',data);
            }else if (layEvent === 'create_html'){
                let info = {}
                info.id = data.id
                info.html_name = data.html_name
                ajaxRequst(info,create_detail_url)
            }
        });

        //监听表格编辑
        table.on('edit(endpoint_filter)', function (obj) {
            let id = obj.data.id
            let fieldStr = obj.field;
            let value = obj.value;

            let send_data = {}
            send_data['id'] = id;
            send_data[fieldStr] = value
            //更新信息
            editInfo(send_data)
        });

        //监听搜索
        form.on('submit(endpoint_search)', function (data) {
            // 重载表格
            table.reload('endpoint_id', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: data.field
            });
            return false;
        });

        //定义开关方法
        layui.status = function (id,val){
            if (val == 8001) {
                return "   <input type='checkbox' idval="+id+" id='endpoint_status' lay-filter='endpoint_status' value= "+val+"  lay-skin='switch' lay-text='ON|OFF' checked>"
            } else {
                return "   <input type='checkbox' idval="+id+" id='endpoint_status' lay-filter='endpoint_status' value= "+val+"   lay-skin='switch' lay-text='ON|OFF'>"
            }
        }

        //监听开关
        form.on('switch(endpoint_status)', function (obj) {
            let endpoint_status = this.value
            let checked = obj.elem.checked;
            let id = $(this).attr('idval');

            if (checked == true){
                endpoint_status = 8001;
                $(this).val(endpoint_status);

            } else {
                endpoint_status = 8002;
                $(this).val(endpoint_status);
            }
            form.render('checkbox')
            let send_data = {}
            send_data['id'] = id;
            send_data['status'] = endpoint_status
            //更新信息
            editInfo(send_data)
        });

        let uploadInst = upload.render({
            elem: '#cover_upload',
            url: upload_url,
            before: function(obj){
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                if(res.code == 0){
                    return layer.msg('上传失败');
                }
                let img_url = res.data.domain + res.data.url
                $('#cover_id').val(img_url);
            },
            error: function(){
            },
            progress: function(n, elem, e){
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        function editInfo(send_data){
            $.ajax({
                url: endpoint_edit_url,
                type: "post",
                async: false,
                data: send_data,
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg("操作成功", {time:800})
                    }else if (result.code == 0) {
                        layer.msg(result.msg);
                    }
                },
                error: function(error) {
                    layer.msg('操作异常');
                }
            });
        }

        function add_edit(url,id = 0){
            let title = id + '编辑'
            if (id == 0){
                title = '添加';
                category.setValue([])
            }
            $('#endpoint_form')[0].reset();

            layer.open({
                type: 1,
                title: [title,'text-align: center;'],
                content: $('#add_endpoint'),
                area: ['90%', '95%'],
                shade:[0.01,'#fff'],
                btn: ['保存', '取消'],
                btnAlign: 'c',
                success: function (layero,index){
                    // 解决按enter键重复弹窗问题
                    $(':focus').blur();
                    // 添加form标识
                    layero.addClass('layui-form');
                    // 将保存按钮改变成提交按钮
                    layero.find('.layui-layer-btn0').attr({
                        'lay-filter' : 'add_edit_submit',
                        'lay-submit' : ''
                    });

                    tinymce.render({
                        elem: "#content",
                        images_upload_handler:function(blobInfo, succFun, failFun){
                            let formData = new FormData();
                            formData.append('file', blobInfo.blob());
                            let ajaxOpt = {
                                url: upload_url,
                                dataType: 'json',
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (res) {
                                    let img_url = res.data.domain + res.data.url
                                    succFun(img_url)
                                },
                                error: function (res) {
                                    failFun("网络错误：" + res.status);
                                }
                            };
                            $.ajax(ajaxOpt);
                        },
                        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave indent2em autoresize',
                        toolbar: 'code undo redo | forecolor backcolor bold italic underline strikethrough link image formatselect | alignleft aligncenter alignright alignjustify outdent indent | styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em lineheight',
                        valid_elements: '*[*]',
                        valid_children: '*[*]',
                        extended_valid_elements: 'style,link[href|rel],script',
                        custom_elements: 'style,link,~link,script',
                    },(opt, edit)=>{
                        // 加载完成后回调 opt 是传入的所有参数
                        // edit是当前编辑器实例，等同于t.get返回值
                    });
                    let t_add = tinymce.get('#content')
                    t_add.setContent('')
                },
                yes: function (index, layero) {
                    form.on('submit(add_edit_submit)', function(obj){
                        let data = obj.field;
                        if (data.supply_id == ''){
                            layer.msg('请选择Supply');
                            return false;
                        }
                        if (id > 0){
                            data.id = id;
                        }
                        let t_add = tinymce.get('#content')
                        data.content = t_add.getContent()

                        ajaxRequst(data,url,index);
                    })
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            })
        }

        function ajaxRequst(dataInfo,url,index = ''){

            $.ajax({
                url: url,
                type: "post",
                data: dataInfo,
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg("操作成功", {time:800})

                        if (index != ''){
                            let tableWhere = form.val("endpoint_search_form");
                            adx_table.tableParam('#endpoint_id',endpoint_list_url,'POST',endpoint_cols,true,{},'','',tableWhere);
                            layer.close(index);
                        }
                        return true;
                    }else if (result.code == 0) {
                        layer.msg(result.msg);
                        return false;
                    }
                },
                error: function(error) {
                    layer.msg('操作异常');
                }
            });
        }

    });
</script>
{/block}