@extends('vip.layouts')
@section('seo_title')
    球队管理
@endsection
@section('content')

    <style type="text/css">
    /* 弹窗 (background) */
    .modal {
        display: none; /* 默认隐藏 */
        /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
        position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        /*设置弹窗位置*/
        padding-top: 100px;
        padding-bottom: 200px;
        /*浮在全屏上*/
        width: 100%; 
        height:  100%; 
        /*overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。*/
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4);
        text-align: right;
    }

    /* 弹窗内容 */
    .modal-content {
        /*position: relative;*/
        /*弹窗背景色设置*/
        background-color: #fefefe;
        margin: auto;
        padding: 260px auto;
        width: 600px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        border-radius: 10px;
       }

    /* 添加动画 */
    @-webkit-keyframes animatetop {
        from {top:-200px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-200px; opacity:0}
        to {top:0; opacity:1}
    }

    /* 关闭按钮 */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover, .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        display: block;
        line-height: 30px;
        padding: 2px 10px;
        background-color: #AEAEAE;
        color: white;
        text-align: left;
        border-radius: 5px 5px 0 0;
    }

    .modal-body {
        padding: 2px 16px;
        font-size: 18px;
        /*height: 200px;*/
    }

    .modal-footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 520px;
        padding: 0 40px;
        height: 50px;
       border-radius:0 0 5px 5px;
        display: block;
        line-height: 39px;
        background-color: #AEAEAE;
        color: white;
    }
    .ok,.no{
        width: 100px;
        height: 40px;
    }
