<?php
/**
 * 视频上传
 * $Id: media_upload.php,v 1.1 2020/01/03 11:18:46  Exp $
 * @author lixq
 * @package manager.public_html
 **/

?>
<div id="change">
	<p class="edit_title">视频上传</p>
	<form id="form" name="media_upload" action="media_upload_result.php" enctype="multipart/form-data">
	<input name="post_max" type="hidden" value="<?=ini_get('post_max_size')?>">
		<input name="upload_max" type="hidden" value="<?=ini_get('upload_max_filesize')?>">
	<div class="edit_content">
		<p>视频名称</p>
		<el-input v-model="title" name="title" class="input_200"></el-input><br />
		<p>视频标签</p>
		<el-input v-model="tags" name="media_tags" class="input_200 popselect" readonly onfocus="doCheckPopup('media_upload','media_tags','tags','pop_tag_list.php');"></el-input>
		<input type="hidden" name="tags"  />
		<el-button type="primary" class="height_30" @click="selectClear('media_upload', 'media_tags', 'tags');">清空</el-button>
		<el-button type="primary" class="height_30" @click="popAddTag()">添加标签</el-button>
		<br />
		<p>讲师姓名</p>
		<el-input v-model="teacher" name="teacher" class="input_200"></el-input><br />
		<p>视频封面图</p>
		<a href='javascript:void(0);' class="el-button el-button--primary blueButton">选择文件</a>
			<input id="image_file" class="myFileUpload" name="front_image" type="file" accept="image/*"/>
		<div id="img_thumbnail">
    	<img id="imgshow" height="150px" alt="学校封面图" />
		</div>
		<p>视频类型</p>
		<template>
  		<el-radio v-model="media_type" name="media_type" label="0">单个</el-radio>
  		<el-radio v-model="media_type" name="media_type" label="1">合集</el-radio>
		</template>
		<div v-if="is_course_show">
  		<p>选择合集</p>
  		<el-input v-model="course_name" name="course_name" class="input_200 popselect" readonly onfocus="doCheckPopup('media_upload','course_name','course_id','pop_media_list.php');"></el-input>
  		<input type="hidden" name="course_id"  />
  		<el-button type="primary" class="height_30" @click="selectClear('media_upload', 'course_name', 'course_id');">清空</el-button>
  		<el-button type="primary" class="height_30" @click="popAddCourse()">创建合集</el-button>
  		<br />
		</div>
		<p>视频种类</p>
		<template>
  		<el-radio v-model="media_kind" name="media_kind" label="false">志愿免费</el-radio>
  		<el-radio v-model="media_kind" name="media_kind" label="true">公益收费</el-radio>
		</template>
		<div v-if="is_price_show">
  		<p>收费价格</p>
  		<el-input v-model="price" name="price" type="number" class="input_200"></el-input><br />
  		<br />
		</div>
		<p>上传视频</p>
		<el-upload
      class="upload-demo"
      accept="audio/mp4, video/mp4"
      :before-upload="onBeforeUpload"
      :auto-upload="false"
      :on-change="handleChangeVedio"
      name="media_file"
      :file-list="fileList">
      <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
      <div slot="tip" class="el-upload__tip">只能上传mp4文件,最大限制<span id="file_max_size"></span>B</div>
    </el-upload>
		
		<br/><br/>
		<el-button type="primary" @click="submit()" class="edit_btn">上传发布</el-button><br/><br/>
	</div>
	</form>
</div>

<script type="text/javascript">
	var v = new Vue({
		el:'#change',
		data:{
		  title:'',
		  tags:'',
		  media_type:'0',
		  teacher:'',
		  media_kind:'false',
		  price:'',
		  course_name:'',
		  is_course_show:false,
		  is_price_show:false,
		  imgFileList:[],
		  fileList:[],
		  teacher_profile:'',
		  courseImgFileList:[]
		},
		watch:{
		  media_type(val,oldval){
				if(val == "0"){
				  this.is_course_show = false;
				}else{
					this.is_course_show = true;
				}
		  },
		  media_kind(val,oldval){
				if(val == 'false'){
				  this.is_price_show = false;
				}else{
					this.is_price_show = true;
				}
		  }
		},
		methods:{
			submit:function(){
				if(!this.title){
					this.$message({
		            type: 'error',
		            message: '请输入视频名称!'
		          });
		          return;
				}
				$('#form').submit();
			},
			handleChangeImg(files, imgFileList) {
			   if (imgFileList.length > 1) {
			     imgFileList.splice(0, 1);
			   }
			},
		 	onBeforeUploadImg:function(file){
	      const isImg = (file.type === 'image/png'||file.type ==='image/gif'||file.type ==='image/jpg'||file.type ==='image/jpeg');
	      const isLt = file.size / 1024 / 1024 < 2;
	      if (!isImg) {
	        this.$message.error('上传文件只能是图片格式!');
	      }
	      if (!isLt) {
	        this.$message.error('上传文件大小不能超过 2MB!');
	      }
	      return isImg && isLt;
	    },
			handleChangeVedio(files, fileList) {
			   if (fileList.length > 1) {
			     fileList.splice(0, 1);
			   }
			},
		  onBeforeUpload:function(file){
		    var max_size = $('#file_max_size').html().substr(0, $('#file_max_size').html().length - 1)
	      const isMp4 = (file.type === 'audio/mp4'||file.type ==='video/mp4');
	      const isLt = true;//file.size / 1024 / 1024 < max_size;
	      if (!isMp4) {
	        this.$message.error('上传文件只能是mp4格式!');
	      }
	      if (!isLt) {
	        this.$message.error('上传文件大小不能超过 '+max_size+'MB!');
	      }
	      return isMp4 && isLt;
	    }
		}
	})
	window.onload = function(){
  	$('#image_file').change(function(){
      var file = $('#image_file').get(0).files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(e){
        $('#imgshow').get(0).src = e.target.result;
      }
      $('#img_thumbnail').css("visibility","visible");
    })
	}
</script>