{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="2" name="card_from_type">
  <input type="hidden" value="" id="seller_id" name="seller_id">
  <input type="hidden" value="" id="seller_name" name="seller_name">
  <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>
    <li lay-id="3">3.填写卡券信息</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show" id="seller_list_div">
        <div class="demoTable">
          商家名称：<div class="layui-inline">
            <input class="layui-input" name="key" id="key"  placeholder="{:lang('pleaseEnter')}店铺名称" autocomplete="off">
          </div>
          商家来源：
            <div class="layui-input-inline layui-form">
                    <div class="layui-input-8">
                        <select name="channel" id="channel" lay-filter="myselect">
                                <option value="4">全部</option>
                                <option value="1" selected>合作</option>
                                <option value="2">推广</option>
                                <option value="3">测试</option>
                        </select>
                    </div>
            </div>
          <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
        </div>
        <table class="layui-table" id="list" lay-filter="list"></table>
    </div>
    <div class="layui-tab-item" id="card_list_div">
        <table class="layui-table" id="card_list" lay-filter="card_list"></table>
    </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="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" lay-verify="required" 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>
            </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 tableIn = table.render({
            elem: '#list',
            url: '{:url("sellerlist")}',
            method: 'post',
            cols: [[
                {field: 'id', title: '商家编号', align: 'center'},
                {field: 'sellername', title: '商家名称', align: 'center'},
                {type:'radio', title: '选择店铺',field:'id', align: 'center',width:100}
            ]]
            ,id: 'reload'
            ,page: true
            ,done: function(res, curr, count){
                return;
          }
        });

        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) {
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            //$("#text").attr("data_obj")
            //var trclass = $("div").children("#seller_list_div tr").attr('class',true);
            //console.log(trclass);return;
            //$("div").children("#card_list_div").attr("class");
            //console.log(table.checkStatus(id));return;
            $.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(list)', function(obj) {
            $('#seller_id').val(obj.data.id);
            $('#seller_name').val(obj.data.sellername);
        });

        //触发单选按钮时赋值
        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
        });

        //搜索
        $('#search').on('click', function() {
            //关键字
            var key = $('#key').val();
            var channel = $('#channel').val();
            //传参
            tableIn.reload({ page: {page: 1},where: {key: key,channel: channel}});
        });

        var $ = layui.$, active = {
            reload: function(){
              var channel = $('#channel');
              var key = $('#key');
                //执行重载
                table.reload('reload', {
                page: {
                  curr: 1 //重新从第 1 页开始
                }
                ,where: {
                  key: {
                    id: key.val(),
                    channel: channel.val()
                  }
                }
                });
            }
        };
    })
</script>