{% load staticfiles %}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="format-detection" content="telephone=no,email=no,address=no">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>课程详情</title>

        <link href="//res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css" rel="stylesheet" type="text/css" />
        <link href="{% static 'page/css/weui.ext.css' %}?v=1" rel="stylesheet" type="text/css" />

        <style>
            .container {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: #efefef;
            }
            .video_wrapper, .video_select {
                width: 100%;
                background: #fff;
                margin-bottom: 10px;
                box-sizing: border-box;
            }
            .video_text, .video_select {
                padding: 15px;
            }
            .course_video_name, .video_select_text {
                font-size: 18px;
                font-weight: bold;
                color: #020001;
                padding-bottom: 10px;
            }
            .course_video_desc {
                font-size: 12px;
                color: #999;
            }
            .video_select_item {
                width: 100%;
                text-align: center;
                height: 40px;
                line-height: 40px;
                color: #020001;
                border: 1px solid #e1e1e1;
                border-radius: 5px;
                margin-bottom: 15px;
            }
            .video_selected {
                color: #ce8f8a !important;
                border: 1px solid #ce8f8a;
            }
        </style>
    </head>
    <body>
        <div class="container" >
            <div class="video_wrapper">
                <video id="video" width="100%" height="100%" autoplay controls x-webkit-airplay="true" webkit-playsinline="" playsinline="true" preload="none" poster="" src="{{ video_default.course_video_url }}" data-cursrc="1"></video>
                <div class="video_text">
                    <div class="course_video_name">{{ video_default.course_video_name }}</div>
                    <div class="course_video_desc">{{ video_default.course_video_desc }}</div>
                </div>
            </div>

            <div class="video_select">
                <div class="video_select_text">选择视频</div>
                {% for video in videos %}
                    <div id="video{{ forloop.counter }}" class="video_select_item {% ifequal forloop.counter 1 %}video_selected{% endifequal %}" data-src="{{ video.course_video_url }}">{{ video.course_video_type }}</div>
                {% endfor %}
            </div>
        </div>

        <script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
        <script src="//cdn.bootcss.com/video.js/6.2.8/video.min.js"></script>
        <script>
            $(function() {
                var video_count = {{ video_count }};

                $('.video_select_item').click(function () {
                    $this = $(this);
                    $('.video_select_item').removeClass('video_selected');
                    $this.addClass('video_selected');
                    $('#video').attr('src', $this.attr('data-src'));
                })

                $('#video')[0].onended = function() {
                    var curscr = $(this).attr('data-cursrc');
                    if (curscr >= video_count) {
                        return
                    }
                    var next_video = $('#video' + (parseInt(curscr) + 1));
                    $('#video').attr('src', next_video.attr('data-src'));
                    $('.video_select_item').removeClass('video_selected');
                    next_video.addClass('video_selected');
                };
            });
        </script>
        <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script type="text/javascript" src="{% static 'course/js/jswe-0.0.1.js' %}"></script>
        <script>
            V.initWxData({
                imgUrl: 'http://pai.ai/static/pai2/img/paiai_96_96.png',
                link: 'http://api.pai.ai/wx_oauth2?redirect_url=http://tamron.xfoto.com.cn/page/clerk',
                desc: '店员授权',
                title: '店员授权',
                timeLine: ''
            }, true);
            V.hideOptionMenu();

            $('#scan').click(function () {
                V.scanQRCode({
                    needResult: 1
                });
            });
            V.wxScanQRCodeSuccess = function (res) {
                $('#code').val(V.parseScanQRCodeResultStr(res.resultStr));
            }
        </script>
    </body>
</html>