<div cg-busy="{promise:loading,backdrop:true,message:'正在加载...'}" ng-controller="LearnCenterUploadCtrl">
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="col-md-3">
				<div class="input-group m-b">
				  <span class="text-danger">指定课程时，请在上传前输入课程代码：</span>
				  <input type="text" class="form-control" ng-model="model.courseCode" placeholder="课程代码">
				</div>
				<div class="m-b">
					<span class="text-danger">当上传的文件名以"课程代码_"开头时，默认关联至指定课程。</span>
				</div>
				<input type="file" style="display:inline;" nv-file-select="" uploader="uploader" multiple/>
			</div>
			<div class="col-md-9">
				<h3>上传文件列表</h3>
                <p>文件数量: {{ uploader.queue.length }}</p>
                
				<table class="table">
					<thead>
						<tr>
							<th>#</th>
							<th>文件名</th>
							<th ng-show="uploader.isHTML5">大小</th>
                            <th ng-show="uploader.isHTML5">进度</th>
							<th>上传状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="item in uploader.queue">
							<td>{{$index+1}}</td>
							<td>{{item.file.name}}</td>
							 <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                             <td ng-show="uploader.isHTML5">
                                 <div class="progress" style="margin-bottom: 0;">
                                     <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                                 </div>
                             </td>
							<td>
								<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
							</td>
							<td nowrap>
                                 <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                     <span class="glyphicon glyphicon-upload"></span> 上传
                                 </button>
                                 <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                     <span class="glyphicon glyphicon-ban-circle"></span> 取消
                                 </button>
                                 <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                     <span class="glyphicon glyphicon-trash"></span> 删除
                                 </button>
                             </td>
						</tr>
					</tbody>
				</table>
				
                <div>
					上传进度:
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> 全部上传
                </button>
                <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> 全部取消
                </button>
                <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> 全部删除
                </button>
			</div>
		</div>
	</div>
</div>
