
<div class="layui-fluid">

    <style>
        #coursecategoryTreeBar{padding:10px 15px;border:1px solid #e6e6e6;background-color:#f2f2f2}
        #coursecategoryTree{border:1px solid #e6e6e6;border-top:none;padding:10px 5px;overflow:auto;height:-webkit-calc(100vh - 205px);height:-moz-calc(100vh - 205px);height:calc(100vh - 205px)}
        .layui-tree-entry .layui-tree-txt{padding:0 5px;border:1px transparent solid;text-decoration:none!important}
        .layui-tree-entry.organ-tree-click .layui-tree-txt{background-color:#fff3e0;border:1px #ffe6b0 solid}
        .files_itemw{width:30px;height:30px;line-height:30px;cursor:pointer;padding:1px;background:#fff;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;}
        .files_itemw img{max-width:28px;max-height:28px;border:0}
    </style>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body" style="padding:10px;">
                    <!-- 树工具栏 -->

                    <!-- 左树 -->
                    <div id="coursecategoryTree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">
                    <form class="layui-form render">
                        <input type="hidden" name="groupid" id="course-groupid" value=""/>
                        <div class="layui-form-item">

                            <div class="layui-inline" style="width:250px;"><input type="text" name="kw" placeholder="课程关键词" autocomplete="off" class="layui-input" lay-affix="clear"/></div>
                            <div class="layui-inline" style="width:150px;">
                                <select name="status" id="statusselect">
                                    <option value="-1">审核状态</option>
                                    <option value="0" {php}if(input('status') === '0'){echo 'selected';}{/php}>待提交</option>
                                    <option value="1" {php}if(input('status') == 1){echo 'selected';}{/php}>待审核</option>
                                    <option value="2" {php}if(input('status') == 2){echo 'selected';}{/php}>审核失败</option>
                                    <option value="3" {php}if(input('status') == 3){echo 'selected';}{/php}>审核成功</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-btn-group">
                                    <button  class="layui-btn" lay-submit lay-filter="search-course"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                                    <a class="layui-btn" lay-submit lay-filter="search-course-all" onclick="$('#course-groupid').val('')"><i class="layui-icon layui-icon-light"></i>全部</a>
                                    <a class="layui-btn" id="course-del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                    <div class="layui-card-body">
                    <table lay-filter="course" id="course"></table>
                    </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">

        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
         {{# if (d.status === 1) { }}
            <a class="layui-btn layui-btn-xs" lay-event="shenhei">审核</a>
         {{# } }}
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>

<script type="text/html" id="status-demo">
    {{# if (d.status === 3) { }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" >{{=d.status_text}}</a>
    {{# } else { }}
        {{# if(d.status === 2) { }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="statuserror">{{=d.status_text}}</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-xs">{{=d.status_text}}</a>
    {{# } }}
    {{# } }}
</script>

<script type="text/html" id="ishot-demo">
    {{# if (d.is_hot === 1 || d.is_tj === 1) { }}

        {{# if (d.is_hot === 1) { }}
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="sethot">热门</a>
        {{# } }}
        {{# if (d.is_tj === 1) { }}
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="sethot">推荐</a>
        {{# } }}
    {{# } else { }}
     <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="sethot">未设置</a>
    {{# } }}
</script>

<div></div>
<!--JS部分-->
<script>

    layui.use(['vinfo', 'buildItems','dropdown'], function(){
        var map_root = layui.cache.maps;
        var app_root = map_root + 'course.course/';
        var layer = layui.layer,table=layui.table,form=layui.form,admin=layui.admin;
        var dropdown = layui.dropdown;
        organData = admin.util.toTree({$category|raw});

        doTree(organData,'');

        function doTree(data,load){
            layui.tree.render({
                id: 'organTree',
                elem: '#coursecategoryTree',
                data: data,
                onlyIconControl: true,
                click: function(obj){
                    $('#coursecategoryTree').find('.organ-tree-click').removeClass('organ-tree-click');
                    $(obj.elem).children('.layui-tree-entry').addClass('organ-tree-click');
                    organObj = obj.data;
                    $('#course-groupid').val(obj.data.id);
                    table.reloadData('course',{where:{cate_id:obj.data.id},page:{curr:1}});

                }
            });
            // var item = $('#coursecategoryTree .layui-tree-entry:first');
            // load ? item.find('.layui-tree-main>.layui-tree-txt').trigger('click') : item.addClass('organ-tree-click');
        }
        /*初始渲染*/
        /*==============左树结构END==============*/
        var status = $("#statusselect").val();
        /*渲染数据*/
        table.render({
            elem: '#course',
            page: true,
            limit:{$limit},
            height: 'full-258',
            url: app_root+"index?&do=json",
            // css: 'td .layui-table-cell{height:80px;line-height:80px;padding:0 5px;}',
            where:{status:status},
            cols: [[
                {type:'checkbox',fixed:'left'},
                {field:'id',width:50,unresize:true,align:'center',title:'ID',sort:!0},
                {field:'thumb',width:80,height:80,align:'center',title:'课程图片',templet:'<div class="files_itemw"><img src="{{d.thumbpath}}" lay-event="course-event-image" /></div>'},
                {field:'title',width:300,align:'center',title:'课程名称'},
                {field:'username',width:150,align:'center',title:'发布者',templet:'<div>{{d.user_info.username}}</div>'},
                {field:'cate_name',width:120,align:'center',title:'类别'},
                {field:'price',width:100,align:'center',title:'价格'},
                {field:'is_hot',width:100,align:'center',title:'推荐',templet:'#ishot-demo'},
                {field:"status_text",width:80,align:'center',title:"状态",templet:'#status-demo'},
                // {field:"is_sell_text",width:80,align:'center',title:"上架状态"},
                {field:"is_sell",width:80,align:'center',title:"是否上架",templet:function(d){return '<input type="checkbox" name="is_sell" lay-skin="switch" lay-text="是|否" lay-filter="is_sell-chang" value="'+d.is_sell+'" data-json="'+encodeURIComponent(JSON.stringify(d))+'"'+(d.is_sell==1 ? ' checked' : '')+'>';},unresize:true,},
                {field:'createtime',width:120,align:'center',title:'发布时间'},
                {field:"teacher_name",width:100,align:'center',title:"讲师"},
                {field:'tag_title',width:100,align:'center',title:'标签'},

                {fixed:'right',width:150,align:'center', templet: '#toolDemo',title:'操作'}
            ]],
            done: function(){ admin.vShow($('[lay-table-id="course"]'));

            }
        });

        // 状态 - 开关操作
        form.on('switch(is_sell-chang)', function(obj){
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            var av = obj.elem.checked ? 1 : 0;
            admin.req(app_root+"editup",{id:json.id,av:av,af:obj.elem.name},function(res){
                layer.tips(res.msg,obj.othis,{time:1000});
                if(res.code === 0) obj.elem.checked = parseInt(obj.value);
            },'post',{headersToken:true});
        });

        /*快编监听*/
        table.on('edit(course)',function(obj){
            admin.req(app_root+"editup",{id:obj.data.id,av:obj.value,af:obj.field},function(res){
                layer.msg(res.msg,{shade:[0.4,'#000'],time:500});
            },'post',{headersToken:true});
        });/**/

        /*工具条监听*/
        table.on('tool(course)', function(obj){
            var data = obj.data;
            var id = data.id;
            if(obj.event === 'detail'){
                courseOpen(data.id);
            }else if(obj.event === 'del'){
                del(id);
            }else if(obj.event === 'statuserror'){
                layer.alert(data.sh_error_desc,{title:'失败原因'});
            }else if(obj.event === 'sethot'){
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 2, // page 层类型
                    area: ['500px', '300px'],
                    title: "课程推荐",
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    btn: ['确定', '关闭'],
                    content: '/admin/course.course/tuijian?id='+id,
                    yes: function(index, layero){
                        var data = window["layui-layer-iframe" + index].callbackdata();
                        $.ajax({
                            method: "post",
                            url: layui.cache.maps+'/course.course/tuijian',
                            data: data,
                            dataType: "json",
                            success: function (res){
                                if(res.code===1) {
                                    layer.msg(res.msg,{icon:1,shade:[0.4,'#000'],time:1500},function (){
                                        layer.close(index);
                                        table.reloadData('course');
                                    });
                                }else{
                                    layer.msg(res.msg,{icon:2,shade:[0.4,'#000'],time:1500},function (){

                                    });
                                }
                                // layer.closeAll();

                            }
                        });
                    }
                });

            }else if(obj.event === 'shenhei'){

                layer.confirm('选择审核状态？', {
                    btn: ['审核通过', '审核不通过'],
                    btn1: function(index, layero, that){

                        shajax(data.id,1);
                    },
                    btn2: function(index, layero, that){
                        layer.prompt({
                            formType: 2,
                            value: '',
                            title: '请输入失败原因',
                        }, function(value, index, elem){

                            shajax(data.id,2,value);

                        });
                    },
                });
            }else if(obj.event === 'course-event-image'){
                var src = $(this).attr('src'), alt = $(this).attr('alt');
                layer.photos({photos:{data:[{alt:alt,src:src}],start:'0'},anim:5,shade:[0.4,'#000']});
            }else if(obj.event === 'more'){
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看课时',
                        id: 'keshi'
                    },{
                        title: '查看章节',
                        id: 'zhangjie'
                    },{
                        title: '查看作业',
                        id: 'zuoye'
                    },{
                        title: '删除',
                        id: 'del'
                    }],
                    click: function(menudata){
                        if(menudata.id === 'keshi'){

                           window.location.href="#/course.course_class/index/kc="+ encodeURIComponent(data.title);
                        }else if(menudata.id === 'zhangjie'){
                            window.location.href="#/course.course_class_category/index/kc="+ encodeURIComponent(data.title);
                        }else if(menudata.id === 'zuoye'){
                            window.location.href="#/course.course_work/index/kc="+ encodeURIComponent(data.title);
                        } else if(menudata.id === 'del'){
                            del(id);
                        }
                    },
                    id: 'dropdown-table-tool',
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                });
            }
        });/**/

        function shajax(id,shstatus,errordesc=''){
            $.ajax({
                method: "post",
                url: layui.cache.maps+'/course.course/shenhecourse',
                data: {id:id,shstatus:shstatus,errordesc:errordesc},
                dataType: "json",
                success: function (res){
                    if(res.code===1) {
                        layer.msg(res.msg,{icon:1,shade:[0.4,'#000'],time:1500},function (){
                            layer.closeAll();
                            table.reloadData('course');
                        });
                    }else{
                        layer.msg(res.msg,{icon:2,shade:[0.4,'#000'],time:1500},function (){

                        });
                    }


                }
            });
        }
        /*删除*/
        function del(ids){
            layer.confirm('确定要删除所选课程吗？', function(){
                admin.req(app_root+"del",{id:ids},function(res){
                    layer.msg(res.msg,{shade:[0.4,'#000'],time:1500},function(){
                        if(res.code==1) table.reloadData('course');
                    });
                },'post',{headersToken:true});
            });
        }/**/
        /*顶部删除按钮*/
        $('#course-del').on('click', function(){
            var checkRows = table.checkStatus('course').data;

            if(checkRows.length === 0){return layer.msg('请选择需删除的文章');}
            var ids = checkRows.map(function(d){return d.id;});
                console.log(ids);
            del(ids);
        });/**/

        /*弹出窗*/
        function courseOpen(id='',type=''){

            layer.open({
                type: 2,
                area: ['900px', '90%'],
                title: "课程详情",
                btn: ['确定', '关闭'],
                // fixed: false, //不固定
                content: '/admin/course.course/detail?id='+id,
                yes: function(index, layero){
                // var data = window["layui-layer-iframe" + index].callbackdata();
                    // $.ajax({
                    //     method: "post",
                    //     url: layui.cache.maps+'/course/edit',
                    //     data: data,
                    //     dataType: "json",
                    //     success: function (res){
                    //         if(res.code===1) {
                    //             layer.msg(res.msg,{icon:1,shade:[0.4,'#000'],time:1500},function (){
                    //                 layer.close(index);
                    //                 table.reloadData('course');
                    //             });
                    //         }else{
                    //             layer.msg(res.msg,{icon:2,shade:[0.4,'#000'],time:1500},function (){
                    //
                    //             });
                    //         }
                    //         // layer.closeAll();
                    //
                    //     }
                    // });
            },
        });
        }/**/
    });
</script>