{include file="public/header"}
<style>
   textarea, input[type="text"], input[type="password"],
    .uneditable-input{border: 1px solid #ccc;background-color: #fff; }
    .x-nav{overflow: inherit; } .x-nav .refresh{margin-right: 20px; }
    .change_box .actived{border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-top:1px solid #e5e5e5; position: relative; color: #3daae9; }
    .change_box .actived:after{content: ""; bottom: -2px; background: #fff; width: 100%; height: 5px; position: absolute; left: 0; }
    .change_box a{font-size: 14px;padding: 10.5px 10px;}
    .control-group{overflow: hidden; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dotted #dddddd; }
    .control-label{float: left; padding-top: 3px; width: 160px; text-align: right; font-size: 14px; }
    .controls{text-align: left; overflow-x: auto; overflow-y: hidden; margin-left: 180px; }
    .controls input{width: 300px; height: 24px; font-size: 14px; border-radius: 4px; padding-left:6px; }
    .controls select{width: 300px; height: 24px; font-size: 14px; border-radius: 4px; padding-left:6px; }
    .controls textarea{width: 400px; height: 90px; border-radius: 4px; } .form-horizontal{margin: 0 10px; }
    .bottom-buttom{border-top: 1px solid #e5e5e5; margin-top: 20px; background-color: #f5f5f5; padding: 30px 0; }
    .submit{width: 50px; text-align: center; background-color:#3daae9; color: #fff; padding: 5px 10px; font-size: 16px; border-radius: 4px; cursor:pointer; }

    #search-agent{ padding-left:16px;padding-top:5px; background:#fff; border-radius:5px;position:absolute; left:315px;top:0; margin-left:-3px;display:block;height:21px; color:black; border:1px solid #ececec;  width: 25px;cursor:pointer; }
    #search-agent:hover{border-color:#ccc;}
    #search-agent i{margin-top:30px;}
    #search-agent:hover > i{ color:#148cf1;  }
    #search-agent i{  margin-left:-4px;  }
    #L_username{  background:#ececec; cursor:pointer; }
    #agent_list{  width:300px;  height:400px;  border:1px solid #a2a2a2;  position:absolute;  left:550px;  top:44px;  z-index:99;  background:#fff;  display:none;  }
    #agent_list #header-box{  width:100%;  height:40px;  border-bottom:1px solid #ccc;  position:relative;  cursor:move;  }
    #agent_list #header-box a{  position:absolute;  top:3px;  right:20px;  font-size:22px;  }
    #agent_list #header-box div{  height:30px;  margin:10px 25px;  line-height:30px;  font-size:18px;  font-weight:bold;  color:#333;  }
    #agent_list .main-box{  height:50px;  margin-top:10px;  background:#fff;  }
    #agent_list .main-box label{  font-size:14px;  margin-left:25px;  margin-right:10px;  }
    #agent_list .main-box input{  border-radius:5px;  height:30px;  width:110px;  border:1px solid #ccc;  padding-left:5px;  }
    #agent_list .main-box input:focus{  border:1px solid #148cf1;  }
    #agent_list .main-box button{  background:#fff;  border:1px solid #ccc;  width:60px;  height:30px;  border-radius:5px;  cursor:pointer;  margin-left:10px;  }
    #agent_list .main-box button:hover{  border:1px solid #8a8a8a;  }
    #agent_list .main-box .z-tree{  margin-top:20px;  height:240px;  }
    #agent_list .main-box .z-tree ul{  margin-left: 50px;  }
    #agent_list .main-box .z-tree ul li{  list-style: none;  position:relative;  height:20px;  padding-left:2px;  cursor:default;  }
    #agent_list .main-box .z-tree ul li:before{  position:absolute;  top:-12px;  left:-12px;  content: '';  width: 10px;  height: 20px;  border-style: none none dotted dotted;  border-width: 1px;  border-color: #9e9e9e;  }
    #agent_list .main-box .z-tree ul li.first:before{  border-style: none none dotted none;  }
    #agent_list .main-box .z-tree ul li span.agent_name_box.on{  background:#eaeaea;  border:1px solid #ccc;  }
    #agent_list .button-box{  height:40px;  background:#eee;  position:relative;  top:249px;  line-height:40px; }
    #agent_list .button-box span{  position:absolute;  right:10px;  }
    #agent_list .button-box span button{  width:50px;  height:25px;  margin-left:2px;  border-radius:5px;  }
    #agent_list .button-box span button:hover{  background:#edefd1;  }
</style>
<body>
<div class="x-nav" style="padding: 0px;">
      <span class="change_box">
        <a href="javascript:;" class="list-one" data-id="1">代理上下分记录列表</a>
        <a href="javascript:;" class="list-two actived" data-id="2">代理上下分记录添加</a>
      </span>
    <a class="layui-btn layui-btn-small refresh" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<br>

<div class="info_from form-horizontal">
    <div class="control-group">
        <label class="control-label">账号:</label>
        <div class="controls" style="position:relative;">
            <input id="L_username" name="L_username" type="text" readonly maxlength="50" minlength="3" class="required">
            <span  id="search-agent"><i class="layui-icon">&#xe615;</i></span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">操作类型:</label>
        <div class="controls" style="padding-top: 5px;">
            <input class="scores" name="scores" value="1" type="radio" class="required" style="width:20px;height: 14px;font-size: 14px;">上分
            <input class="scores" name="scores" value="2" type="radio" class="required" style="width:20px;height: 14px;font-size: 14px;">下分
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">操作金额:</label>
        <div class="controls">
            <input id="L_amount" name="L_amount" type="text" value maxlength="50" minlength="3" class="required">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">操作用户:</label>
        <div class="controls">
            <input id="L_controller" name="L_controller" type="text" readonly value="{$user_info.admin}" maxlength="50" minlength="3" class="required">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">余额:</label>
        <div class="controls">
            <input id="L_money" name="L_money" type="text" readonly value maxlength="50" minlength="3" class="required">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">备注:</label>
        <div class="controls">
            <textarea name="desc" id="L_remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="bottom-buttom">
        <label class="control-label"></label>
        <div class="controls">
            <div class='submit'>保存</div>
        </div>
    </div>
</div>

<div id="agent_list">
    <div id="header-box">
        <div>选择总代理</div>
        <a class="cancel" href="javascript:;">X</a>
    </div>
    <div class="main-box">
        <div class="search-box">
            <label class="key-word">关键字 :</label>
            <input type="text" id="agent_name">
            <button id="search_key_word">搜索</button>
        </div>
        <div class="z-tree" id="z-tree">

        </div>
    </div>
    <div class="button-box">
        <span>
            <button class="ensure">确定</button>
            <button class="cancel">取消</button>
        </span>
    </div>
    <input type="hidden" id="short-username" value="">
</div>
<script>
    // 代理列表和添加代理切换
    $('.x-nav .change_box a').click(function(){
        // 样式切换
        $('.x-nav .change_box a').removeClass('actived');
        $(this).addClass('actived');
        // 页面切换
        var id = $(this).attr('data-id');
        if(id == "1") location.href = '/agent/scores';
        if(id == "2")  location.href = '/agent/scores_add';
    });

    // 鼠标按下控件跟随移动
    function mouseMoveBox(pressId,boxId){
        var _move = false;//移动标记
        var _x,_y;//鼠标离控件左上角的相对位置
        $("#"+pressId).mousedown(function(e){
            // 按下鼠标计算与控件的相对位置
            _move = true;
            _x = e.pageX-parseInt($("#"+boxId).css("left"));
            _y = e.pageY-parseInt($("#"+boxId).css("top"));
        });
        $(document).mousemove(function(e){
            if(_move){
                //移动时根据鼠标位置计算控件左上角的绝对位置
                var x=e.pageX-_x;
                var y=e.pageY-_y;
                $("#"+boxId).css({top:y,left:x});//控件新位置
            }
        }).mouseup(function(){
            //松开鼠标后停止移动
            _move = false;
        });
    }
    // 代理列表跟随鼠标移动
    mouseMoveBox('header-box','agent_list');


    // 点击搜索所有的代理列表
    $('#search-agent').click(function(){
        var result = ajax('/agent/getAgent');
        $('#z-tree').empty().append(result);
        $('#agent_list').show();
    });
    $('#L_username').click(function(){
        var result = ajax('/agent/getAgent');
        $('#z-tree').empty().append(result);
        $('#agent_list').show();
    });

    // 关键字搜索所有的代理列表
    $('#search_key_word').click(function(){
        var key_word = $('#agent_name').val();
        if(key_word){
            var query = new Object();
            query.username = key_word;
            var result = ajax('/agent/getAgent',query);
            $('#z-tree').empty().append(result);
            $('#agent_list').show();
        }
    });

    // 选择代理名字
    $('#agent_list').on('click','.tree-li',function(){
        var username = $(this).find('span').eq(1).html();
        // 调整样式
        $('.agent_name_box').removeClass('on');
        $(this).find('.agent_name_box').addClass('on');
        // 动态数据
        $('#short-username').val(username);
    });
    // 双击触发选择代理
    $('#agent_list').on('dblclick','.tree-li',function(){
        $('.ensure').trigger('click');
    });

    // 确定
    $('.ensure').click(function(){
        var username = $('#short-username').val();
        $('#L_username').val(username);
        $('#agent_list').hide();
        // 获取代理余额信息
        var username = $('#L_username').val();
        if(username){
            var result = ajax('/agent/getAgentMoney',{username:username});
            // 显示余额限制
            $('#L_money').val(result);
        }
    });

    // 取消
    $('.cancel').click(function(){
        $('#agent_list').hide();
    });

    // 选择上分还是下分
    $('.scores').click(function(){
        var id = $(this).val();
        if(id == 1) $('#L_remarks').html('总台上分 !');
        if(id == 2) $('#L_remarks').html('总台下分 !');
    })

        //监听提交
    $('.submit').click(function (data) {
        // 获取和拼装添加代理的数据
        var query = new Object();
        query.username = $('#L_username').val();
        query.amount = $('#L_amount').val();
        query.mode = $('.scores:checked').val();
        query.controller = $('#L_controller').val();
        query.remarks = $('#L_remarks').val();
        var money = $('#L_money').val();

        // 验证数据
        if(!query.username){
            layer.alert("请选择账号!");
            return false;
        }
        if(!query.mode){
            layer.alert("请选择操作类型!");
            return false;
        }
        if(!query.amount){
            layer.alert("请输入操作金额!");
            return false;
        }
        if(parseFloat(query.amount) <= 0){
            layer.alert("操作金额必须大于0!");
            return false;
        }
        if(query.mode == 2 && parseFloat(query.amount) > parseFloat(money)){
            layer.alert("操作金额不能大于余额!");
            return false;
        }
        // 发送数据到后台添加会员
        var result = ajax('/agent/do_scores_add',query);
        if(result.code == 1){
            layer.alert(result.msg, {icon: 6}, function () {
                location.href = "/agent/scores";
            });
        }else{
            layer.alert(result.msg,{icon:2});
        }
        return false;
    });

    // AJAX函数封装
    function ajax(url,query){
        var returnData = 0;
        $.ajax({
            url:url,
            data:query,
            type:'POST',
            dataType:'JSON',
            async:false,
            success:function(data){
                returnData = data;
            }
        });
        return returnData;
    }
</script>
</body>

</html>