<?php
/**
 * 证书管理编辑
 * $Id: certificate_edit_input.inc,v 1.1 2015/10/08 11:18:53 wanggb Exp $
 * @author lixq
 * @access public
 * @package manager.templates
 **/

?>
<div id="change">
	<p class="edit_title">证书管理编辑</p>
	<form id="certificate_edit" action="certificate_edit_result.php" method="post" enctype="multipart/form-data">
	<input type="hidden" name="id" value="<?=$id?>"/>
	<input type="hidden" name="action_type" value="<?=$action_type?>"/>
	<div class="edit_content">
		<p><b>证书名称：</b><el-input v-model="title" name="title" class="input_200"></el-input><br /></p>
		
		<p><b>显示顺序：</b><el-input v-model="display_order" name="display_order" type="number" class="input_200"></el-input><br /></p>
		
		<div slot="tip" class="el-upload__tip" style="padding-left: 120px;">越大显示位置越靠前</div>
		<p><b>封面图：</b><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/*"/></p>
			
			<div id="img_thumbnail" style="padding-left: 120px;">
      	<img id="imgshow" height="150px" alt="学校封面图" />
			</div>
		<br/>
		<el-button type="primary" @click="edit()" class="edit_btn" style="margin-left: 120px;">编辑</el-button>
		<el-button type="primary" @click="back()" class="edit_btn">返回</el-button>
	</div>
	</form>
</div>


<script type="text/javascript">
	
	new Vue({
		el:'#change',
		data:{
			title:'<?=htmlspecialchars($title) ?>',
			display_order:<?=$display_order?>,
			action_type:'<?=$action_type?>'
		},
		methods:{
		  back:function(){
			  window.history.go(-1);
			},
			edit:function(){
				if(!this.title){
					this.$message({
		            type: 'error',
		            message: '请输入证书名称!'
		          });
		      return;
				}
				if(!$('#image_file').get(0).files[0] && this.action_type == "new"){
					this.$message({
		            type: 'error',
		            message: '请选择封面图!'
		          });
		      return;
				}
				$('#certificate_edit').submit();
			}
		}
	})
	window.onload = function(){
		if(<?=$front_image?1:0 ?>){
		  $('#imgshow').get(0).src = '<?=$front_image?>';
		  $('#img_thumbnail').css("visibility","visible");
		  $('#img_thumbnail').css("display","block");
		}
		
  	$('#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");
      $('#img_thumbnail').css("display","block");
    })
	}
</script>