@extends('admin._layoutNew')
@section('title', '信用额度管理')
@section('page-content')
<div class="layui-card">
    <div class="layui-card-header">信用额度管理</div>
    <div class="layui-card-body">
        <form class="layui-form" style="margin-bottom:10px;">
            <div class="layui-inline">
                <input id="f_user_id" class="layui-input" placeholder="用户ID">
            </div>
            <div class="layui-inline">
                <input id="f_keyword" class="layui-input" placeholder="手机号/邮箱">
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-sm" onclick="searchList()">搜索</button>
                <button type="button" class="layui-btn layui-btn-sm" onclick="grantOpen({})">授信</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="loadData()">刷新</button>
            </div>
        </form>
        <table id="creditTable" lay-filter="creditTable"></table>
    </div>
</div>

<script type="text/html" id="statusTpl">
    @{{# if(d.status==1){ }}<span class="layui-badge layui-bg-green">启用</span>@{{# } }}
    @{{# if(d.status==0){ }}<span class="layui-badge layui-bg-gray">禁用</span>@{{# } }}
</script>
<script type="text/html" id="actionTpl">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
</script>

@endsection
@section('scripts')
<script>
layui.use(['table','layer','form'], function(){
    var table = layui.table;
    window.loadData = function(){ table.reload('creditTable', {where:{user_id:$('#f_user_id').val(), keyword:$('#f_keyword').val()}}); };
    window.searchList = loadData;

    table.render({
        elem:'#creditTable', id:'creditTable',
        url:'/admin/credit/list', page:true, limit:20,
        cols:[[
            {field:'id',title:'ID',width:60},
            {field:'user_id',title:'用户ID',width:80},
            {field:'user_phone',title:'手机号',width:130},
            {field:'user_email',title:'邮箱',width:180},
            {field:'total_amount',title:'总额度',width:100},
            {field:'used_amount',title:'已使用',width:100},
            {field:'available_amount',title:'可用额度',width:100},
            {field:'daily_rate',title:'日利率',width:100},
            {field:'cycle_days',title:'周期(天)',width:80},
            {field:'credit_score',title:'信用分',width:80},
            {field:'status',title:'状态',width:80,templet:'#statusTpl'},
            {field:'created_at',title:'创建时间',width:160},
            {fixed:'right',title:'操作',width:80,toolbar:'#actionTpl'}
        ]]
    });

    table.on('tool(creditTable)', function(obj){
        if(obj.event==='edit') grantOpen(obj.data);
    });

    window.grantOpen = function(d){
        var isEdit = !!d.id;
        var html = '<form class="layui-form" style="padding:20px;">';

        if(!isEdit){
            html += '<div class="layui-form-item">'
                +'<label class="layui-form-label">搜索用户</label>'
                +'<div class="layui-input-inline" style="width:200px;"><input id="grant_search" class="layui-input" placeholder="手机号/邮箱/用户ID"></div>'
                +'<button type="button" class="layui-btn layui-btn-sm" onclick="searchUser()">查询</button>'
                +'</div>'
                +'<div class="layui-form-item" id="user_search_result" style="display:none;padding-left:110px;">'
                +'<div id="user_result_list" style="max-height:150px;overflow-y:auto;border:1px solid #e6e6e6;border-radius:4px;"></div>'
                +'</div>';
        }

        html += '<div class="layui-form-item"><label class="layui-form-label">用户ID</label><div class="layui-input-block"><input name="user_id" id="grant_user_id" class="layui-input" value="'+(d.user_id||'')+'" '+(isEdit?'readonly':'')+' placeholder="通过上方搜索选择用户"></div></div>'
            +'<div id="selected_user_info" style="padding:0 110px 10px;color:#666;font-size:12px;">'+(isEdit?'<span>'+((d.user_phone||'')+(d.user_email?' / '+d.user_email:''))+'</span>':'')+'</div>'
            +'<div class="layui-form-item"><label class="layui-form-label">总额度(USDT)</label><div class="layui-input-block"><input name="total_amount" class="layui-input" value="'+(d.total_amount||0)+'"></div></div>'
            +'<div class="layui-form-item"><label class="layui-form-label">日利率</label><div class="layui-input-block"><input name="daily_rate" class="layui-input" value="'+(d.daily_rate||0.001)+'" placeholder="0.001 = 0.1%/天"></div></div>'
            +'<div class="layui-form-item"><label class="layui-form-label">信用周期(天)</label><div class="layui-input-block"><input name="cycle_days" class="layui-input" value="'+(d.cycle_days||30)+'"></div></div>'
            +'<div class="layui-form-item"><label class="layui-form-label">信用分</label><div class="layui-input-block"><input name="credit_score" class="layui-input" value="'+(d.credit_score||0)+'"></div></div>'
            +'<div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-block"><select name="status"><option value="1" '+(d.status==1?'selected':'')+'>启用</option><option value="0" '+(d.status==0?'selected':'')+'>禁用</option></select></div></div>'
            +'</form>';
        layer.open({
            type:1, title:isEdit?'编辑信用额度':'授信', area:['540px','560px'], content:html,
            btn:['保存','取消'],
            yes:function(index,layero){
                var form = layero.find('form');
                var postData = {};
                form.find('input[name],select[name]').each(function(){postData[this.name]=this.value;});
                if(!postData.user_id){layer.msg('请先选择用户',{icon:2});return;}
                postData._token = '{{csrf_token()}}';
                $.post('/admin/credit/grant', postData, function(r){
                    layer.close(index);
                    if(r.type=='ok'){layer.msg('保存成功');loadData();}else layer.msg(r.message,{icon:2});
                });
            }
        });
    };

    window.searchUser = function(){
        var kw = $('#grant_search').val();
        if(!kw){layer.msg('请输入搜索关键词',{icon:2});return;}
        $.get('/admin/user/list', {account_number:kw, limit:10}, function(res){
            var list = res.data || [];
            if(!list.length){
                $('#user_search_result').show();
                $('#user_result_list').html('<div style="padding:10px;color:#999;text-align:center;">未找到用户</div>');
                return;
            }
            var h = '';
            for(var i=0;i<list.length;i++){
                var u = list[i];
                h += '<div class="grant-user-item" style="padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;" '
                    +'onclick="pickUser('+u.id+',\''+((u.phone||'').replace(/'/g,''))+ '\',\''+ ((u.email||'').replace(/'/g,'')) +'\')">'
                    +'<span>ID: '+u.id+'</span>'
                    +'<span>'+(u.phone||'-')+'</span>'
                    +'<span>'+(u.email||'-')+'</span>'
                    +'</div>';
            }
            $('#user_search_result').show();
            $('#user_result_list').html(h);
        });
    };

    window.pickUser = function(id, phone, email){
        $('#grant_user_id').val(id);
        $('#selected_user_info').html('<span style="color:#00c48c;">已选择: ID '+id+' / '+(phone||'-')+' / '+(email||'-')+'</span>');
        $('#user_search_result').hide();
    };
});
</script>
<style>
.grant-user-item:hover{background:#f6f6f6!important;}
</style>
@endsection