{extend name="base/header" /}
{block name="body"}
<style>
    .layui-table .widthtd{ width: 120px;}
</style>
<div style="margin: 0px 10px">
    <table class="layui-table">
        <tbody>
        <tr>
            <td class="widthtd"><strong>课程名称</strong></td>
            <td>{$info.title}</td>
            <td class="widthtd"><strong>课程分类</strong></td>
            <td>{$info.cate_name}</td>
        </tr>
        <tr>
            <td class="widthtd"><strong>发布者</strong></td>
            <td>{$info.user_info.username}</td>
            <td class="widthtd"><strong>发布时间</strong></td>
            <td>{$info.createtime}</td>
        </tr>
        <tr>
            <td class="widthtd"><strong>价格</strong></td>
            <td>{$info.price}</td>
            <td class="widthtd"><strong>讲师</strong></td>
            <td>{$info.teacher_name}</td>
        </tr>
        <tr>
            <td class="widthtd"><strong>标签</strong></td>
            <td>{$info.tag_title}</td>
            <td class="widthtd"><strong>上架状态</strong></td>
            <td>{$info.is_sell_text}</td>
        </tr>
        <tr>
            <td class="widthtd"><strong>浏览量</strong></td>
            <td>{$info.click}</td>
            <td class="widthtd"><strong>播放量</strong></td>
            <td>{$info.tvclick}</td>
        </tr>
        <tr>
            <td class="widthtd"><strong>封面图</strong></td>
            <td><img width="50" height="50" src="{$info.thumbpath}" class="imgclick" /></td>
            <td class="widthtd"><strong>详情图</strong></td>
            <td><img width="50" height="50" src="{$info.thumbpath}" class="imgclick"/></td>
        </tr>
        <tr>
            <td class="widthtd"><strong>审核状态</strong></td>
            <td  colspan="4">
                {if $info.status == 2}
                 {$info.status_text} - {$info.sh_error_desc}

                {else /}
                 {$info.status_text}
                {/if}
            </td>

        </tr>
        </tbody>
    </table>

    <div class="layui-tab layui-tab-card"  lay-filter="demotest">
        <ul class="layui-tab-title">
            <li class="layui-this">课程内容</li>
            <li>课时列表</li>
            <li>章节列表</li>
            <li>作业列表</li>

        </ul>
        <div class="layui-tab-content" >
            <div class="layui-tab-item layui-show">
                <div style="width: 95%; margin: 10px auto;">

                    {$info.content}
                </div>

            </div>
            <div class="layui-tab-item">

                <div class="layui-card-body" style="  padding: 0px 10px !important; ">
                    <div class="layui-card-box" >
                        <table lay-filter="courseclasstwo" id="courseclasstwo"></table>
                    </div>
                </div>

            </div>
            <div class="layui-tab-item">

                    <div class="layui-card-body" style="  padding: 0px 10px !important; ">
                        <div class="layui-card-box" style="width: 850px;">
                            <table lay-filter="courseclasscategory" id="courseclasscategory"></table>
                        </div>
                    </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-card-body" style="  padding: 0px 10px !important; ">
                    <div class="layui-card-box" style="width: 850px;">
                        <table lay-filter="coursework" id="coursework"></table>
                    </div>
                </div>

            </div>

        </div>


    </div>




</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var course_id = "{$info.id}";
    layui.use(['buildItems', 'form', 'laydate', 'util','vinfo','element'], function () {

        var layer = layui.layer,table=layui.table,form=layui.form,admin=layui.admin;
        var element = layui.element;
        /*解析顶部分组选项*/
        var map_root = layui.cache.maps;
        //章节列表
        table.render({
            elem: '#courseclasscategory',
            page: true,
            limit:20,
            height: 'full-341',
            url: map_root+"/course.course_class_category/index?&do=json",
            where:{course_id:course_id},
            cols: [[
                {field:'id',width:50,align:'center',title:'ID',sort:!0},
                {field:'title',align:'center',title:'章节名称'},
                {field:'username',width:120,align:'center',title:'发布者',templet:'<div>{{d.user_info.username}}</div>'},
                {field:'createtime',width:160,align:'center',title:'创建时间'},
            ]],

        });


        table.render({
            elem: '#courseclasstwo',
            page: true,
            limit:20,
            height: 'full-341',
            url: map_root+"course.course_class/index?&do=json",
            where:{course_id:course_id},
            cols: [[
                {field:'id',width:50,align:'center',title:'ID',sort:!0},
                {field:'title',width:200,align:'center',title:'课时名称'},
                {field:'course_class_cate',width:200,align:'center',title:'所属章节'},
                {field:'course_title', width:200, align:'center',title:'所属课程'},
                {field:'username',width:120,align:'center',title:'发布者',templet:'<div>{{d.user_info.username}}</div>'},
                {field:'createtime',width:120,align:'center',title:'创建时间'},
                {field:'issktext',width:120,align:'center',title:'是否试看'},
                {fixed:'right',width:130,align:'center',toolbar:'<div><a class="layui-btn layui-btn-xs" lay-event="clicktv">查看视频</a></div>',title:'操作'}
            ]],
            done: function(){

                admin.vShow($('[lay-table-id="courseclasstwo"]'));

            }
        });

        table.render({
            elem: '#coursework',
            page: true,
            limit:20,
            height: 'full-341',
            url:  map_root+"course.course_work/index?&do=json",
            where:{course_id:course_id},
            cols: [[

                {field:'id',width:50,unresize:true,align:'center',title:'ID',sort:!0},
                {field:'title',align:'center',title:'作业标题'},
                {field:'course_title',align:'center',title:'所属课程'},
                {field:'username',width:120,align:'center',title:'发布者',templet:'<div>{{d.user_info.username}}</div>'},
                {field:'createtime',width:160,align:'center',title:'创建时间'},
                {fixed:'right',width:130,align:'center',toolbar:'<div><a class="layui-btn layui-btn-xs"  lay-event="workdetail">详情</a></div>',title:'操作'}
            ]],
            done: function(){ admin.vShow($('[lay-table-id="coursework"]'));

            }
        });

        //一些事件
        element.on('tab(demotest)', function(data){
            console.log(data);
            if(data.index === 1){
                table.reloadData('courseclasstwo');
            }
        });

        /*工具条监听*/
        table.on('tool(courseclasstwo)', function(obj){
            var data = obj.data;

            if(obj.event === 'clicktv'){
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 1, // page 层类型
                    area: ['500px', '450px'],
                    title: data.title,
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '<div style="text-align: center;"><video width="480"  controls autoplay>\n' +
                        '  <source src="'+data.tvfilepath+'" type="video/mp4">\n' +
                        '</video></div>'
                });
            }else if(obj.event === 'workdetail'){

                courseOpen(data.id);
            }
        });/**/

        /*工具条监听*/
        table.on('tool(coursework)', function(obj){
            var data = obj.data;

           if(obj.event === 'workdetail'){

                courseOpen(data.id);
            }
        });/**/

    });
    $(".imgclick").click(function (){

        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']});
    });

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

        layer.open({
            type: 2,
            area: ['800px', '600px'],
            title: "作业详情",
            btn: ['确定', '关闭'],
            fixed: false, //不固定
            content: '/admin/course.course_work/detail?id='+id,
            yes: function(index, layero){
                layer.close(index); // 关闭弹窗
            },
        });
    }/**/
    var callbackdata = function () {

    };

</script>
{/block}