{include file="common/head"/}
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{:$title}</legend>
    </fieldset>
<form class="layui-form layui-form-pane"  action="" lay-filter="card_info">
<div class="layui-tab layui-tab-card" lay-filter="demo">
  <input type="hidden" value="1" name="card_from_type">
  <input type="hidden" value="" id="card_id" name="card_id">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="1">1.选择卡券类型</li>
    <li lay-id="2">2.填写卡券信息</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item  layui-show" id="card_list_div">
        <table class="layui-table" id="card_list" lay-filter="card_list"></table>
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button type="button" class="layui-btn" style="float:right;" onclick="opentab(2)">下一步</button>
            </div>
        </div>
    </div>
    <div class="layui-tab-item">
        <div class="layui-form-item">
        <label class="layui-form-label">卡券名称</label>
        <div class="layui-input-inline">
          <input type="text" name="title" lay-verify="required" lay-reqtext="卡券名称是必填项，岂能为空？" id="title" autocomplete="off" placeholder="请输入卡券名称" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">例如进店红包，顾客在领取时将看到这个名字</div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">卡券金额</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price" id="price" lay-verify="number" lay-verify="required" placeholder="￥" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">元</div>
        </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">卡券有效期</label>
              <div class="layui-input-inline" style="width: 300px;">
                <input type="text" name="date" id="date" readonly placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">该期间内可以消费使用</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button type="button" class="layui-btn" lay-submit="" lay-filter="submit_add_card">完成创建</button>
              <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
              <button type="button" class="layui-btn" onclick="opentab(1)">返回</button>
            </div>
        </div>  
    </div>
  </div>
</div>   
</form>    
</div>
{include file="common/foot"/}

<script type="text/html" id="sTpl">
     {{#  if(d.card_id == 1){ }}
        <span style="color: #0000C6;">{{ d.card_name }}</span>
      {{#  } else { }}
        {{ d.card_name }}
      {{#  } }}
</script>

<script>
    layui.use(['table','form','element','laydate'], function() {
        var table = layui.table,laydate = layui.laydate,form = layui.form,$ = layui.jquery,layer = layui.layer,element = layui.element;
        form.render(); //更新全部

        var tableCr = table.render({
            elem: '#card_list',
            url: '{:url("cardtypelist")}',
            method: 'post',
            cols: [[
                {field: 'card_id', title: '类型ID', align: 'center'},
                {field: 'card_name', title: '卡券类型名称', align: 'center', templet: '#sTpl'},
                {field:'card_desc', title: '卡券类型描述'},
                {type:'radio', title: '选择', align: 'center',width:100}
            ]]
            ,id: 'cardtypeReload',
            done: function(res, curr, count){
                //部分单选按钮不可选中
                for(var i = 0;i<res.data.length;i++){
                    var state = res.data[i].card_id;
                    if(state != 1 && res.rel==2){
                        //console.log(res.data[i]);return;
                        var index = res.data[i]['LAY_TABLE_INDEX'];
                        //按钮不可点击
                        $("div").children("#card_list_div tr[data-index="+index+"] input[type='radio']").prop("disabled","disabled");
                        //重新渲染按钮
                        form.render('radio');
                    }
                }
          }
        });

        //添加卡券
        form.on('submit(submit_add_card)', function (data) {
            if(data.field.card_id==''){
                layer.msg('请勾选卡券类型！', {time: 1000, icon: 2});return;
            }
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('add_card')}", data.field, function (res) {
                layer.close(loading);
                if (res.code == 1) {
                    layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                        window.parent.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1000, icon: 2});
                }
            });
        })

        //触发单选按钮时赋值
        table.on('row(card_list)', function(obj) {
            if(obj.data.card_id==1)
                $('#card_id').val(obj.data.card_id);
        });

        //日期时间范围
        laydate.render({
            elem: '#date'
            ,type: 'datetime'
            ,range: true
            ,min: 0
            ,trigger:'click'
        });
    })
function opentab(id){
    layui.use(['element'], function() {
        var element = layui.element;
        element.tabChange('demo', id);
    })
}
</script>