@using WX.CRM.WebHelper
@using WX.CRM.Model.DTO;
@{
    ViewBag.Title = "达量通知";
    Layout = "~/Views/Shared/_content.cshtml";
}
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>
<style>
    #StatusDialog {
        padding: 15px;
        text-align: center;
        height: 150px;
    }

        #StatusDialog .title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

    .line {
        min-height: 3em;
        line-height: 3em;
    }
</style>
<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
<div class="layui-card" id="topcard" style="width:100%;">
    <div class="layui-card-body " id="contentBody">
        <form class="layui-form selftopwhere" id="myform">
            <div class="layui-form-item">
                事业部：
                <div class="layui-inline">
                    <select name="businessId" style="width: 120px">
                        <option value="">请选择</option>
                        @foreach (var item in ViewBag.DeptList as List<SelectListItem>)
                        {
                            <option value="@item.Value" selected="@item.Selected">@item.Text</option>
                        }
                    </select>
                </div>
                @* @Html.Action("UserSSOComBox", "Control", new { currentRight = WX.CRM.WebHelper.InitRights.CONST_订单列表 }) *@
                工号：
                <div class="layui-inline">
                    <input class="layui-input" name="EId" style="width:120px;" />
                </div>
                绑定状态：
                <div class="layui-inline">
                    <select name="BindType" style="height:35px;">
                        <option value="">不限</option>
                        <option value="0">未绑定</option>
                        <option value="1">自动绑定</option>
                        <option value="2">手动绑定</option>
                    </select>
                </div>
                支付类型：
                <div class="layui-inline">
                    <select name="PayType" style="height:35px;">
                        <option value="">不限</option>
                        <option value="wechat">微信</option>
                        <option value="alipay">支付宝</option>
                    </select>
                </div>
                客户id：
                <div class="layui-inline">
                    <input class="layui-input" name="ResId" style="width:120px;" />
                </div>
                @*手机号：
        <div class="layui-inline">
            <input class="layui-input" name="Phone" style="width:120px;" />
        </div>*@
                union ID：
                <div class="layui-inline">
                    <input class="layui-input" name="UnionID" style="width:120px;" />
                </div>
                流水号：
                <div class="layui-inline">
                    <input class="layui-input" name="PayNo" style="width:120px;" />
                </div>
                <div class="layui-inline" style="width:350px">
                    <input class="layui-btn layui-btn-sm layui-btn-ok" data-method="search" id="search" type="button" value="查询" />
                    <input class="layui-btn layui-btn-sm layui-btn-reset" type="reset" value="清空" />
                </div>
            </div>
        </form>
        <table class="layui-hide" id="list" lay-filter="list"></table>
    </div>
    <div id="StatusDialog" class="layui-form" style="display:none;">
        <input type="hidden" name="id" />
        <div class="line" style="display:flex;">
            <div style="width:90px;">部门：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="deptName"></span>
            </div>
        </div>
        <div class="line" style="display:flex;border-bottom:1px dotted #ccc;margin-bottom:5px;">
            <div style="width:90px;">员工：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="eId"></span>
            </div>
        </div>
        <div class="line" style="display:flex;">
            <div style="width:90px;">客户id：</div>
            <div style="width: 200px;">
                <select id="_select_resId" name="resId"></select>
            </div>
            <div style="flex:1;text-align:left;padding-left:10px;margin-top:-7px;">
                <input id="_button_add_resId" class="layui-btn layui-btn-sm layui-btn-ok" type="button" value="填写" onclick="show_add_resId()" />
                <div id="_div_add_resId" style="display:none;">
                    <input id="_input_add_resId" type="text" style="width:200px;" placeholder="请输入客户id..." />
                    <input class="layui-btn layui-btn-sm layui-btn-ok" type="button" value="确定" onclick="real_add_resId()" />
                    <input class="layui-btn layui-btn-sm layui-btn-reset" type="button" value="取消" onclick="hide_add_resId()" />
                </div>
            </div>
        </div>
        @*<div class="line" style="display:flex;">
            <div style="width:90px;">手机号：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="phone"></span>
            </div>
        </div>*@
        <div class="line" style="display:flex;">
            <div style="width:90px;">union ID：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="unionId"></span>
            </div>
        </div>
        <div class="line" style="display:flex;">
            <div style="width:90px;">姓名：</div>
            <div style="flex: 1; text-align: left;">
                <input type="text" style="width:200px;" />
            </div>
        </div>
        <div class="line" style="display:flex;">
            <div style="width:90px;">支付类型：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="payTypeDisplay"></span>
            </div>
        </div>
        <div class="line" style="display:flex;">
            <div style="width:90px;">支付流水号：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="payNo"></span>
            </div>
        </div>
        <div class="line" style="display:flex;">
            <div style="width:90px;">金额：</div>
            <div style="flex: 1; text-align: left;">
                <span data-name="amount"></span>
            </div>
        </div>
        <div class="line" style="display:flex;">
            <div style="width:90px;">备注：</div>
            <div style="flex: 1; text-align: left;">
                <textarea style="width:200px;" rows="10" name="remark"></textarea>
            </div>
        </div>
    </div>
