@extends('vip.layouts')
@section('content')
<div style="float: left">
    <select name="type" id="sportType"  lay-verify="" autocomplete="off" class="layui-input"  eventType=event-query>
        <option value='' selected="selected">请选择运动类型</option>
        @foreach($sportType as $k=>$v)
            <option value="{{$v->id}}">{{$v->game_name}}</option>
        @endforeach
    </select>
</div>
<div style="margin-left: 50px; float: left">
    <select name="type" onchange="changeRank(event, 1) " id="aa"  lay-verify="" autocomplete="off" class="layui-input"  eventType=event-query>
        <option value='' selected="selected">请选择洲</option>
        @foreach($rank['area'] as $k=>$v)
            <option value="{{$v->id}}">{{$v->title}}</option>
        @endforeach
    </select>

</div>
<div style="margin-left: 50px; float: left">
    <select name="type" onchange="changeRank(event, 2) " id="selectCountry"  lay-verify="" autocomplete="off" class="layui-input"  eventType=event-query>
        <option value='' selected="selected">请选择国家</option>
        @foreach($rank['country'] as $k=>$v)
            <option value="{{$v->country_id}}">{{$v->name_chinese}}</option>
        @endforeach
    </select>
</div>
<div style="margin-left: 50px; float: left">
    <select name="type" onchange="changeRank(event, 3) " id="selectLeague"  lay-verify="" autocomplete="off" class="layui-input"  eventType=event-query>
        <option value='' selected="selected">请选择联赛</option>
    </select>
</div>
<div style="margin-left: 50px; float: left">
    <select name="type" id="selectCompetition"  lay-verify="" autocomplete="off" class="layui-input"  eventType=event-query>
        <option value='' selected="selected">请选择球队</option>
    </select>
</div>
<script>
    // 洲改变
    function changeRank(event, rank) {
        const sportType = $("#sportType").val();
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/admin/Cascade/index',
            data: {rank: rank, id: event.target.value, gameType: sportType},
            success: function(backData) {
                const msg = backData.msg;
                const data = backData.data;
                const code = backData.code;
                if (data && msg === 'success') {
                    if (data.country && data.country.length) {
                        $("#selectCountry").empty();
                        let selectCountry = "<option value=''>请选择所属国家</option>";
                        for (i in data.country) {
                            selectCountry += "<option value=" + data.country[i]["country_id"] + ">" + data.country[i]["name_chinese"] + "</option>";
                        }
                        $("#selectCountry").append(selectCountry);
                    }
                    if (data.league && data.league.length) {
                        $("#selectLeague").empty();
                        let selectLeague = "<option value=''>请选择所属联赛</option>";
                        for (j in data.league) {
                            selectLeague += "<option value=" + data.league[j]["lg_id"] + ">" + data.league[j]["name_chinese"] + "</option>";
                        }
                        $("#selectLeague").append(selectLeague);
                    }
                    if (data.competition && data.competition.length) {
                        $("#selectCompetition").empty();
                        let selectCompetition = "<option value=''>请选择球队</option>";
                        for (o in data.competition) {
                            selectCompetition += "<option value=" + data.competition[o]["id"] + ">" + data.competition[o]["home_team"] + "</option>";
                        }
                        $("#selectCompetition").append(selectCompetition);
                    }
                } else {
                    alert(msg);
                }
            }
        })
    }
</script>
@endsection