{layout name="layout" /}
<style>
a ,a:hover{
    color: #fff;
    text-decoration: none;
}
.set_con {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    min-width: 1130px;
    overflow: auto;
    box-sizing: border-box;
    padding-left: 50px;
}
.layui-form-item {
    /* margin-bottom: 15px; */
    clear: both;
    width: 1130px;
    margin: 10px 0;
    float: left;
}
.layui-input, .layui-textarea {
    width: 190px;
}
#if_con {
    overflow: auto;
	background:#fff;
}
.height150{
	height:150px;
}
.layui-form-label {
    width: 100px;
}
.display{ display:none}
</style>
<div class="if_wrap">
<div id="if_con">
     <div class="cus-con">
         <div class="set-top">
             {$topmenu}
         </div>
<form class="layui-form layui-form-pane1" action="{:url('vip/Mcvideo/add');}" method="post" id="addform" enctype="multipart/form-data">
  <div class="layui-form-item">
    <label class="layui-form-label">视频标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" class="layui-input" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" value="">
    </div>
  </div>
    <div class="layui-form-item">
        <label class="layui-form-label">视频内容</label>
        <div class="layui-input-block">
            <textarea type="text" name="content"  style="width: 250px;height: 100px;" class="layui-input" lay-verify="required|title" required placeholder="请输入内容" autocomplete="off" value="">
            </textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">视频链接</label>
        <div class="layui-input-block">
            <input type="text" name="url" class="layui-input" lay-verify="required|title" required placeholder="请输入链接" autocomplete="off" value="">
        </div>
    </div>
  <div class="layui-form-item">
    <label class="layui-form-label">视频图片<br/></label>
   	<div class="layui-upload layui-form-label" style="padding-left:0;">
		<input type="file" name="image"  id="imginput" lay-verify="img"/><span class="imgsize">宽100px<br>高73px</span><br/>
		<img src="" id="imgbox" width="200" height="200" class="display"/>
	</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" >排序数字</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input"  name="sort" id="ordernum"  value="100" lay-verify="num" placeholder="请输人数字" >
    </div>
    <div class="layui-form-mid layui-word-aux">数字越大后台显示越靠前</div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">是否为唯映像</label>
    <div class="layui-input-block">
      <input type="radio" lay-filter="open" name="is_weiying" class="open" value="1" title="唯映像" >
      <input type="radio" lay-filter="open" name="is_weiying" class="open" value="0" title="分部" checked>
      <div class=" layui-word-aux">默认为分部</div>
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">是否开启</label>
    <div class="layui-input-block">
      <input type="radio" name="is_show" value="1" title="开启" checked>
      <input type="radio" name="is_show" value="0" title="暂不开启" >
    </div>
  </div>
  <div class="layui-form-item height150">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary back">返回</button>
    </div>
  </div>
</form>
</div>
</div></div>
<script>
  $(document).ready(function(){
    $("#money").hide();
    $("#product").hide();
    $("#pass").hide();
  });

$(".back").on('click',function(){
	location.href="{:url('vip/Mcvideo/index')}";
});
layui.use('form', function(){
  var form = layui.form;
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 2){
        return '标题也太短了吧';
      }
    },
    img:function(value){
      if(value.length <1){
        return '图片不能为空';
      }
    }
  });

  //事件监听
  form.on('radio', function(data){
  });
  
  //监听提交
  form.on('submit(*)', function(data){
	title = $.trim($("input[name=title]").val());
	var formid = document.getElementById("addform");
	var sformData = new FormData(formid);
  var is_weiying = $("input[name='is_weiying']:checked").val();

	if(title){
		$.ajax({
			type:'post',
			data:sformData,
			processData: false,  // 不处理数据
			contentType:false,
			success:function(s){
			if(s.status==1){
              layer.open({
                content: '恭喜您添加成功！',
                btn: ['确认'],
                yes: function(index, layero) {
                  if(is_weiying == 1){
                    window.location.href="{:url('vip/Mcvideo/wei_index')}";
                  }else{
                    window.location.href="{:url('vip/Mcvideo/index')}";  
                  }
                }
              });
			}else{
                console.log(s.msg);
				layer.msg(s.msg, {
				    icon: 2
				});
			}
		}})
	}
    return false;
  });
});

// 图片显示
$("#imginput").on('change',function(){
  $("#imgbox").removeClass("display");
	imgView(this);
});

// 图片显示处理函数
function imgView(filedom){
	console.log(filedom);
	// 判断是否支持fileReader
	if(window.FileReader){
		var reader = new FileReader();
		// 获取文件
		var file = filedom.files[0];
		var imagetype = /^image\//;
		// 判断是否是图片
		if(!imagetype.test(file.type)){
			layer.msg('请上传正确图片类型文件', {
			    icon: 2,
			});
			return;
		}
		// 读取完成
		reader.onload = function(e){
			// 获取图片dom
			var img = document.getElementById('imgbox');
			// 图片路径设置为读取的图片
			img.src = e.target.result;
		};
		reader.readAsDataURL(file);
	}
} 
</script>
</body>
</html>