<!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('user.html')"> << </span>
                    </div>
                    <div class="center" id="app-header-info">
                        <span><b>我的课程学习记录</b></span>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div class="sys-tab-header-div">
                <ul>
                    <li v-for="(tabItem,tabIndex) in  page_class_items" :class="tabItem.id==table_search_state?'sys-tab-header-div-li-select':''" @click="event_table_state_change(tabItem.id)">
                        {{tabItem.text}}
                    </li>
                </ul>
            </div>
            <div class="app-content" style="padding:0rem 0rem 4rem 0rem;">
                <template v-if="table_list_items.length>0">
                    <div class="sys-table-div" v-for="item in table_list_items">
                        <a @click="event_table_btn_wareRecord(item)">
                            <div class="sys-table-div_left">
                                <div class="listimg">
                                    <img :src="item.pic==''?'../images/cover-pic.png':item.pic" />
                                </div>
                            </div>
                            <div class="sys-table-div_left" style="width:70%;text-align:left;padding:0.6rem 0.4rem 0.6rem 0.8rem; ">
                                <ul>
                                    <li class="title" style="width: 100%;">{{item.name}}</li>
                                    <li class="title" style="font-weight:200;margin-top:5px;width: 50%;float: left;">课长：{{item.duration}}分钟</li>
                                    <li class="title" style="font-weight:200;margin-top:5px;width: 50%;float: left;">状态：{{convertCourseRecordStateToText(item.extenKey2)}}</li>
                                    <li class="title" style="font-weight:200;margin-top:5px;width: 50%;float: left;">学时：{{item.extenKey1==null?0:item.extenKey1}}分钟</li>
                                    <li class="title" style="font-weight:200;margin-top:5px;width: 50%;float: left;">学次：{{item.extenKey9==null?0:item.extenKey9}}次</li>
                                </ul>
                            </div>
                            <div class="clear"></div>
                        </a>
                    </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: {
					page_class_items: [{
						id: 99,
						text: '全部课程'
					}, {
						id: 1,
						text: '学习中'
					}, {
						id: 2,
						text: '已结束'
					}],
                    //--------------------------列表-----------------
                    table_search_state: 99,
                    table_list_items: [],
                    table_list_pageTotal: 0,
                    table_list_pageSize: 10,
                    table_list_pageIndex: 1,
                    table_list_next_more:false
				},
                mounted: function () {
                    hashLogin();
                    getPageFooter(3);
                    this.init_table_list_items();
				},
                methods: {
                    init_table_list_items: function () {
                        var then = this;
                        var url = "Course/GetDataListByUserPage";
                        var data = {
                            "state": this.table_search_state,
                            "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();
                        });
                    },
                    //加载更多事件，分页
                    event_table_btn_load_more: function () {
                        this.table_list_pageIndex += 1;;
                        this.init_table_list_items();
                    },
                    //显示加载中
                    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_state_change: function (state) {
                        this.table_search_state = state;
                        this.init_table_list_items();
                    },
                    event_table_btn_wareRecord: function (item) {
                         window.location = 'courseReport.html?courseRecordId='+item.extenKey8 + '&cName=' + encodeURI(item.name);
                    }
				}
			});
		</script>

	</body>
</html>
