{extend name="layout/content"}
{block name="header"}
<title>用户注册绑定</title>
<link rel="stylesheet" href="__STATIC__/css/admin/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/css/FuzzySearch.css?v={$Think.STATIC_VERSION}">
<style>
    * {
        box-sizing: border-box;
    }

    .layui-form-label {
        width: 176px;
        padding: 9px 13px;
    }

    .no_border {
        border: 0;
    }

    .red {
        color: red;
    }

    .blue {
        color: blue;
    }

    .c_title {
        font-size: 20px;
        font-weight: 700;
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 20px;
    }

    .explain_wrap {
        margin: 20px 0;
    }

    .layui-input-block {
        margin-left: 175px;
    }

    .pd_t {
        padding-top: 8px;
    }

    .red_tip {

        border: 1px solid #FF5722 !important;
    }

    .layui-input {
        /* border: 1px solid #FF5722; */
    }
    .layui-table .success{
        color: green;
    }
    .layui-table .error{
        color: red;
    }
</style>
{/block}

{block name="content"}
<div class="x-body">
    <h1 class="c_title">单用户注册</h1>
    <form class="layui-form">

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>用户名：
            </label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" name="username" class="layui-input" value="" lay-verify="required|userNamelimitLength">
            </div>

            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">长度为6-11个字符</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>密码：
            </label>
            <div class="layui-input-inline">
                <input type="password" autocomplete="off" name="password" class="layui-input" value="" lay-verify="required|pswlimitLength">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">长度为6-15个字符</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>绑定游戏：
            </label>
            <!-- <div class="layui-input-inline">
                <select name="game_id" lay-search lay-verify="required">
                    <option value="">请选择游戏</option>
                    {volist name="game_list" id="game"}
                    <option value="{$game.id}"> {$game.name}</option>
                    {/volist}
                </select>
            </div> -->
            <div class="layui-input-inline FuzzySearch_Container">
                <div>
                    <input type="hidden" id='game_id' name="game_id" value="{:input('game_id')}"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>绑定推广员：
            </label>
            <div class="layui-input-inline FuzzySearch_Container">
		        <div>
		            <input type="hidden" id='J_one_channel_id' name="channel_id" value="{:input('channel_id')}"/>
		        </div>
		   	</div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="filter_submit" id="J_one_submit">注册</button>
            </div>
        </div>

    </form>
</div>

<div class="x-body">
    <h1 class="c_title">批量用户注册</h1>

    <div class="explain_wrap">
        <p>使用方法：新建一个txt文件，内容按照如下格式填写：</p>
        <p>账号1:密码1 </p>
        <p>账号2:密码2</p>
        <p class="red">注意：账号、密码只能使用英文和数字，以上仅为示例。账号和密码之间以英文冒号分隔，不同账号之间以换行分隔，请勿使用除此之外的其他字符。
            <a href="__STATIC__/demo/user.txt"
               download="示例文件.txt" class="blue">示例文件下载</a>
        </p>
    </div>

    <form class="layui-form" name="multi">

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>绑定游戏：
            </label>
            <!-- <div class="layui-input-inline">
                <select name="gameid" lay-search lay-verify="required">
                    <option value="">请选择游戏</option>
                    {volist name="game_list" id="game"}
                    <option value="{$game.id}">{$game.name}</option>
                    {/volist}
                </select>
            </div> -->
            <div class="layui-input-inline FuzzySearch_Container">
                <div>
                    <input type="hidden" id='gameid' name="gameid" value="{:input('game_id')}"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>绑定推广员：
            </label>
            <div class="layui-input-inline FuzzySearch_Container">
		        <div>
					<input type="hidden" id='J_multi_channel_id' name="channelid" value="{:input('channelid')}"/>
				</div>
		   	</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="red">*</span>账号密码导入（txt文件）：
            </label>

            <div class="layui-input-inline pd_t">
                <input type="file" accept=".txt,text/plain" name="file" id="upload_file" style="display: inline-block">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="lot_size_register">批量注册</button>
            </div>
        </div>

        <div style="width:600px;display: none" id="result">
            <table class="layui-table">
                <tr class="error">
                    <td>xxxx注册失败，原因是：用户名太短</td>
                </tr>
                <tr class="success"><td>9999注册成功</td></tr>
            </table>
        </div>
    </form>

