{include file="common/head"/}
<div class="admin-main layui-anim">
<div class="layui-form">
        <!-- 按钮循环 -->
        <div class="layui-btn-container" id="btns_group">
            {foreach $seller_config_info as $vo}
                <button type="button" class="layui-btn layui-btn-primary" id="idx_{$vo.index}" data-index={$vo.index}>{$vo.name}</button> 
            {/foreach}
        </div>   
        
        <!-- 元素循环 -->
        <div id="list">

           
        </div>
         <div id="device_call_lite" style='display:none'>
                <div class="layui-input-8">
                    
                </div>
            </div>
        <div style="margin-top:0.5cm;">
            <input type="hidden" value="{$sid}" id="sid">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">{:lang('submit')}</button>
        </div>
</div>
</div>
{include file="common/foot"/}
<script src="/static/common/js/jquery.2.1.1.min.js"></script>
<script>
    layui.use(['table','form','laydate'], function () {
        var form = layui.form, $ = layui.jquery,table = layui.table,laydate = layui.laydate;
        //当前数据提交&更新缓存
        form.on('submit(submit)', function (data) {
            //检测校验对象
            var types   = $('#list').find('input').attr('type');
            var len     = $(".device_check:checked").length;
            //复选框校验。
            if(len==0 && types=='checkbox'){
                layer.msg('请至少勾选一项进行修改！',{icon:3});
                return false;
            }
            //将页面全部复选框选中的值或者单选按钮选中的值拼接到一个数组中
            if(types=='checkbox'){
                var val_box = [];
                $('input[type=checkbox]:checked').each(function() {
                    val_box.push($(this).val());
                });
            }else{
                var val_box = $('input[type=radio]:checked').val();
            }
            //对应的按钮以及商家ID
            var i = $('#list').find('input').attr('data-index');sid = $("#sid").val();
            //如果i=14 则需要获取单选钮下面得复选框的值
            if(i==14 && val_box==1){
                var new_box = [];
                new_box[0]  = val_box; //单选按钮的值
                new_box[1]  = $("input:checkbox[name='is_checked_call']:checked").length; //第一个复选框是否选中
                new_box[2]  = $("input:checkbox[name='is_checked_app']:checked").length; //第一个复选框是否选中
                new_box[3]  = $("input:checkbox[name='is_checked_lite']:checked").length; //第二个复选框是否选中
            }else{
                $("#device_call_lite").hide();
            }
            var new_val_box = new_box ? new_box : val_box;
            //等待加载图标
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            //请求变更
            $.ajax({
                url: "{:url('seller_configure')}",
                type: 'post',
                cache: false,
                data:{index:i,sid:sid,code:'',data:new_val_box},
                success: function (res) {
                    layer.close(loading);
                    if (res.code==1) {
                        layer.msg(res.msgs,{icon:1});
                    }else{
                        layer.msg(res.msgs,{icon:5});
                        $('#list').html('');
                    }
                    form.render();
                },
                error: function (result) {
                    layer.close(loading);
                }
            });
        })

        //页面加载完成，同时请求服务端，获取默认展示数据
        layer.ready(function(){
            var i = 1,sid = $("#sid").val();
            $.ajax({
                url: "{:url('seller_configure')}",
                type: 'post',
                cache: false,
                data:{index:i,sid:sid,code:'',data:''},
                success: function (res) {
                    if (res.code==1) {
                        pub_code_box(res.list.list,i,res.list.flag);
                    }else{
                        $('#list').html('');
                    }
                    //将对应得按钮状态设置为选中得颜色
                    $("#idx_"+res.list.index).attr('class','layui-btn layui-btn-normal');
                    form.render();
                },
                error: function (result) {
                }
            });
        });  

        //部分复选框只能选一个
        $('#list').on('click', $('input[name]'), function(event) {
            var i    = $(this).find('input').attr('data-index');
            var flag = $(this).find('input').attr('name');
            var sid  = $("#sid").val();
            //单选按钮显示隐藏
            if(i==14){
                var classs = $('.layui-anim').find('i').attr('class');
                console.log(classs);
                var id = $(this).find('input:checked').attr('id');
                if(id==1){
                    if(classs!='layui-anim layui-icon'){
                        //请求数据
                        $.ajax({
                            url: "{:url('get_seller_config_mode')}",
                            type: 'post',
                            cache: false,
                            data:{index:i,sid:sid},
                            success: function (res) {
                                if (res.code==1) {
                                    $("#device_call_lite").show();
                                    var html = '';
                                    var is_checked_call = res.list.is_checked_call==1 ? 'checked' : '';
                                    var is_checked_app = res.list.is_checked_app==1 ? 'checked' : '';
                                    if(res.list.user_info){
                                        var title = 'title = 公众号+小程序+语音电话('+res.list.user_info.nick_name+'+'+res.list.user_info.phone+'+'+res.list.user_info.is_openid_wechat_str+')';
                                        var is_openid_wechat = (res.list.user_info.is_openid_wechat !=1 || res.list.user_info.phone_status==1) ? 'disabled' : '';
                                    }else{
                                        var title = 'title = 公众号+小程序+语音电话';
                                    }

                                    var is_checked_lite = res.list.is_checked_lite==1 ? 'checked' : '';
                                    html +='<input type="checkbox" class="device_check" lay-filter="device_check" name="is_checked_call" lay-skin="primary" title="电话机" '+is_checked_call+'><input type="checkbox" class="device_check" lay-filter="device_check" name="is_checked_app" lay-skin="primary" title="APP" '+is_checked_app+'><input type="checkbox" class="device_check" lay-filter="device_check" name="is_checked_lite" lay-skin="primary" '+title+' '+is_checked_lite+' '+is_openid_wechat+'>';
                                    $("#device_call_lite").html(html);
                                    $("#device_call_lite").show();
                                }else{
                                    layer.msg(res.msgs,{icon:5});
                                    return false;
                                }
                                form.render();
                            },
                            error: function (result) {
                            }
                        });
                    }
                    $("#device_call_lite").show();
                }else{
                    $("#device_call_lite").hide();
                }
            }
            //根据对应得模板id获取模板内容sms信息
            if(i==15){
                //模板CODE
                var code = $(this).find('input:checked').attr('id');
                var sid = $("#sid").val();
                if(code){
                    $.ajax({
                        url: "{:url('seller_configure')}",
                        type: 'post',
                        cache: false,
                        data:{index:i,sid:sid,code:code,data:''},
                        success: function (res) {
                            if (res.code==1) {
                                $("#txt").html(res.list.list.content);
                                $("#txt").show();
                            }else{
                                layer.msg(res.msgs,{icon:5});
                                return false;
                            }
                            form.render();
                        },
                        error: function (result) {
                        }
                    });
                }
            }
            //部分复选框只能选择一项提醒
            if(i==5 || i==6 || i==7 || i==8){
                var len=$("input[name="+flag+"]:checked").length; 
                if(len>1){
                    $(this).find('input').next('div').attr("class","layui-unselect layui-form-checkbox");
                    $(this).find('input').prop("checked",false);
                    layer.msg('最多只能选1项！',{icon:5});
                    return false;
                }
            }
        });
        

        //点击按钮请求对应的数据
        $('#btns_group').on('click', 'button', function(event) {
            var i = $(this).attr('data-index');
            var sid = $("#sid").val();

            $.ajax({
                url: "{:url('seller_configure')}",
                type: 'post',
                cache: false,
                data:{index:i,sid:sid,code:'',data:''},
                success: function (res) {
                    if (res.code==1) {
                        //每次请求成功将所有按钮重置
                        $("#btns_group").find('button').attr('class','layui-btn layui-btn-primary');
                        //清空元素
                        $('#list').html('');
                        switch (res.list.index) {
                            case "1":
                            case "2":
                            case "3":
                            case "4":
                            case "5":
                            case "6":
                            case "7":
                            case "8":
                            case "16":
                                //复选框
                                pub_code_box(res.list.list,i,res.list.flag);
                                break;
                            case "9":
                            case "10":
                            case "11":
                            case "12":
                            case "13":
                            case "14":
                            case "15":
                            case "17":
                                //单选
                                pub_code_sin(res.list.list,i,res.list.seller_data);
                                break;
                            default:
                                break;
                        }
                    }else{
                        $('#list').html('');
                        layer.msg(res.msgs,{icon:5});
                        return false;
                    }
                    //将对应得按钮状态设置为选中得颜色
                    $("#idx_"+res.list.index).attr('class','layui-btn layui-btn-normal');
                    $("#device_call_lite").hide();
                    form.render();
                },
                error: function (result) {
                }
            });
        })
    });
