{extend name="layout/content" /} {block name="header"}

<title>SDK游戏管理</title>
<link rel="stylesheet" href="__STATIC__/css/admin/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/css/FuzzySearch.css?v={$Think.STATIC_VERSION}">
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<style>
    .layui-icon {
        vertical-align: bottom;
    }

    .td-manage button {
        border: 0;
        padding: 5px;
        border-radius: 5px;
        color: #FFFFFF;
    }

    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 48px;
        font-weight: 400;
        text-align: right;
    }

    .layui-form-item .layui-input-inline {
        float: none;
        margin-left: 10px;
    }

    .edit {
        padding: 0 8.5px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
    }

    #copyGameId {
        width: 1px;
        border: 0;
        opacity: 0;
    }

    .layui-form-label {
        width: 103px;
        margin: 0;
    }

    .cooperation_status .layui-form-select dl dd.layui-this {
        background: #fff;
    }

    select[multiple] + .layui-form-select > .layui-select-title > input.layui-input {
        border-bottom: 0
    }

    select[multiple] + .layui-form-select dd {
        padding: 0;
    }

    select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] {
        margin: 0 !important;
        display: block;
        line-height: 36px !important;
        position: relative;
        padding-left: 26px;
    }

    select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] span {
        line-height: 36px !important;
        float: none;
        padding-left: 8px;
    }

    select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] i {
        position: absolute;
        left: 10px;
        top: 0;
        margin-top: 9px;
    }

    .multiSelect {
        line-height: normal;
        height: auto;
        padding: 4px 10px;
        overflow: hidden;
        min-height: 38px;
        margin-top: -38px;
        left: 0;
        z-index: 99;
        position: relative;
        background: none;
    }

    .multiSelect a {
        padding: 2px 5px;
        background: #908e8e;
        border-radius: 2px;
        color: #fff;
        display: block;
        line-height: 25px;
        height: 25px;
        margin: 2px 5px 2px 0;
        float: left;
    }

    .multiSelect a span {
        float: left;
    }

    .multiSelect a i {
        float: left;
        display: block;
        margin: 2px 0 0 2px;
        border-radius: 2px;
        width: 18px;
        height: 16px;
        padding: 4px;
        position: relative;
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .multiSelect a i:before, .multiSelect a i:after {
        position: absolute;
        left: 8px;
        top: 2px;
        content: '';
        height: 12px;
        width: 1px;
        background-color: #fff
    }

    .multiSelect a i:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .multiSelect a i:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .multiSelect a i:hover {
        background-color: #545556;
    }

    .multiOption {
        display: none;
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-fanxuan:before {
        content: "\e837";
    }

    .icon-quanxuan:before {
        content: "\e623";
    }

    .icon-qingkong:before {
        content: "\e63e";
    }

    .game-nav-tabs {
        margin: 0 0 18px;
        border-bottom: 1px solid #e6e6e6;
    }

    .game-nav-tabs .layui-tab-title {
        height: 44px;
        border-bottom: 0;
    }

    .game-nav-tabs .layui-tab-title li {
        height: 44px;
        line-height: 44px;
        padding: 0;
        transition: color .2s ease, background-color .2s ease;
    }

    .game-nav-tabs .layui-tab-title li a {
        display: block;
        padding: 0 24px;
        color: inherit;
    }

    .game-nav-tabs .layui-tab-title li:hover {
        color: #1E9FFF;
        background: #f5fbff;
    }

    .game-nav-tabs .layui-tab-title .layui-this {
        color: #1E9FFF;
        font-weight: 600;
    }

    .game-nav-tabs .layui-tab-title .layui-this:after {
        height: 44px;
        border: 0;
        border-bottom: 3px solid #1E9FFF;
    }

</style>
{/block} {block name="content"}

<div class="x-body">
    <div class="layui-tab layui-tab-brief game-nav-tabs">
        <ul class="layui-tab-title">
            <li class="layui-this"><a href="{:url('Game/index')}">游戏管理</a></li>
            <li><a href="{:url('Game/gameBand')}">游戏组管理</a></li>
        </ul>
    </div>

    <form class="layui-form" method="get">

        <div style="float:left">
            <div class="layui-inline">
                <a class="layui-btn layui-btn-radius" href="{:url('create')}">
                    <i class="layui-icon">&#xe654;</i>新增游戏
                </a>
            </div>

        </div>

        <div style="float: right;margin-top: 20px;">

            <div class="layui-inline">
                <label class="layui-form-label">游戏ID：</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" placeholder="请输入游戏ID" autocomplete="off" class="layui-input"
                           value="{$Request.get.id}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">游戏名称：</label>
                <div class="layui-input-inline FuzzySearch_Container">
                    <div>
                        <input type="hidden" id='J_gameid' name="game_name" value=""/>
                    </div>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="game_name_link" value=""
                           placeholder="游戏名称(模糊搜)"/>
                </div>
            </div>

            <div class="layui-inline cooperation_status">
                <label class="layui-form-label">对接状态：</label>
                <div class="layui-input-inline">
                    <select name="cooperation_status" multiple lay-filter='multi'>
                        <option value="">- 请选择对接状态 -</option>
                        <option value="0">对接中</option>
                        <option value="1">上&nbsp;&nbsp;&nbsp;线</option>
                        <option value="2">白名单限制</option>
                        <option value="3">下架</option>
                    </select>
                </div>
            </div>

            <input type="hidden" name="cooperation_status_str" value="" id="cooperation_status">

            <!-- <div class="layui-inline">
                <label class="layui-form-label">是否显示：</label>
                <div class="layui-input-inline">
                    <select name="is_show" >
                        <option value="">- 请选择显示状态 -</option>
                        <option  value="1" {if condition="$Request.get.is_show eq '1'" }selected="selected" {/if}>是</option>
                        <option value="0" {if condition="$Request.get.is_show eq '0'" }selected="selected" {/if}>否</option>
                    </select>
                </div>
            </div> -->

            <div class="layui-inline">
                <label class="layui-form-label">区服类型：</label>
                <div class="layui-input-inline">
                    <select name="game_kind">
                        <option value="">- 请选择区服类型 -</option>
                        <option value="1" {if condition="$Request.get.game_kind eq '1'" }selected="selected" {
                        /if}>专服</option>
                        <option value="2" {if condition="$Request.get.game_kind eq '2'" }selected="selected" {
                        /if}>混服</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">SDK版本号：</label>
                <div class="layui-input-inline">
                    <select name="android_sdk_id">
                        <option value="">请选择SDK版本号</option>
                        {notempty name="version"}
                        {volist name="version" id="bvo"}
                        <option value="{$bvo.id}" {if condition="input('android_sdk_id') eq $bvo.id"
                                }selected="selected" {
                        /if}>{$bvo.version}</option>
                        {/volist}
                        {/notempty}
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">游戏类型：</label>
                <div class="layui-input-inline">
                    <select name="game_type">
                        <option value=""> 请选择游戏类型</option>
                        <option value="1" {if condition="input('game_type') eq 1" }selected {/if} >IOS</option>
                        <option value="2" {if condition="input('game_type') eq 2" }selected {/if} >Android</option>
                        <option value="3" {if condition="input('game_type') eq 3" }selected {/if} >H5</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <button class="layui-btn layui-btn-radius" lay-submit id="J_search_submit">查询</button>
                <a class="layui-btn layui-btn-radius layui-btn-normal download" href="javascript:;">下载报表</a>
            </div>


        </div>


        <div style="clear:both"></div>


        <table class="layui-table">
            <thead>
            <tr>
                <th>游戏ID</th>
                <th>游戏名称</th>
                <th>游戏拼音</th>
                <th>区服类型</th>
                <th>强更版本号</th>
                <th>SDK版本号</th>
                <th>关联平台</th>
                <th>对接状态</th>
                <th>是否显示</th>
                <!-- <th>是否内部游戏</th> -->
                <th>订单二次校验</th>
                <th style="width: 90px;">注销状态</th>
                <th style="width: 90px;">登陆封禁</th>
                <th style="width: 90px;">注册封禁</th>
                <th style="width: 110px;">创建时间</th>
                <th style="width: 260px;">操作</th>
            </tr>
            </thead>

            <tbody>
            {notempty name="list"} {volist name="list" id="vo"}
            <tr>
                <td>{$vo.id}</td>
                <td id="game_name_{$vo.id}">{:escape($vo.name)}</td>
                <td>{$vo.pinyin}</td>
                <td>
                    {if($vo.game_kind == 1)}
                    专服
                    {else}
                    混服
                    {/if}
                </td>
                <td>{$vo.channel_version|default="0"}</td>
                <td>
                    {if(!empty($vo.sdk_version))}
                    {$vo.sdk_version}
                    {else /}
                    -
                    {/if}
                </td>
                <td>
                    {if(!empty($gameList[$vo.band_info.android_game_id]))}安卓{/if}
                    {if(!empty($gameList[$vo.band_info.ios_game_id]))} - IOS{/if}
                    {if(!empty($gameList[$vo.band_info.h5_game_id]))} - H5{/if}
                </td>
                <td class="td-status">
                    {if($vo.cooperation_status==0)}
                    <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#BAD3D0">对接中</span>
                    {elseif($vo.cooperation_status==1)}
                    <span class="layui-btn layui-bg-blue layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#BAD3D0">上线</span>
                    {elseif($vo.cooperation_status==2)}
                    <span class="layui-btn  layui-bg-red layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#BAD3D0">白名单限制</span>
                    {elseif($vo.cooperation_status==3)}
                    <span class="layui-btn  layui-bg-red layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#BAD3D0">下架</span>
                    {/if}
                </td>

                <td class="td-status">
                    {if condition="$vo['is_show'] eq 1"}
                        <a href="javascript:;" onclick="isShow(this,'{:url(\'show\',[\'id\'=>$vo.id,\'is_show\'=>0])}')" title="是否显示开关">
                            <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#36C6D3">是</span>
                        </a>
                    {else}
                        <a href="javascript:;" onclick="isShow(this,'{:url(\'show\',[\'id\'=>$vo.id,\'is_show\'=>1])}')" title="是否显示开关">
                            <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius layui-bg-gray" style="background:#36C6D3">否</span>
                        </a>
                    {/if}

                </td>
                <!-- <td> -->
                <!--     {if($vo.is_default == 1)} -->
                <!--         <font color="red">外部游戏</font> -->
                <!--     {else} -->
                <!--         <font>内部游戏</font> -->

                <!--     {/if} -->
                <!-- </td> -->


                <td class="td-status">
                    {if($vo.order_recheck==0)}
                        <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#BAD3D0">未开启</span>
                    {elseif($vo.order_recheck==1)}
                        <span class="layui-btn   layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#BAD3D0">已开启</span>
                    {/if}
                </td>
                <td>
                    {if($vo.logout_btn==1)} 显示
                    {else /} 隐藏
                    {/if}
                </td>
                <td>
                    {if($vo.is_login==1)} <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#36C6D3">开</span>
                    {else /} <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius layui-bg-gray" style="background:#36C6D3">否</span>
                    {/if}
                </td>
                <td>
                    {if($vo.is_register==1)} <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius" style="background:#36C6D3">开</span>
                    {else /} <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-radius layui-bg-gray" style="background:#36C6D3">否</span>
                    {/if}
                </td>

                <td>{:date('Y-m-d H:i:s',$vo.create_time)}</td>

                <td class="td-manage">
                    <a title="编辑" href="{:url('update',['id'=>$vo.id])}" class="layui-btn layui-btn-normal edit">
                        <i class="layui-icon">&#xe63c;</i>编辑
                    </a>
                    <button type="button" title="参数导出" data-id="{$vo.id}" data-platform="{$vo.platform}" class="show-param" style="background:#ddd;color:black;">参数导出</button>
                    <button type="button" title="查看备注" class="view_remarks" data-remarks='{$vo.remarks}' style="background:#ddd;color:black;">查看备注</button>
                </td>
            </tr>
            {/volist} {/notempty}
            </tbody>
        </table>

        <div class="pager-container">
            <span>{$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/admin/bootstrap.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/clipboard.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/FuzzySearch.js?v={$Think.STATIC_VERSION}"></script>
<script type="text/javascript">

    //查看备注
    $(".td-manage").on("click", ".view_remarks", function () {

        var remarks = $(this).attr("data-remarks");
        var newRemarks = $(this).attr("data-remarks").replace(/[\n\r]/g, '<br>');
        layer.open({
            type: 1,
            title: '备注',
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '300px'], //宽高
            content: '<div class="x-body">' + newRemarks + '</div>'
        });
    });

    /**
     * 参数导出按钮点击事件
     */
    $('.show-param').on('click', function () {
        var id = $(this).data('id');
        var platform = $(this).data('platform');
        $.ajax({
            type: "POST",
            timeOut: 10000,
            url: "{:url('queryGameParam')}",
            data: {
                "id": id
            },
            async: false,
            success: function (res) {
                if (res.code) {
                    var data = res.data;
                    if(!data['appkey'] || !data['client_appkey']){
                        layer.msg('当前游戏未配置秘钥！！！', {
                            time: 3000, //20s后自动关闭
                        });
                        return false;
                    }

                    var html = '<div class="x-body"><p>appid: ' + data['appid'] + '</p>';
                    html += '<p>gameid: ' + data['id'] + '</p>';
                    html += '<p>游戏key(服务端): ' + data['appkey'] + '</p>';
                    html += '<p>游戏访问秘钥(客户端): ' + data['client_appkey'] + '</p>';
                    if (platform == 1) {
                        html += "<p>CHANNEL_ID: {:config('initial_channel_id')}</p>";
                    } else {
                        html += "<p>AGENT: {:config('initial_channel_id')}</p>";

                    }
                    if(data['type'] === 3){
                        html += '<p>游戏链接(H5): ' + data['h5_game_url'] + '</p>';
                    }

                    html += '</div>';
                    layer.open({
                        type: 1,
                        title: $('#game_name_' + id).html() + ' 游戏对接参数:',
                        skin: 'layui-layer-rim',
                        area: ['420px', '300px'], //宽高
                        btn: ['复制参数', '取消'],
                        btn1: function (index, layero) {

                            // 复制参数到剪贴板
                            var str = "## " + $('#game_name_' + id).html() + ' - 游戏接入参数 ##\r\nappid: ' + data['appid'] + '\r\ngameid: ' + data['id'] + '\r\n游戏key(服务端): ' + data['appkey'] + '\r\n游戏访问秘钥(客户端): ' + data['client_appkey'];
                            if (platform == 1) {
                                str += "\r\nCHANNEL_ID:" + {:config('initial_channel_id')}
                            } else {
                                str += "\r\nAGENT:" + {:config('initial_channel_id')}
                            }
                            if(data['type'] === 3){
                                str += '\r\n游戏链接(H5): ' + data['h5_game_url'];
                            }

                            var clipboard = new ClipboardJS('.layui-layer-btn0', {
                                text: function () {
                                    return str
                                }
                            });

                            layer.msg("复制成功!");
                            layer.close(index);
                        },
                        content: html,
                    });


                    if (window.top !== window.self) {
                        window.parent.$('html, body').animate({
                            scrollTop: 0
                        }, 'slow');
                    }
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.msg('网络错误，请刷新页面重试');
            }
        });
    });

    $("#J_gameid").FuzzySearch({
        inputID: 'J_gameid',
        title: '请输入游戏名称',
        data: {:json_encode($gameList)},
        searchBtn: 'J_search_submit'
    });

    var cooperation_status_str = GetQueryString("cooperation_status_str");

    $("#J_gameid_show").attr('name', 'game_name');
    $("#J_gameid_show").val("{:input('get.game_name')}");
    if (cooperation_status_str != null && cooperation_status_str != "") {
        var unitType = [];
        unitType = cooperation_status_str.split(",")
        $('select[name="cooperation_status"]').val(unitType);
    }
    $('input[name="cooperation_status_str"]').val(cooperation_status_str);


    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }


    // 报表下载
    $('.download').on('click', function () {
        $.ajax({
            type: "post",
            url: "{:url('gameManagerDown')}",
            async: false,
            data: $('.layui-form').serialize(),
            dataType: 'json',
            timeout: 5000,
            success: function (data) {
                if (data['code']) {
                    layer.alert(data['msg']);
                } else {
                    layer.alert(data['msg']);
                }
            },
            error: function () {
                layer.alert('网络错误，请重试');
            },
        });
    });

    layui.use(['form'], function () {
        var form = layui.form;
        $ = layui.$;
        form.render();

        form.on('select(multi)', function (data) { // 打开控制台查看效果
            console.log(data.value); //得到被选中的值（数组类型）
            $('#cooperation_status').val(data.value);
            console.log(data.current_value); //当前操作的值（选中或取消的值）
        })
    })
</script>
{/block}