<%@ page contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../common.jsp"/>

    <style>
        .layui-form-label {
        !important;
        }
    </style>
</head>
<body>

<div>
</div>
<div class="row animated fadeInRight" style="margin: 0;">
    <div class="wrapper wrapper-content mt5 right-content ml5 mr5">
        <div class="toolbar-panel bdd">
            <div class="toolbar-box">
                <div class="toolbar-head clearfix lgraybg pt5 pb10 pl10 bdbd">
                    <!-- 顶部按钮 -->
                    <div class="fl">
                        查询条件
                    </div>
                    <div class="tools fr">
                        <a href="javascript:void(0);" class="collapse dblock f14 dgray mr5">
                            <i class="fa-2x fa fa-angle-double-up"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!--搜索条件 -->
            <div class="toolbar-body">
                <form class="layui-form" id="form1" action="" style="margin-top: 10px" lay-filter="formCondtion">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="loginName" name="loginName" placeholder="请输入手机号" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">M800商编</label>
                            <div class="layui-input-inline">
                                <input type="text" id="merchantCode" name="merchantCode"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">通道商户号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="merchantId" placeholder="请输入通道商户号" name="merchantId"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="mb50 mt10">
        <div class="whitebg pl10 pr10">
            <table class="layui-hide" id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarMenu">
    {{# if (d.resultStatus != '3' && ((d.status == '' || d.status == undefined) || ((d.infoQrcode == undefined || d.infoQrcode == '' )))) { }}
    {{# if (d.channelId != '3') { }}
    <a class="layui-btn layui-btn-xs" lay-event="wx-audit">
        <i class="layui-icon layui-icon-release"></i>
        微信认证
    </a>
    {{# } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="wx-complete">
        <i class="layui-icon layui-icon-ok-circle"></i>
        标记为完成
    </a>
    {{# } }}
</script>

<script type="text/html" id="leftBar">
    <a class="layui-btn layui-btn-sm " lay-event="search">
        <i class="layui-icon layui-icon-search"></i>查询
    </a>
</script>

<script>

    function getChannelName(channelId) {
        if (1 == channelId) {
            return "随行付";
        }

        if (3 == channelId) {
            return "瑞银信";
        }

        if (4 == channelId) {
            return "银盛";
        }

        return "";
    }

    function getSubMchType(subMchType) {
        if (subMchType == "WX") {
            return "微信";
        } else if (subMchType == "ZFB") {
            return "支付宝";
        } else {
            return "银联";
        }
    }

    function getSortField(obj, type) {
        if (obj.type === type) {
            return obj.field;
        }
    }

    $(function () {

    });

    layui.config({
        version: '1596625002448' //为了更新 js 缓存，可忽略
    });

    let layer;
    let layPage;
    let table;
    let form;

    layui.use(['laydate', 'laypage', 'layer', 'form', 'table', 'element', 'slider'], function () {
        layPage = layui.laypage //分页
        layer = layui.layer //弹层
        table = layui.table //表格
        form = layui.form;

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , autoSort: false
            , url: ctx + '/subMerchant/page'//数据接口
            , title: '用户表'
            , page: true //开启分页
            , toolbar: '#leftBar'
            , defaultToolbar: ['filter']
            , where: form.val("formCondtion")
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 70, sort: true, fixed: 'left'}
                , {field: 'userName', title: "实名姓名", minWidth: 86, sort: false}
                , {field: 'loginName', title: "账号", width: 190, sort: false}
                , {field: 'merchantCode', title: '商户code', width: 190}
                , {field: 'merchantId', title: '通道商户号', width: 160}
                , {
                    field: 'channelTypeId', title: '通道', minWidth: 90, sort: true, templet: function (d) {
                        return getChannelName(d.channelTypeId);
                    }
                }
                , {
                    field: 'subMchType', title: '子渠道类型', minWidth: 130, sort: true, templet: function (d) {
                        return getSubMchType(d.subMchType);
                    }
                }
                , {field: 'channelId', title: '接入方渠道号', minWidth: 160}
                , {field: 'subMchId', title: '子商户号', minWidth: 160}
                , {
                    field: 'createTime',
                    title: '创建时间',
                    width: 160,
                    sort: true,
                    templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                }
            ]]
            , request: {
                pageName: 'current'
                , limitName: 'size'
            }
            , response: {
                statusCode: 200
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'search':
                    var params = serialize($('#form1'));
                    params.column = obj.config.where.column;
                    params.asc = obj.config.where.asc;
                    table.reload('demo', {
                        where: params
                        , page: {
                            size: 10
                            , current: 1
                        }
                    });
                    break;
            }
        });

        //监听排序事件
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: form.val("formCondition")
            });

            layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'wx-audit') {
                // 微信认证
                var id = data.id;
                layer.confirm('是否为商户' + data.merchantCode + '发起微信实名认证？', function (index) {
                    $.ajax({
                        async: false
                        , url: ctx + "/wx/wxCert"
                        , data: {
                            merchantCode: data.merchantCode
                            , channelId: data.channelId
                        }
                        , type: 'POST'
                        , dataType: 'json'
                        , contentType: 'application/x-www-form-urlencoded'
                        , success: function (res) {
                            if (res.code == '200') {
                                table.reload('demo');
                                layer.msg(res.message);
                                layer.close(index);
                            } else {
                                layer.msg(res.message);
                                layer.close(index);
                            }
                        }
                        , error: function (obj, error) {
                            layer.msg(error);
                            layer.close(index);
                        }
                    });
                });
            } else if (layEvent === 'wx-complete') {
                layer.confirm('是否标记为完成', {icon: 3, title: '提示'}, function (index) {
                    //do something

                    var fieldData = new Object();
                    fieldData.merchantCode = data.merchantCode;
                    fieldData.channel = data.channelId;
                    $.post("${ctx}/subMerchantApplyOrder/complete", fieldData, function (d) {
                        layer.msg(d.message)
                        table.reload('demo', null, true);
                        layer.close(index);
                    })
                });
            }
        });

        //分页
        layPage.render({
            elem: 'demo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });
    });

    var index;

    // 无法做到完全与layui.table兼容
    function onDetailMouseOver(obj) {
        console.log("onDetailMouseOver");
        $(obj).addClass('data');
        var width = 200;
        var top = $(obj).offset().top;
        var left = $(obj).offset().left - width;

        var data = new Array();
        $("tr.layui-table-hover td").each(function () {
            var fieldName = $(this).attr("data-field");
            data[fieldName] = $(this).children('div').text();
        })

        console.log(data);
        index = layer.msg("姓名：" + data['userName'] + "<br />手机号： " + data['phone'] + "\n", {
            area: width
            , offset: [top, left]
            , time: '-1'
        });
    }

    function onDetailMouseOut(obj) {
        console.log("onDetailMouseLeave");
        $(obj).removeClass('data');
        layer.close(index);
    }
</script>
</body>