{include file="common/head"/}
<div class="admin-main layui-anim layui-anim-upbit">
<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="" id="seller_id" name="seller_id" lay-filter="seller_id">
  <input type="hidden" value="" id="seller_name" name="seller_name" lay-filter="seller_name">
  <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="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 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="name" lay-verify="required" lay-reqtext="套餐名称是必填项，岂能为空？" id="name" autocomplete="off" placeholder="请输入套餐名称" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">C端展示的名字</div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">套餐金额</label>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="market_price" id="market_price" lay-verify="number" lay-verify="required" placeholder="原价【市场价】" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="sale_price" id="sale_price" lay-verify="number" lay-verify="required" placeholder="现价【销售价】" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="cost_price" id="cost_price" lay-verify="number" lay-verify="required" placeholder="成本价【进货价】" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">CNY</div>
        </div>
        </div>

        <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">套餐主图</label>
            <div class="layui-upload-drag" id="upload_main">
              <i class="layui-icon"></i>
              <p>点击上传，或将文件拖拽到此处</p>
              <div class="layui-hide" id="uploadDemoViewMain">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                <input type="hidden" value="" id="upload_main_val" name="upload_main_val" lay-filter="upload_main_val">
              </div>
            </div>
        </div>
        </div>

        <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">套餐详情</label>
            <div class="layui-upload-drag" id="upload_detail">
              <i class="layui-icon"></i>
              <p>点击上传，或将文件拖拽到此处</p>
              <div class="layui-hide" id="uploadDemoViewDetail">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                <input type="hidden" value="" id="upload_detail_val" name="upload_detail_val" lay-filter="upload_detail_val">
              </div>
            </div>
        </div>
        </div>

        <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">服务项目</label>
            <div class="layui-input-block">
              <input type="checkbox" name="server" value="随时退" lay-skin="primary" title="随时退">
              <input type="checkbox" name="server" value="免预约" lay-skin="primary" title="免预约">
              <input type="checkbox" name="server" value="包间可用" lay-skin="primary" title="包间可用">
            </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" readonly placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">默认为 xx年xx月xx日 00:00:00 - xx年xx月xx日 23:59:59</div>
            </div>
        </div>

        <div class="layui-form-item">
        <label class="layui-form-label">使用时间</label>
            <div class="layui-input-inline">
              <input type="text" name="usetime" lay-verify="required" id="usetime" autocomplete="off" placeholder="请输入使用时间" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">类似格式: 10：30—14：00，17：00—22：00</div>
        </div>

        <div class="layui-form-item">
        <label class="layui-form-label">使用须知</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入使用须知" lay-verify="required" name="usenotice" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
              <input type="radio" name="status" value="1" lay-skin="primary" title="是">
              <input type="radio" name="status" value="0" lay-skin="primary" title="否" checked>
            </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_foodset">完成创建</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','upload'], function() {
        var table = layui.table,laydate = layui.laydate,form = layui.form,$ = layui.jquery,layer = layui.layer,element = layui.element,upload = layui.upload;
        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;
          }
        });

        //套餐主图 拖拽上传
        upload.render({
            elem: '#upload_main'
            ,url: '{:url("UpFiles/uploadQn")}' //上传接口
            ,done: function(res){
              layer.msg('上传成功');
              layui.$('#uploadDemoViewMain').removeClass('layui-hide').find('img').attr('src', res.url);
              layui.$('#upload_main_val').val(res.url);
              console.log(res)
            }
        });

        //套餐详情 拖拽上传
        upload.render({
            elem: '#upload_detail'
            ,url: '{:url("UpFiles/uploadQn")}' //上传接口
            ,done: function(res){
              layer.msg('上传成功');
              layui.$('#uploadDemoViewDetail').removeClass('layui-hide').find('img').attr('src', res.url);
              layui.$('#upload_detail_val').val(res.url);
              console.log(res)
            }
        });

        //添加套餐
        form.on('submit(submit_add_foodset)', function (data) {
            if(data.field.seller_id==''){
                layer.msg('请勾选商家！', {time: 1800, icon: 2});return;
            }
            if(data.field.upload_main_val==''){
                layer.msg('请上传套餐主图图片！', {time: 1800, icon: 2});return;
            }
            if(data.field.upload_detail_val==''){
                layer.msg('请上传套餐详情图片！', {time: 1800, icon: 2});return;
            }
            //将页面全部复选框选中的值或者单选按钮选中的值拼接到一个数组中
            var val_box = [];
            $('input[type=checkbox]:checked').each(function() {
                val_box.push($(this).val());
            });
            
            data.field.server = val_box;

            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('add_foodset')}", 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);
        });

        //日期时间范围
        laydate.render({
            elem: '#date'
            ,type: 'date'
            ,range: true
            ,min: 0
            ,trigger:'click'
        });

        //搜索
        $('#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()
                  }
                }
                });
            }
        };
    })
//下一步
function opentab(id){
    layui.use(['element'], function() {
        var element = layui.element;
        element.tabChange('demo', id);
    })
}
</script>