</style>

    <script type="text/html" id="status">
        @{{#if(d.status==1){ }}
            <span>开启</span>
        @{{#}else{ }}
            <span>关闭</span>
        @{{#} }}
    </script>

    <script type="text/html" id="operation">
        <span><button onclick="besult(@{{d.id}})" class="layui-btn layui-btn-sm layui-btn-green set">关联</button></span>
        <span><a class="layui-btn layui-btn-sm lay-btn-diy" href="/admin/Teammanage/allname?id=@{{d.id}}">编辑</a></span>
    </script>    

    <div class="layui-row">
        <div class="layui-col-xs12">
            <form class="layui-form rewrite" eventType="eventForm"  action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">{{ trans('teammanage.sousuo') }}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="team_name" id="team_name" eventType="event-query"  value="{{ $team_name }}" lay-verify="required" autocomplete="off" placeholder="球队名字" class="layui-input">
                        </div>
                        <div class="layui-input-inline checkbox">
                            <input type="checkbox" name="sureblur" id="form_sureblur" lay-skin="switch" lay-text="精确|模糊" @if(!isset($sureblurs) || $sureblurs=='on') checked @endif  class="layui-input" eventType=event-query>
                            <input type="hidden" name="sureblurs" id="form_sureblurs" lay-verify="required" autocomplete="off" class="layui-input" eventType=event-query  value="{{ $sureblurs }}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{ trans('teammanage.status') }}</label>
                        <div class="layui-input-inline" style="width: 200px">
                            <select name="status"  id="status"  lay-verify="" autocomplete="off" class="layui-input"  eventType=event-query>
                                <option value="-1">{{ trans('teammanage.select_status') }}</option>
                                @foreach(trans('status.team_status.status') as $k=>$v):
                                    @if($status==$k))
                                        <option value="{{$k}}" selected="selected">{{$v}}</option>
                                    @else
                                        <option value="{{$k}}">{{$v}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                   </div>

                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-sm lay-btn-diy"   data-type="reload" eventType="event-query-submit" style="opacity: 1; pointer-events: auto;">提交</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 弹窗 -->
    <div id="myModal" class="modal">
            <input type="hidden" id="id" name="id" value="">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>球队名关联添加</h2>
                </div>
                <div class="modal-body">
                    <p style="text-align:left;color:#5f7788;">请认真填写球队名</p><br>
                    <div style="text-align:left;">
                        <div style="display: flex;">
                            <li>关联球队：</li><input type="text" id="teamsousuo" autoComplete='off'>
                            <select name="teamnamecn" id="teamnamecn">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="ok" onchange="buttonClick()"><h3>确定</h3></button>&nbsp;<button class="no"><h3>取消</h3></button>
                </div>
            </div>
    </div>

    <script type="text/javascript">
        $(function () {
            $('body').on('click', 'a[eventtype="event-delete"]', function () {
                var span = $(this).prev();
                var id = span.attr('data-id');
            })
            $('body').on('click','#form_sureblur~.layui-form-switch',function(){
                var sus = $('#form_sureblur').next().text();
                if(sus=='精确'){
                    $('#form_sureblurs').val('on');
                }else{
                    $('#form_sureblurs').val('off');
                }
            })
        })

        //动态监听弹窗inputval值
        $("#teamsousuo").bind("input propertychange",function(event){
            var teamsousuo=$("#teamsousuo").val();
            var id = $("#id").val();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/admin/Teammanage/teamresult',
                data: {teamsousuo:teamsousuo,id:id},
                success: function(data) {
                    // alert(data.length); 
                    teamnamecn = "<option value=''>请选择关联球队</option>";
                    for (i = 0; i < data.length; i++) { 
                        teamnamecn += "<option value="+ data[i].team_name_cn +">"+ data[i].team_name_cn +"</option>";
                    }
                    $("#teamnamecn").html(teamnamecn);
                }
            }) 
        });

        function besult(id){
            $(":input",$("#myModal")).each(function(i){  $(this).val('');});
            document.getElementById("id").value=id;//赋值个弹窗
        
            //获取弹窗得div
            var modal = document.getElementById('myModal');
            // 获取 <span> 元素，用于关闭弹窗 （X）
            var span = document.getElementsByClassName("close")[0];
            //获取弹窗中得确定按钮
            var ok=document.getElementsByClassName("ok")[0];
            //获取弹窗中得取消按钮
            var no=document.getElementsByClassName("no")[0];
            //窗体弹出
            modal.style.display = "block";
            //点击窗体ok
            ok.onclick=function(){
                //执行弹出窗体得确定后得操作
                alert("执行确定按钮点击得操作");
                //关闭窗口
                modal.style.display = "none";
                buttonClick();
            }
            //点击窗体取消按钮
            no.onclick=function(){
                //直接关闭窗口
                modal.style.display = "none";
            }
            // 点击 <span> (x), 关闭弹窗
            span.onclick = function() {
                //直接关闭窗口
                modal.style.display = "none";
            }
            // 在用户点击其他地方时，关闭弹窗
            window.onclick = function(event) {
                //点击窗口外内容，关闭窗口
                if (event.target == modal) modal.style.display = "none";
            }
        }

        function buttonClick(){
            var teamnamecn = $("#teamnamecn").val();
            var id = $("#id").val();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/admin/Teammanage/addteamonly',
                data: {teamnamecn:teamnamecn,id:id},
                success: function(data) {
                    if(data.status==1){
                        layer.msg(data.msg);
                        location. reload()//刷新当前页面
                    }else{
                        layer.msg(data.msg);return;
                    }
                }
            })
        }
        
    </script>
@push('dataTableJS')
/*var active = {
    reload: function(){
      //执行重载
      table.reload('{{ $dataId }}', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
            account:$("#form_account").val(),
            register_ip:$('#form_register_ip').val(),
            last_ip:$('#form_last_ip').val(),
            register_url:$('#form_register_url').val(),
            last_url:$('#form_last_url').val(),
            regist_startime:$('#form_regist_startime').val(),
            regist_endtime:$('#form_regist_endtime').val(),
            statuss:$('#form_statuss').val(),
            cash_small:$('#form_cash_small').val(),
            cash_big:$('#form_cash_big').val(),
            sureblur:$('.layui-form-switch').text(),
        }
      });
    }
  };
$('.lay-btn-diy').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });*/

  //重置表单
  $('.reset').on('click',function(){
      $('input').val('');
      $('#form_statuss').val('');
      //var type = $(this).data('type');
      //active[type] ? active[type].call(this) : '';
  });
  //刷新表单
    $('.set').on('click',function(){
    //var type = $(this).data('type');
    //active[type] ? active[type].call(this) : '';
    });

@endpush

    @include('vip.datatable')
@endsection