</div>
{/block}

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

	$("#J_one_channel_id").FuzzySearch({
		 inputID    : 'J_one_channel_id',
		 title   	: '请输入推广员账号',
		 data       :{:json_encode($channel_list)},
		 searchBtn	:'J_one_submit',
    });
    
    $("#gameid").FuzzySearch({
		 inputID    : 'gameid',
		 title   	: '请输入游戏名称',
		 data       :{:json_encode($game_list)},
		 searchBtn	:'lot_size_register',
	});
	
	$("#J_multi_channel_id").FuzzySearch({
		 inputID    : 'J_multi_channel_id',
		 title   	: '请输入推广员账号',
		 data       :{:json_encode($channel_list)},
		 searchBtn	:'lot_size_register',
	});

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

        form.verify({
            userNamelimitLength: [
                /^[\S]{6,11}$/, '用户名必须6到11位，且不能出现空格'
            ],
            pswlimitLength: [
                /^[\S]{6,15}$/, '密码必须6到15位，且不能出现空格'
            ]
        });

        //注册
        form.on('submit(filter_submit)', function (data) {
            $.ajax({
                type: "POST",
                url: "{:url('register')}",
                data: data.field,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    layer.msg(data.msg);
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //批量注册
        $("#lot_size_register").on("click", function () {

            // var game_id = $("select[name=gameid] option:selected").val();
            var game_id = $("#gameid").val();
            var channel_id = $("#J_multi_channel_id").val();
            var fileInput = document.getElementById('upload_file');

            if (checkSelect() == false) {
                return false
            }

            if (!fileInput.files.length) {
                layer.msg('请上传txt文件');
                return;
            }

            var formData = new FormData();
            formData.append('game_id', game_id);
            formData.append('channel_id', channel_id);
            formData.append('file', fileInput.files[0]);
            $('#result').hide();

            $.ajax({
                type: "POST",
                url: "{:url('multiRegister')}",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (result) {
                    $('#upload_file').val(''); // 清除旧文件，避免重复提交
                    layer.msg(result.msg);

                    if (result.data && result.data.length) {
                        var html = '';
                        for (i=0;i<result.data.length;i++) {
                            var item = result.data[i];
                            html += '<tr>';

                            if (item.status) {
                                html += '<td class="success">' + item.username;
                                html += ' 注册成功';
                            } else {
                                html += '<td class="error">' + item.username;
                                html += ' 注册失败，原因为：' + item.reason;
                            }
                            html += '</td></tr>';
                        }

                        if (html.length) {
                            $('#result').find('table').html(html);
                            $('#result').show();
                        }
                    }
                },
                error: function () {
                    layer.msg('批量注册请求失败，请稍后再试');
                }
            })
        });

        function checkSelect() {

            // var options1 = $("select[name=gameid] option:selected").val();
            var options1 = $("#gameid").val();
            var options2 = $("#J_multi_channel_id").val();

            if (options1 == "" || options1 == null) {

                $(".x-body").eq(1).find($("input[placeholder='请选择游戏']")).css("border-color", "#FF5722");

                layer.msg("请选择绑定游戏", function () {})
                setTimeout(function () {
                    $(".x-body").eq(1).find($("input[placeholder='请选择游戏']")).css(
                        "border-color", "#e6e6e6");
                }, 2000);

                return false
            }

            if (options2 == "" || options2 == null) {

                $(".x-body").eq(1).find($("input[placeholder='请选择推广员']")).css("border-color", "#FF5722");

                layer.msg("请选择绑定推广员账号", function () {});
                setTimeout(function () {
                    $(".x-body").eq(1).find($("input[placeholder='请选择推广员账号']")).css(
                        "border-color", "#e6e6e6");
                }, 2000)

                return false
            }
        }
    })
</script>
{/block}