{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="" 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="cardname" 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/><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" lay-verify="img"/><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-block">
        <select name="card_type" id="card_type" lay-verify="required">
          <option value="0">请选择卡类型</option>
          <!--<option value="1">礼品卡</option>-->
          <option value="2">储值卡</option>
          <option value="3" selected>折扣卡</option>
        </select>
    </div>
  </div>
 
  <div class="layui-form-item" id="pass">
    <label class="layui-form-label">初始密码</label>
    <div class="layui-input-block">
      <input type="text" name="card_pass" class="layui-input" lay-verify="card_pass" placeholder="默认密码666666" autocomplete="off"  value="" >
    </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" lay-verify="money" value="0" placeholder="请输入售价">
    </div>
  </div>
  <div class="layui-form-item" id="money"  style="display: none">
    <label class="layui-form-label">卡内金额</label>
    <div class="layui-input-block">
      <input type="text" name="cardbalance" class="layui-input" value="" lay-verify="initmoney"  placeholder="请输卡内金额">
    </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" id="cardprefix" lay-verify="required|card_prefix" required placeholder="请输入5位前缀" autocomplete="off" value="" >
      <div class="layui-form-mid layui-word-aux">请输入a-zA-Z_0-9数字字母组合5位</div>
    </div>
    <div class="layui-form-mid layui-word-aux">卡片生成的前缀</div>
  </div>
  <div class="layui-form-item" id="discount">
    <label class="layui-form-label">折扣</label>
    <div class="layui-input-inline">
      <input type="text" name="discount" class="layui-input" value="" lay-verify="discount" placeholder="请输入折扣" maxlength="4">
    </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="0" lay-verify="num"  placeholder="请输入有效的天数">
    </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="0" 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" name="status" value="1" title="开启" checked>
      <input type="radio" name="status" value="0" title="暂不开启" >
    </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"></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="100" >
    </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/card/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 '图片不能为空';
      }
    },card_prefix: function(value){
      var regs = /^[a-zA-Z_0-9]{0,5}/g;
      if(value.length > 5){
        return '请输入5位前缀';
      }
      if(!regs.test(value)){
        return '请输入正确的格式';
      }
    },card_pass:function(value){
      var selectVal = $("select[name=card_type]").val();
      if(selectVal==2){
			var regs = /^[0-9]{6,10}$/;
			if (!regs.test(value)) {
				return '请输入6到10位数字密码';
			}
      }
    },money:[/^[0-9]+(.[0-9]{0,2})?$/,'请输入正确的金额,格式如：10.00或10']
	,initmoney:function(value){
      var selectVal = $("select[name=card_type]").val();
      if(selectVal==2){
			var regs = /^[0-9]+(.[0-9]{0,2})?$/;
			if (!regs.test(value)) {
				$(this).focus()
				return '请输入正确的卡内金额,格式如：10.00或10';
			}
      }
	},discount:function(value){
		var val = 100*value;
		if(!val || val>1000 || val<100){
			return '输入正确的折扣值,1-10之间的数值';
		}
		
	}
	,num:[/^\d*$/,'请输入正确的数字'],
//    ,card_pass: [/(.+){6,10}$/, '密码必须6到50位']
  });

  //事件监听
  form.on('select', function(data){
    //获取卡片类型的数据
    var card_type = $("#card_type").val();
    var shop = $(".shop").val();
    if (card_type == 2) {
      //储值卡
      $("#shop").hide(); //店面
      $("#money").show();  //显示卡内金额
      $("#pass").show();
    } else if (card_type == 1) {
      //礼品卡
      $("#shop").show();  //店面
      $("#product").hide(); //产品
      $("#discount").hide(); //折扣
      $("#pass").hide();  //卡密码
    } else if (card_type == 3) {
      //折扣
      $("#pass").hide();  //卡密码
      $("#money").hide();  //卡内金额
      $("#product").hide(); //产品
      $("#shop").hide(); //店面
    }
    //选择完店面之后选择所属产品



  });
  form.on('radio', function(data){
  });
  
  //监听提交
  form.on('submit(*)', function(data){
	title = $.trim($("input[name=cardname]").val());
	var formid = document.getElementById("addform");
	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(){
  $("#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>