<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/iview.css" rel="stylesheet" />
    <link href="../css/mobile.min.css" rel="stylesheet" />
    <script src="../js/vue.min.js"></script>
    <script src="../js/iview.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/mobile_config.js"></script>
    <script src="../js/mobile.min.js"></script>

    <style type="text/css">
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="outter" id="vueContent-divs" v-cloak>
        <div class="app-header">
            <div id="wx-header">
                <div class="other">
                   <span onclick="openPageMenu('courseRecord.html')"> << </span>
                </div>
                <div class="center" id="app-header-info">
                    <span><b>{{table_list_course_name}}</b></span>
                </div>
            </div>
        </div>
        <div class="app-content">
            <template v-if="table_list_items.length>0">
                <div class="ware_list_div" v-for="item in table_list_items" style="width:100%;text-align:left;padding:0.6rem 0.4rem 0.6rem 0.4rem; ">
                    <ul>
                        <li class="title" style="width: 100%;">{{item.extenKey1}}</li>
                        <li class="title" style="width: 100%;color:#999;">
                            <span>
                                课件时长：{{secondToDate(item.extenKey2)}}
                            </span>
                            <span style="margin-left:3rem;">
                                已学{{secondToDate(item.duration)}}，已学{{item.count}}次
                            </span>
                        </li>
                        <li class="title" style="width: 100%;color:#999;">
                            最早学习：{{formatMsgTime(item.createTime)}}
                        </li>
                        <li class="title" style="width: 100%;color:#999;">
                            最近学习：{{formatMsgTime(item.updateTime)}}
                        </li>
                    </ul>
                </div>
                <div class="clear"></div>

                <div class="miidy_load_more_div">
                    <i-Button v-if="table_list_next_more" @click="event_table_btn_load_more()">加载更多…</i-Button>
                </div>
            </template>
            <template v-else>
                <div class="table_list_not_data_text">
                    <p><img src="../images/iconfont-empty.png" /></p>
                    <p> 没有找到您可用的数据</p>
                    <p> 请到别的地方先逛逛后再回来吧</p>
                </div>
            </template>
        </div>
        <div class="app-footer">
        </div>
    </div>
    <script type="text/javascript">
    var menu_vue = new Vue({
        el: '#vueContent-divs',
        data: {
            table_list_course_name: '',
            //--------------------------列表-----------------
            table_list_items: [],
            table_list_pageTotal: 0,
            table_list_pageSize: 10,
            table_list_pageIndex: 1
        },
        mounted: function () {
            hashLogin();
            getPageFooter(3);
            this.init_table_list_items();
        },
        methods: {
            //获取课程学习记录信息
            init_table_list_items: function () {
                var then = this;
                then.table_list_course_name = decodeURI(getUrlParam('cName'));
                var url = "WareRecord/GetDataByUser";
                var data = {
                    "courseRecordId": getUrlParam('courseRecordId'),
                    "keyWord": this.table_search_keywordString,
                    "pageSize": this.table_list_pageSize,
                    "pageIndex": this.table_list_pageIndex
                };
                then.loadingCustom();
                httpRequestByObjectAsync(url, "get", data, false, function (result) {
                    if (result.code == 200) {
                        then.table_list_pageTotal = result.textValue;
                        then.table_list_items = result.jsonValue;
                        var size = then.table_list_pageSize * then.table_list_pageIndex;
                        if (then.table_list_pageTotal > size)
                            then.table_list_next_more = true;
                        else
                            then.table_list_next_more = false;
                    } else if (result.code == 212) {
                        then.table_list_pageTotal = 0;
                        then.table_list_items = [];
                    }
                    then.$Spin.hide();
                });
            },
            //显示加载中
            loadingCustom: function () {
                this.$Spin.show({
                    render: (h) => {
                        return h('div', [
                            h('Icon', {
                                'class': 'demo-spin-icon-load',
                                props: {
                                    type: 'ios-loading',
                                    size: 20
                                }
                            }),
                            h('div', '努力处理中…')
                        ]);
                    }
                });
            },
            //加载更多事件，分页
            event_table_btn_load_more: function () {
                this.table_list_pageIndex += 1;;
                this.init_table_list_items();
            }
        }
    });
    </script>

</body>
</html>
