{extend name="layout/content" /} {block name="header"}
<title>账号角色查询</title>
<link rel="stylesheet" href="__STATIC__/css/FuzzySearch.css?v={$Think.STATIC_VERSION}">
<link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
<style>
    label {
        padding-top: 10px;
        margin-left: 10px;
    }

    .x-so {
        text-align: unset;
        margin-bottom: 20px;
    }

    section {
        margin-top: 10px;
        display: flex;
    }
</style>
{/block} {block name="content"}

<div class="x-body">
    <form class="layui-form" method="get">
        <div class="layui-row layui-col-space10">
            <div class="layui-fluid">
                <label>商务：</label>
                <div class="layui-input-inline layui-form">
                    <select name="business_type" lay-filter="business_type" id="business_type" lay-search>
                        <option value="">请选择商务</option>
                    </select>
                </div>

                <label>会长：</label>
                <div class="layui-input-inline">
                    <select name="president_type" lay-filter="president_type" id="president_type" lay-search>
                        <option value="">请选择会长</option>
                    </select>
                </div>

                <label>子会长：</label>
                <div class="layui-input-inline">
                    <select name="president_type_son" lay-filter="president_type_son" id="president_type_son" lay-search>
                        <option value="">请选择子会长</option>
                    </select>
                </div>

                <label>推广员：</label>
                <div class="layui-input-inline">
                    <select name="promoter_type" lay-filter="promoter_type" id="promoter_type" lay-search>
                        <option value="">请选择推广员</option>
                    </select>
                </div>

                <div class="layui-inline">
                    <label>开始时间：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="开始日" value="{$Request.get.start_time}" name="start_time" id="start_time">
                    </div>
                </div>

                <div class="layui-inline">
                    <label>结束时间：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="截止日" value="{$Request.get.end_time}" name="end_time" id="end_time">
                    </div>
                </div>
            </div>

            <div class="layui-fluid">
                <div class="layui-inline">
                    <label>游戏名：</label>
                    <div class="layui-input-inline FuzzySearch_Container">
                        <div>
                            <input type="hidden" id='game_id' name="game_id" value="{$Request.get.game_id}"/>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <label>用户名：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="username" value="{$Request.get.username}" placeholder="请输入用户名">
                    </div>
                </div>

                <div class="layui-inline">
                    <label>角色名：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="rolename" value="{$Request.get.rolename}" placeholder="请输入角色名">
                    </div>
                </div>

                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="search" id="J_submit">查询</button>
                        <a href="{$jh_url}" class="layui-btn" target="_blank">查看聚合数据</a>
                    </div>
                </div>
            </div>
        </div>

        <table class="layui-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户ID</th>
                <th>注册账户</th>
                <th>游戏名</th>
                <th>角色ID</th>

                <th>角色名</th>
                <th>区服ID</th>
                <th>区服名称</th>
                <th>等级</th>
                <th>推广员账号</th>

                <th>子会长</th>
                <th>公会账号</th>
                <th>商务账号</th>
                <th>角色创建时间</th>
                <th>角色更新时间</th>
            </tr>
            </thead>
            <tbody id="viewer_wrap">

            {notempty name="list"} {volist name="list" id="vo"}
            <tr>
                <td>{$vo.id}</td>
                <td>{$vo.userid}</td>
                <td>{$vo.username}</td>
                <td>{$vo.game_name}</td>
                <td>{$vo.roleid}</td>


                <td>{$vo.rolename}</td>
                <td>{$vo.serverid}</td>
                <td>{$vo.servername}</td>
                <td>{$vo.rolelevel}</td>
                <td>{$vo.channel_three_name|default="-"}</td>

                <td>{$vo.channel_two_name|default="-"}</td>
                <td>{$vo.channel_one_name|default="-"}</td>
                <td>{$vo.channel_zero_name}</td>
                <td>{$vo.create_time? date('Y-m-d H:i:s',$vo.create_time) : '' }</td>
                <td>{$vo.update_time? date('Y-m-d H:i:s',$vo.update_time) : '' }</td>
            </tr>
            {/volist}
            {else/}
            <tr>
                <td colspan="5" style="text-align: center;">暂无数据</td>
            </tr>
            {/notempty}
            </tbody>
        </table>

        <div class="pager-container">
            <span>
                {:empty($list_count)?0:$list->total()}条记录
            </span>
            {$page}
            <div class="layui-inline" style="margin:0;margin-left:10px;width:80px;">
                <input type="text" style="height: 30px;" class="layui-input" placeholder="跳转至" name="page" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
            </div>
        </div>
    </form>


</div>