</div>

<script>
    var selectRows = [];
    var winindex;
    var layer;
    var rowid;
    var data;
    var table;
    var form;
    var laydate;
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['laypage', 'layer', 'table', 'laydate', 'form'], function () {
        form = layui.form;
        laydate = layui.laydate;
        layer = layui.layer;
        table = layui.table;
        var param = $("#myform").serializeFormJSON();
        table.render({
            id: 'list'//列表别名ID
            , elem: '#list'
            , url: '/OrderDeposit/BindList'
            , method: 'post'
            , dataType: 'json'
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'message' //规定状态信息的字段名称，默认：msg
            },
            parseData: function (res) { //res 即为原始返回的数据
                if (res.code != 0) {
                    layer.msg(res.message, { icon: 2 });
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": 0, //解析数据长度
                        "data": [] //解析数据列表
                    };
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 10
            , size: "sm"
            , cols: [[
                @*{ field: 'deptName', title: '部门' }
                , { field: 'eId', title: '员工', width: 150, templet: '#eInfoTpl' }*@
                { field: 'eId', title: '员工', width: 150 }
                , { field: 'bindType', title: '绑定状态', width: 80, templet: '#bindTypeTpl' }
                , { field: 'resId', title: '客户id', width: 250 }
                @*, { field: 'cName', title: '姓名', width: 150 }
                , { field: 'phone', title: '手机号', width: 150 }*@
                , { field: 'unionId', title: 'union ID', width: 250 }
                , { field: 'payType', title: '支付类型', width: 80, templet: '#payTypeTpl' }
                , { field: 'payTime', title: '支付时间', width: 150 }
                , { field: 'payNo', title: '流水号' }
                , { field: 'amount', title: '金额', width: 80 }
                , { field: 'remark', title: '备注', width: 150 }
                , { field: 'operation', title: '操作', width: 80, templet: '#operationTpl' }
            ]], where: param
        });
        var active = {
            search: function () {
                var param = $("#myform").serializeFormJSON();
                table.reload('list', {
                    where: param,
                    page: {
                        curr: 1
                    }
                });
            }
        };
        $('#search').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });

    function Closed() {
        layer.close(winindex);
    }
    function TableReload() {
        table.reload('list', {

        });
    }

    function fill_model(id, model) {
        var items = $(id).find('input');
        $.map(items, function (item) {
            var name = $(item).attr('name');
            if (name) {
                $(item).val(safe_val(model[name]));
            }
        })

        items = $(id).find('select');
        $.map(items, function (item) {
            var name = $(item).attr('name');
            if (name) {
                $(item).val(safe_val(model[name]));
            }
        })

        items = $(id).find('textarea');
        $.map(items, function (item) {
            var name = $(item).attr('name');
            if (name) {
                $(item).val(safe_val(model[name]));
            }
        })

        items = $(id).find('span');
        $.map(items, function (item) {
            var name = $(item).attr('data-name');
            if (name) {
                $(item).html(safe_val(model[name]));
            }
        })
    }

    function safe_val(val) {
        return val != null ? val.toString() : '';
    }

    function get_model(id) {
        var model = {};
        var items = $(id).find('input');
        $.map(items, function (item) {
            var name = $(item).attr('name');
            if (name) {
                model[name] = $(item).val();
            }
        })

        items = $(id).find('select');
        $.map(items, function (item) {
            var name = $(item).attr('name');
            if (name) {
                model[name] = $(item).val();
            }
        })

        items = $(id).find('textarea');
        $.map(items, function (item) {
            var name = $(item).attr('name');
            if (name) {
                model[name] = $(item).val();
            }
        })

        items = $(id).find('span');
        $.map(items, function (item) {
            var name = $(item).attr('data-name');
            if (name) {
                model[name] = $(item).html();
            }
        })
        return model;
    }

    function Bind_Click(id) {
        $.ajax({
            type: "POST",
            url: '/OrderDeposit/BindDetail',
            data: { id: id },
            dataType: "json",
            success: function (res) {
                if (res.data && res.data.payType) {
                    var display = '';
                    switch (res.data.payType) {
                        case 'wechat': {
                            display = '微信';
                            break;
                        }
                        case 'alipay': {
                            display = '支付宝';
                            break;
                        }
                    }
                    res.data.payTypeDisplay = display;
                }
                res.data.id = id;
                $('#_select_resId').html('');
                form.render("select");
                hide_add_resId();
                GetUserSelect(res.data.unionId, res.data.resId);
                fill_model('#StatusDialog', res.data);
                Bind_Show();
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }

    function Bind_Show() {
        winindex = layer.open({
            title: '绑定',
            type: 1,
            content: $('#StatusDialog'),
            area: ['720px', '640px'],
            btn: ['确定'],
            yes: function (index, layero) {
                Bind_Confirm(winindex);
            }
        });
    }

    function Bind_Confirm(winindex) {
        var model = get_model('#StatusDialog');
        if (!model.resId) {
            layer.msg('请选择要绑定的客户！', { icon: 2 });
            return;
        }

        $.ajax({
            type: "POST",
            url: '/OrderDeposit/EditBind',
            data: { id: model.id, resId: model.resId, remark: model.remark },
            dataType: "json",
            success: function (da) {
                if (da.data) {
                    layer.close(winindex);
                    TableReload();
                } else {
                    layer.msg('修改绑定失败！' + safe_val(da.message), { icon: 2 });
                }
            },
            error: function () {
                layer.msg('修改绑定失败！', { icon: 2 });
            }
        });
    }

    function GetUserSelect(unionId, resId) {
        if (!unionId) {
            var sb = '';
            if (resId) {
                sb += '<option selected="selected" value="' + resId + '">' + resId + '</option>';
            }
            $('#_select_resId').html(sb);
            form.render("select");
            return;
        }
        $.ajax({
            type: "POST",
            url: '/OrderDeposit/GetUserSelect',
            data: { unionId: unionId },
            dataType: "json",
            success: function (da) {
                var sb = '';
                if (resId) {
                    sb += '<option selected="selected" value="' + resId + '">' + resId + '</option>';
                    if (da.data && da.data.length > 0) {
                        for (var i = 0; i < da.data.length; i++) {
                            var item = da.data[i];
                            if (item == resId) {
                                continue;
                            }
                            sb += '<option value="' + item + '">' + item + '</option>';
                        }
                    }
                } else {
                    if (da.data && da.data.length > 0) {
                        sb += '<option value="">请选择</option>';
                        for (var j = 0; j < da.data.length; j++) {
                            var itemj = da.data[j];
                            sb += '<option value="' + itemj + '">' + itemj + '</option>';
                        }
                    }
                }
                $('#_select_resId').html(sb);
                form.render("select");
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }

    function show_add_resId() {
        $('#_input_add_resId').val('');
        $('#_button_add_resId').hide();
        $('#_div_add_resId').show();
    }

    function hide_add_resId() {
        $('#_button_add_resId').show();
        $('#_div_add_resId').hide();
    }

    function real_add_resId() {
        var val = $('#_input_add_resId').val();
        if (!val) {
            layer.msg('请输入客户id！', { icon: 2 });
            return;
        }
        $.ajax({
            type: "POST",
            url: '/OrderDeposit/GetUserItem',
            data: { resId: val },
            dataType: "json",
            success: function (da) {
                if (!da.data) {
                    layer.msg('获取客户失败，可能因为填写的客户id无效！', { icon: 2 });
                    return;
                }
                hide_add_resId();
                var sb = '';
                sb += '<option selected="selected" value="' + val + '">' + val + '</option>';
                $('#_select_resId').html(sb);
                form.render("select");
            },
            error: function () {
                layer.msg('获取客户失败，可能因为填写的客户id无效！', { icon: 2 });
            }
        });
    }
</script>
<script type="text/html" id="eInfoTpl">
    {{ d.eId + '--' + d.eName }}
</script>

<script type="text/html" id="bindTypeTpl">
    {{# if(d.bindType == 0){ }}
    <span style="color: rgb(215 0 35) ">未绑定</span>
    {{# } else if(d.bindType == 1){ }}
    <span style="color: rgb(113 182 30)">自动绑定</span>
    {{# } else if(d.bindType == 2){ }}
    <span style="color: rgb(27 168 238)">手动绑定</span>
    {{# } }}
</script>

<script type="text/html" id="payTypeTpl">
    {{# if(d.payType == "wechat"){ }}
    <span style="color: rgb(113 182 30) ">微信</span>
    {{# } else if(d.payType == "alipay"){ }}
    <span style="color: rgb(27 168 238)">支付宝</span>
    {{# } }}
</script>

<script type="text/html" id="operationTpl">
    <span style="color: rgb(113 182 30) " onclick="Bind_Click({{d.id}})">绑定</span>
</script>