{extend name="Public/base" /}
{block name="js"}
<script src="__PUBLIC__/item/lay/modules/laypage.js?v={$Think.const.APP_VERSION}"></script>
{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>店面设定</span></div>
        <div class="set-top">
            <button class="layui-btn add-btn" data-type="add">新增店面</button>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="shop_name1"value="{$shop_name}" class="layui-input" placeholder="请输入关键词">
                </div>
                <button class="layui-btn" id="btn">查询</button>
            </div>
        </div>
        <table class="layui-table" lay-data="{height:332, url:'/crm/setting/getstorejson.html', page:true, id:'idTest'}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{width:100,field:'id'}">ID</th>
                <th lay-data="{width:100,field:'brandclass'}">品牌</th>
                <th lay-data="{width:100,field:'shop_name'}">店面名称</th>
                <th lay-data="{width:100,field:'shop_code'}">店面识别</th>
                <th lay-data="{width:100,field:'sn'}">简码</th>
                <th lay-data="{width:100,field:'numberorder'}">单号规则</th>
                <th lay-data="{width:100,field:'shopaddress'}">店面地址</th>
                <th lay-data="{width:100,field:'receiv_shop_code'}">可收款店面</th>
                <th lay-data="{width:200,field:'score', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script>
    layui.use('table', function(){
        var table = layui.table;
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
<!--添加弹窗-->
<div id="add-box" style="display: none;padding:20px;">
    <form class="layui-form" action="">
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label">店面名称：</label>
                <div class="layui-input-block w-200">
                    <input type="text" id="shop_name" lay-verify="title" autocomplete="off" placeholder="请输入店面名称" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">简码：</label>
                <div class="layui-input-block w-150">
                    <input type="text" name="sn" id="jm-text" lay-verify="title" autocomplete="off" placeholder="简码不能是汉字" class="layui-input"onkeyup="value=value.replace(/[\W]/g,'') " >
                </div>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label">品牌：</label>
                <div class="layui-input-block">
                        <select id="brand-class" lay-verify="required">
                            {volist name="brand" id="brand"}
                            <option value="{$brand.brandclass}">{$brand.brandclass}</option>
                            {/volist}
                        </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分配规则：</label>
                <div class="layui-input-block">
                    <select id="fp" lay-verify="required">
                        <option value="1">自动</option>
                        <option value="0">手动</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block w-90">
                    <span class="layui-btn click-btn" id="jm-btn">简码</span>
                </div>
            </div>
            <div class="layui-inline w-90">
                <span class="layui-btn click-btn" id="date-btn">日期</span>
            </div>
            <div class="layui-inline w-90">
                <span class="layui-btn click-btn" id="lsh-btn">流水号</span>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label">单号规则：</label>
                <div class="layui-input-block w-90">
                    <span id="jm-contain" class="layui-input give-text"></span>
                </div>
            </div>
            <div class="layui-inline w-90">
                <span id="date-contain" class="layui-input give-text"></span>
            </div>
            <div class="layui-inline w-150">
                <span id="lsh-contain" class="layui-input  give-text"></span>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="primary" id="tomorrow_reset" title="次日重置" checked="">
                </div>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label">可收款店面：</label>
                <div class="layui-input-block">
                    <ul class="store-list all-list-contain" id="rep">
                        <li id="a">aaa</li>
                        {volist name="shop" id="shop"}
                        <li id="{$shop.sn}">{$shop.shop_name}</li>
                        {/volist}

                    </ul>
                    <span class="layui-icon set-qh">&#xe65b;</span>
                    <ul class="store-list recive-list-contain">

                    </ul>
                </div>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="checkbox" id="all" lay-skin="primary" title="全部店面" checked="">
                </div>
            </div>
        </div>
        <div class="set-row">
            <div class="layui-inline">
                <label class="layui-form-label">店面地址：</label>
                <div class="layui-input-block" style="width: 394px">
                    <input type="text" id="shopaddress" lay-verify="title" autocomplete="off" placeholder="请输入店面地址" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    $('#btn').click(function(){
        table.reload('idTest', {
            url: 'getstorejson'
            ,where: {shop_name:$('#shop_name1').val()} //设定异步数据接口的额外参数
            //,height: 300
        });
    })
    var listStr=function(name){
        var str="";
        for(var i=0;i<$(name).length;i++){
//            var text=$(name).eq(i).html();
            var shop_code=$(name).eq(i).attr("id");
            if(i==$(name).length-1){
                str+=shop_code;
            }else{
                str+=shop_code+',';
            }
        }
        return str;
    };
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
                ,laypage = layui.laypage //分页
        layer = layui.layer //弹层
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element; //元素操作
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var id = obj.data.id;
                    //向服务端发送删除指令
                    $.ajax({
                        type: "POST",
                        url: "{:Url('crm/Setting/delStore')}",
                        data: {id:id},
                        dataType:'json',
                        success: function(ret){
                            if(ret){
                                layer.alert('店面删除成功');
                            }else{
                                layer.alert('店面删除失败');
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            var ret = XMLHttpRequest.responseJSON
                            layer.alert('操作失败');
                        }
                    })
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                var id = obj.data.id;
                $.ajax({
                    type: "POST",
                    url: "editStore",
                    data: {id:id},
                    dataType:'json',
                    success: function(ret){
                        if(ret){
                            $("#shop_name").val(ret.shop_name);
                            $("#jm-text").val(ret.sn);
                            $("#jm-text").val(ret.sn);
                            $("#brand-class  option:selected").text(ret.brandclass);
                            $("#shopaddress").val(ret.shopaddress);
                            $("#add-box").append('<input type="hidden" id="shop_id" value="'+id+'">');
                        }else{
                            layer.alert('未获取到数据');
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        var ret = XMLHttpRequest.responseJSON
                        layer.alert('1操作失败');
                    }
                })
                layer.open({
                    title: '店面信息',
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['570px', '550px'],
                    content: $('#add-box'),
                    btn: ['确认修改']
                    , yes: function (index) {
                        //当点击‘确定’按钮的时候，获取弹出层返回的值
                        var id = $('#shop_id').val();
                        var shopName = $("#shop_name").val();
                        var sn = $("#jm-text").val();
                        var fp = $("#fp").val();
                        var brandClass = $("#brand-class  option:selected").text();
                        var numberOrder = $("#jm-contain").html()+$("#date-contain").html()+$("#lsh-contain").html();
                        var shopAddress = $("#shopaddress").val();
                        var receivShopCcode = listStr(".recive-list-contain li");

                        if (typeof shopName == 'undefined' || shopName == '') {
                            layer.alert('请输入您的店名');
                            return false;
                        }
                        if (typeof sn == 'undefined' || sn == '') {
                            layer.alert('请输入您的简码');
                            return false;
                        }
                        if (typeof brandClass == 'undefined' || sn == '') {
                            layer.alert('请输入您的品牌名');
                            return false;
                        }
                        if (typeof numberOrder == 'undefined' || sn == '') {
                            layer.alert('请输入您的订单规则');
                            return false;
                        }
                        if (typeof shopAddress == 'undefined' || sn == '') {
                            layer.alert('请输入您的店面地址');
                            return false;
                        }
                        var data = "id=" + id + "&shop_name=" + shopName + '&sn=' + sn + '&brandclass=' + brandClass + '&numberorder=' + numberOrder + '&shopaddress=' + shopAddress + '&receiv_shop_code=' + receivShopCcode+'&fp='+fp;

                        $.ajax({
                            type: "POST",
                            url: "updateStore",
                            data: data,
                            dataType: 'json',
                            success: function (ret) {
                                if (ret) {
                                    layer.alert('店面修改成功');
                                } else {
                                    layer.alert('店面修改失败');
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                var ret = XMLHttpRequest.responseJSON
                                layer.alert('编辑店面失败');
                            }
                        })//最后关闭弹出层
                        layer.close(index);
                    }
                });

            }
        });
        //添加店面事件
        $(".add-btn").click(function () {
            layer.open({
                title: '店面信息',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['580px', '700px'],
                content: $('#add-box'),
                 btn: ['确定','关闭'],
                         yes: function(index){
                    //当点击‘确定’按钮的时候，获取弹出层返回的值
                             var shopName = $("#shop_name").val();
                             var sn = $("#jm-text").val();
                             var fp = $("#fp").val();
                             var brandClass = $("#brand-class  option:selected").text();
                             var numberOrder = $("#jm-contain").html()+$("#date-contain").html()+$("#lsh-contain").html();
                             var shopAddress = $("#shopaddress").val();
                            if(typeof shopName == 'undefined' || shopName ==''){
                                 layer.alert('请输入您的店名');
                                 return false;
                             }
                             if(typeof sn == 'undefined' || sn ==''){
                                 layer.alert('请输入您的简码');
                                 return false;
                             }
                             if(typeof brandClass == 'undefined' || sn ==''){
                                 layer.alert('请输入您的品牌名');
                                 return false;
                             }
                             if(typeof numberOrder == 'undefined' || sn ==''){
                                 layer.alert('请输入您的订单规则');
                                 return false;
                             }
                             if(typeof shopAddress == 'undefined' || sn ==''){
                                 layer.alert('请输入您的店面地址');
                                 return false;
                             }
                             var data = "shopName="+shopName+'&sn='+sn+'&brandClass='+brandClass+'&numberOrder='+numberOrder+'&shopAddress='+shopAddress+'&receivShopCode='+receivShopCcode+'&fp='+fp;
                             $.ajax({
                                 type: "POST",
                                 url: "{:Url('crm/Setting/setStore')}",
                                 data: data,
                                 dataType:'json',
                                 success: function(ret){
                                    if(ret){
                                         layer.alert('店面设置成功');
                                     }else{
                                         layer.alert(ret);
                                     }
                                 },
                                 error:function(XMLHttpRequest, textStatus, errorThrown){
                                     var ret = XMLHttpRequest.responseJSON
                                     layer.alert(ret);
                                 }
                             })


                    //打印返回的值，看是否有我们想返回的值。
//                    console.log(data);
                    //最后关闭弹出层
                    layer.close(index);
            }
            });
        });
        //日历
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //单控件
            lay('.test-item').each(function () {
                laydate.render({
                    elem: this
                    , format: 'yyyyMMdd'
                    , value: new Date()
                    , trigger: 'click'
                });
            });
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,url:'getStoreJson'
            ,count: {$count} //总页数
            ,limit:2
//            ,where:{shopName:$shop_name}
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页');
                }
            }
        });
    })
    $(function(){
//        弹窗简码，日期，流水号触发事件
        $("#jm-btn").click(function(){
            var jmt=$("#jm-text").val();
            $("#jm-contain").html(jmt);
        });
        $("#date-btn").click(function(){
            var d=new Date();
            var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
            $("#date-contain").html(str);
        });
        $("#lsh-btn").click(function(){
            var num=Math.floor(Math.random()*9000) + 1000;
            $("#lsh-contain").html(num);
        });
//        双击添加和移除事件
        $(".all-list-contain").delegate("li","dblclick",function(){
            var removeDom=$(this).remove();
            $(".recive-list-contain").append(removeDom);
        });
        $(".recive-list-contain").delegate("li","dblclick",function(){
            var removeDom=$(this).remove();
            $(".all-list-contain").append(removeDom);
        })
    })
</script>
{/block}