{/block} {block name="footer"}
<script type="text/javascript" src="__STATIC__/js/FuzzySearch.js?v={$Think.STATIC_VERSION}"></script>
<script>
    $("#game_id").FuzzySearch({
        inputID: 'game_id',
        title: '请输入游戏名称',
        data: {:json_encode($game_list)},
        searchBtn:'J_submit',
    });

    layui.use(['form', 'layer', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;

        var starttime = laydate.render({
            elem: '#start_time',
            type: 'date',
            format: 'yyyy-MM-dd',
            done: function (value, dates) {
                endtime.config.min = {
                    year: dates.year,
                    month: dates.month - 1, //关键
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds: 0
                };
            }
        });
        var endtime = laydate.render({
            elem: '#end_time',
            type: 'date',
            format: 'yyyy-MM-dd',
            done: function (value, dates) {
                starttime.config.max = {
                    year: dates.year,
                    month: dates.month - 1, //关键
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds: 0
                }
            }
        });

        // ## 推广四级下拉 ##
        var businessType = getQueryVariable("business_type"),
            president_type = getQueryVariable("president_type"),
            president_type_son = getQueryVariable("president_type_son"),
            promoter_type = getQueryVariable("promoter_type")

        // 初始化下拉
        getChannelSelectData('sw', '', businessType);
        getChannelSelectData('hz', businessType, president_type);
        getChannelSelectData('zhz', president_type, president_type_son);
        getChannelSelectData('tgy', president_type_son, promoter_type);
        /**
         *  获取下拉数据
         * @param type sw=商务/hz=会长/zhz=子会长/tgy=推广员
         * @param pid 上级ID
         * @param select_id 选中ID
         */
        function getChannelSelectData(type = 'sw', pid = '', select_id = ''){
            $.ajax({
                type: "GET",
                url: '{:url("Channel/getSelectList")}',
                dataType: "json",
                async: false,
                data: {'type': type,'pid': pid},
                success: function (res) {
                    listData = res.data
                    // console.log("## getChannelSelectData: ", listData)
                    if (type === 'sw'){
                        $("#business_type").empty();
                        $("#business_type").append("<option value=''>请选择商务</option>")
                        $.each(listData, function (i, item) {
                            if (item.id == select_id){
                                $("#business_type").append("<option value='" + item.id + "' selected>" + item.name + "</option>")
                            }else{
                                $("#business_type").append("<option value='" + item.id + "'>" + item.name + "</option>")
                            }
                        })
                    }else if (type === 'hz'){
                        $("#president_type").empty();
                        $("#president_type").append("<option value=''>请选择会长</option>")
                        $.each(listData, function (i, item) {
                            if (item.id == select_id){
                                $("#president_type").append("<option value='" + item.id + "' selected>" + item.name + "</option>")
                            }else{
                                $("#president_type").append("<option value='" + item.id + "'>" + item.name + "</option>")
                            }
                        })
                    }else if (type === 'zhz'){
                        $("#president_type_son").empty();
                        $("#president_type_son").append("<option value=''>请选择子会长</option>")
                        $.each(listData, function (i, item) {
                            if (item.id == select_id){
                                $("#president_type_son").append("<option value='" + item.id + "' selected>" + item.name + "</option>")
                            }else{
                                $("#president_type_son").append("<option value='" + item.id + "'>" + item.name + "</option>")
                            }
                        })
                    }else if (type === 'tgy'){
                        $("#promoter_type").empty();
                        $("#promoter_type").append("<option value=''>请选择推广员</option>")
                        $.each(listData, function (i, item) {
                            if (item.id == select_id){
                                $("#promoter_type").append("<option value='" + item.id + "' selected>" + item.name + "</option>")
                            }else{
                                $("#promoter_type").append("<option value='" + item.id + "'>" + item.name + "</option>")
                            }
                        })
                    }
                    form.render('select')
                },
            });
        }
        // 获取指定URL的参数值
        function getQueryVariable(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        form.on('select(business_type)', function (data) {
            if (data.value > 0){
                getChannelSelectData('hz', data.value, businessType);
            }else{
                getChannelSelectData('hz');
                getChannelSelectData('zhz');
                getChannelSelectData('tgy');
            }
        });
        form.on('select(president_type)', function (data) {
            if (data.value > 0){
                getChannelSelectData('zhz', data.value, president_type);
            }else{
                getChannelSelectData('zhz');
            }
        });
        form.on('select(president_type_son)', function (data) {
            if (data.value > 0){
                getChannelSelectData('tgy', data.value, promoter_type);
            }else{
                getChannelSelectData('tgy');
            }
        });

        form.on('submit(search)', function () {

            var gameId = $("#game_id").val(),
                username = $("input[name='username']").val(),
                rolename = $("input[name='rolename']").val();

            // if (!gameId) {
            //     layer.msg('请选择游戏');
            //     return false;
            // }
            /*
            if (username.length < 1 && rolename.length < 1) {
                layer.msg('请输入用户名或角色名');
                return false;
            }
            */
        })
    });
</script>
{/block}