{template 'web/video/no-require-header'}
{template 'web/video/video-header'}
<style type="text/css">
#resultBox {
    width: 96%;
    height: 350px;
    border: 1px solid #ccc;
    overflow: auto;
	margin: 0px;
}
.uploaderMsgBox{
	padding: 10px;
}
</style>
<div class="main">
	<div class="alert alert-info">
	    <span>选择文件后，系统将自动开始上传，上传过程请勿刷新浏览器，否则将导致文件上传失败。</span>
	</div>
	<div class="panel-body">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-lg-1 control-label" style="width:60px;">分类信息</label>
				<div class="col-xs-12 col-lg-2">
					<select class="form-control" id="pid" onchange="firstCategory(this.value)">
						<option value="0" selected="selected">请选择一级分类</option>
						{loop $category_list $item}
						<option value="{$item['id']}">{$item['name']}</option>
						{/loop}
					</select>
				</div>
				<div class="col-xs-12 col-lg-2">
					<select class="form-control" id="cid" onchange="secordCategory(this.value)">
						<option value="0">请选择二级分类</option>
					</select>
				</div>
				<div class="col-xs-12 col-lg-2">
					<select class="form-control" id="ccid">
						<option value="0">请选择三级分类</option>
					</select>
				</div>
			</div>
		</form>
	</div>
	<div class="panel admin-panel">
		<div class="body-content">
			<form id="form1">
				<input id="uploadVideoNow-file" type="file" accept="video/*,audio/mp3" style="display:none;">
				<input type="hidden" id="file_size"  value="0">
				<input type="hidden" id="filename"  value="">
			</form>
			<div class="form-group">
				<div class="field">
					<input type="button" class="btn btn-default" id="uploadVideoNow" value="上传视频">
				</div>
			</div>
			<div class="row" id="resultBox"></div>
		</div>
	</div>
</div>

<script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>
<script type="text/javascript">
	/* 选择分类信息 START */
	var category = {php echo json_encode($category_list)};
	function firstCategory(pid){
		var chtml2 = '<option value="0">请选择二级分类</option>';
		var chtml3 = '<option value="0">请选择三级分类</option>';

		if(pid>0){
			for(var i in category){
				if(category[i].id==pid){
					var second = category[i].second;
					for(var j in second){
						chtml2 += '<option value="' + second[j].id+'">' + second[j].name + '</option>';
					}
					$("#cid").html(chtml2);
					$("#ccid").html(chtml3);
				}
			}
		}else{
			$("#cid").html(chtml2);
			$("#ccid").html(chtml3);
		}
	}

	function secordCategory(cid){
		var pid = $("#pid").val();
		var chtml3 = '<option value="0">请选择三级分类</option>';
		
		if(pid>0 && cid>0){
			for(var i in category){
				if(category[i].id==pid){
					var second = category[i].second;
					for(var j in second){
						if(second[j].id==cid){
							var third = category[i].second[j].third;
							for(var k in third){
								chtml3 += '<option value="' + third[k].id+'">' + third[k].name + '</option>';
							}
						}
					}
					$("#ccid").html(chtml3);
				}
			}
		}else{
			$("#ccid").html(chtml3);
		}
	}
	/* 选择分类信息 END */



	var index = 0;
	var cosBox = [];
	/** 
	 * 计算签名
	**/
	var getSignature = function(callback){
		$.ajax({
			url: "{php echo $this->createWebUrl('qcloudvod', array('op'=>'getUploadInfo'));}",
			type: 'POST',
			data: {filename: $("#filename").val()},
			dataType: 'json',
			success: function(res){
				if(res && res.signature) {
					callback(res.signature);
				} else {
					return '获取签名失败';
				}
			}
		});
	};

	/**
	 * 添加上传信息模块
	 */
	var addUploaderMsgBox = function(type){
		var html = '<div class="uploaderMsgBox" name="box'+index+'">';
		if(!type || type == 'hasVideo') {
			html += '视频名称：<span name="videoname'+index+'"></span><br/>' + 
				'计算sha进度：<span name="videosha'+index+'">0%</span><br/>' + 
				'上传进度：<span name="videocurr'+index+'">0%</span><br/>' + 
				'videoId：<span name="videofileId'+index+'">   </span><br/>' + 
				'上传结果：<span name="videoresult'+index+'">   </span><br/><br>';
		}
		
		if(!type || type == 'hasCover') {
			html += '封面名称：<span name="covername'+index+'"></span>；' + 
			'计算sha进度：<span name="coversha'+index+'">0%</span>；' + 
			'上传进度：<span name="covercurr'+index+'">0%</span>；' + 
			'上传结果：<span name="coverresult'+index+'">   </span>；<br>' + 
			'地址：<span name="coverurl'+index+'">   </span>；<br>' + 
			'</div>'
		}
		html += '</div>';
		
		$('#resultBox').append(html);
		return index++;
	};

	/** 
	 * 直接上传视频
	**/
	$('#uploadVideoNow-file').on('change', function (e) {

		var file = e.target.files[0];
		var file_size = parseFloat((file.size/1024)/1024).toFixed(2);
		$("#file_size").val(file_size);
		$("#filename").val(file.name);

		var num = addUploaderMsgBox('hasVideo');
		var videoFile = this.files[0];
		$('#result').append(videoFile.name +　'\n');
		var resultMsg = qcVideo.ugcUploader.start({
			videoFile: videoFile,
			getSignature: getSignature,
			allowAudio: 1,
			success: function(result){
				if(result.type == 'video') {
					$('[name=videoresult'+num+']').text('上传成功');
					$('[name=cancel'+num+']').remove();
					cosBox[num] = null;
				} else if (result.type == 'cover') {
					$('[name=coverresult'+num+']').text('上传成功');
				}
			},
			error: function(result){
				$('.uploaderMsgBox').append('<br>上传失败，原因：'+result.msg);
			},
			progress: function(result){
				if(result.type == 'video') {
					$('[name=videoname'+num+']').text(result.name);
					$('[name=videosha'+num+']').text(Math.floor(result.shacurr*100)+'%');
					$('[name=videocurr'+num+']').text(Math.floor(result.curr*100)+'%');
					$('[name=cancel'+num+']').attr('taskId', result.taskId);
					cosBox[num] = result.cos;
				} else if (result.type == 'cover') {
					$('[name=covername'+num+']').text(result.name);
					$('[name=coversha'+num+']').text(Math.floor(result.shacurr*100)+'%');
					$('[name=covercurr'+num+']').text(Math.floor(result.curr*100)+'%');
				}
				
			},
			finish: function(result){
				$('[name=videofileId'+num+']').text(result.fileId);
				$('[name=videourl'+num+']').text(result.videoUrl);
				if(result.message) {
					$('[name=videofileId'+num+']').text(result.message);
				}
				saveVideo(result);
			}
		});
		if(resultMsg){
			$('[name=box'+num+']').text(resultMsg);
		}
		$('#form1')[0].reset();
	});

	$('#uploadVideoNow').on('click', function () {
		$('#uploadVideoNow-file').click();
	});

	function saveVideo(result){
		$.ajax({
			url:"<?php echo $this->createWebUrl('qcloudvod', array('op'=>'saveVideo')); ?>",
			data:{
				filename: result.videoName,
				videourl: result.videoUrl,
				videoid: result.fileId,
				size: $("#file_size").val(),
				pid: $("#pid").val(),
				cid: $("#cid").val(),
				ccid: $("#ccid").val(),
			},
			type:'POST',
			dataType:'json',
			success:function(msg){
			}
		});
	}
</script>