{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;
}
.display{ display:none}
.layui-form-label {
    width: 100px;
}
</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="?is=1" method="post" id="editform" enctype="multipart/form-data">
  <input type="hidden" value="{$data.id}" name="id"/>
  <div class="layui-form-item">
    <label class="layui-form-label">卡片名称</label>
    <div class="layui-input-block">
      <input type="text" name="cardname" class="layui-input" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" value="{$data.card_name}">
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">卡片图片<br/><span class="imgsize">宽{$imgsize[0]}px*高{$imgsize[1]}px</span></label>
   	<div class="layui-upload layui-form-label" style="padding-left:0;">
		<input type="file" name="img"  id="imginput" /><br/>
		<img src="__PUBLIC__/uploads/{$data.card_img}" id="imgbox" width="200" height="200"/>
	</div>
  </div>
  <div class="layui-form-item" >
    <label class="layui-form-label">卡片类型</label>
    <div class="layui-input-block">
      {if condition="$data.card_type eq 1"}
        <input type="text" name="card_type" class="layui-input" value="礼品卡" disabled>
      {elseif  condition="$data.card_type eq 2"/}
        <input type="text" name="card_type" class="layui-input" value="储值卡" disabled>
      {else /}
        <input type="text" name="card_type" class="layui-input" value="折扣卡" disabled>
      {/if}
    </div>
  </div>
  <div class="layui-form-item" id="product" style="display: none">
    <label class="layui-form-label">请选择本卡包含产品</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item" style="display: none" id="money">
    <label class="layui-form-label">卡内金额</label>
    <div class="layui-input-block">
      <input type="text" name="cardbalance" class="layui-input" value="{$data.card_balance}" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">售价</label>
    <div class="layui-input-block">
      <input type="text" name="price" class="layui-input"  autocomplete="off"  value="{$data.price}" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">卡片前缀</label>
    <div class="layui-input-inline">
      <input type="text" name="cardprefix" class="layui-input" lay-verify="required|card_prefix" placeholder="请输入卡片前缀" value="{$data.card_prefix}" >
    </div>
    <div class="layui-form-mid layui-word-aux">卡片生成的前缀</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">折扣</label>
    <div class="layui-input-inline">
      <input type="text" name="discount" class="layui-input" value="{$data.discount}"  placeholder="请输入折扣">
    </div>
    <div class="layui-form-mid layui-word-aux">持卡可打的折扣</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="expiredays" id="expiredays" value="{$data.expire_days}">
    </div>
    <div class="layui-form-mid layui-word-aux">有效的天数,0表示终生</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="ordernum" id="ordernum" value="{$data.order_num}" >
    </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" name="status" value="1" title="开启" {$data.status==1?checked:''}>
      <input type="radio" name="status" value="0" title="暂不开启" {$data.status!=1?checked:''} >
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">卡介绍</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="carddesc">{$data.card_desc}</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">卡片生成数量</label>
    <div class="layui-input-block">
      <input type="text" name="card_num" class="layui-input" value="{$data.card_num}" >
    </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>
$(".back").on('click',function(){
	location.href="{:url('vip/card/index')}";
});
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //同时绑定多个
  lay('.test-item').each(function(){
    laydate.render({
      elem: this
      ,trigger: 'click'
      ,type: 'datetime'
    });
  });
  
});
layui.use('form', function(){
  var form = layui.form;
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 2){
        return '标题也太短了吧';
      }
    },
    card_prefix: function(value){
      var regs = /[^a-z|A-Z|\-|_]{0,5}/g;
      if(value.length > 5){
        return '请输入5位前缀';
      }
      if(!regs.test(value)){
        return '请输入正确的格式';
      }
    }
    ,pass: [/(.+){6,50}$/, '密码必须6到50位']
  });

  //事件监听
  form.on('select', function(data){
    //获取卡片类型的数据
    var card_type = $("#card_type").val();
    if (card_type == 2) {
      //储值卡
      $("#money").show();
    } else if (card_type == 1) {
      //礼品卡
      $("#product").show();
    } else if (card_type == 3) {
      //折扣

    }
  });
 
  form.on('radio', function(data){
    console.log(data);
  });
  
  //监听提交
  form.on('submit(*)', function(data){
	title = $.trim($("input[name=cardname]").val());
	var formid = document.getElementById("editform");
	var sformData = new FormData(formid);   
	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) {
                  window.location.href="{:url('vip/card/index')}";
                }
              });
			}else{
				layer.msg('修改失败', {
				    icon: 2
				});
			}
		}})
	}
    return false;
  });
});

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

// 图片显示处理函数
function imgView(filedom){
	console.log(filedom);
	// 判断是否支持fileReader
	if(window.FileReader){
		var reader = new FileReader();
		// 获取文件
		var file = filedom.files[0];
		var imagetype = /^image\//;
		// 判断是否是图片
		console.log(file);
		console.log(file.type); 
		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>