//复选框
function pub_code_box(list,index,flag){
    var html = '';
    //遍历复选框
    $.each(list, function (i, item) {
        var checked = item.checked ? 'checked' : '';
        html += "<input type='checkbox' "+checked+" name="+flag+" data-index="+index+" value="+item.id+" class='device_check' id="+item.id+" lay-skin='primary' title="+item.name+" >";
        //$("#list").append("<input type='checkbox' "+checked+" id="+item.id+" name=cate"+item.id+" lay-skin='primary' title="+item.name+" >");
        
    });
    $("#list").html(html);
}

//单选按钮
function pub_code_sin(list,index,seller_data){
    var html = '';
    //遍历单选按钮
    $.each(list, function (i, item) {
        var checked = item.checked ? 'checked' : '';
        html += "<input type='radio' "+checked+" id="+item.id+" data-index="+index+" value="+item.id+" name='radix' lay-skin='primary' title="+item.name+" >";
    });
    //展示单选按钮下面得复选框格式
    if(index==14 && seller_data[0]['reserve_mode']==1){
        //是否选中
        var is_checked_call = seller_data[0]['is_checked_call']==1 ? 'checked' : '';
        var is_checked_app = seller_data[0]['is_checked_app']==1 ? 'checked' : '';
        html +="<div id='device_call_lite'>";
        html += "<input type='checkbox' class='device_check' "+is_checked_call+" lay-filter='device_check' value=1 name='is_checked_call' lay-skin='primary' title='电话机'>";
        html += "<input type='checkbox' class='device_check' "+is_checked_app+" lay-filter='device_check' value=1 name='is_checked_app' lay-skin='primary' title='APP'>";
        //是否选中
        var is_checked_lite = seller_data[0]['is_checked_lite']==1 ? 'checked' : '';
        //是否可点击
        var disableds       = (seller_data[1]['is_openid_wechat']!=1 || seller_data[1]['phone_status']==1) ? "disabled" : '';
        //名称显示格式
        var title           = seller_data[1]!='' ? '公众号+小程序+语音电话('+seller_data[1]['nick_name']+'+'+seller_data[1]['phone']+'+'+seller_data[1]['is_openid_wechat_str']+')' : '公众号+小程序+语音电话';
        //字符串组装
        html += "<input type='checkbox' class='device_check' "+is_checked_lite+" "+disableds+" title="+title+" value=2 lay-filter='device_check' name='is_checked_lite' lay-skin='primary'>";
        html += "</div>";
    }
    //展示短讯预览框
    if(index==15){
        html += "<textarea style='display:none'  placeholder='短信内容预览' name='content' id='txt' class='layui-textarea' disabled></textarea>";
    }
    $("#list").html(html);
}
</script>