@extends('firmware.layout.layout')

@section('title', '组呼|对讲机服务')
@section('keywords', '组呼|对讲机服务')
@section('description', '组呼|对讲机服务')


@section('css')
<style>
    .wtgroupcall-main{
        display: flex;
        font-size: 15px;
    }
    .wtgroupcall-item{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        flex-direction: column;
    }
    #wtgroupcall-table-box{
        width: 15%;
        height: 800px;
        overflow-y: auto;
    }
    #wtgroupcall-group{
        width: 100%;
        display: flex;
        justify-content: center;
        height: 120px;
        align-items: center;
    }
    #wtgroupcall-group input{
        height: 40px;
        margin-left: 20px;
    }
    #wtgroupcall-option{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #wtgroupcall-users, #wtgroupcall-group-users{
        flex: 2;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        height: 580px;
    }
    #wtgroupcall-users>span, #wtgroupcall-group-users>span{
        width: 100%;
        font-size: 20px;
    }
    #wtgroupcall-option-button{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    #wtgroupcall-option-remove{
        height: 40px;
        background: red;
        color: #fff;
        border: none;
    }
    #wtgroupcall-option-add{
        height: 40px;
        background: #50ab50;
        color: #fff;
        border: none;
    }
    .wtgroupcall-users-select, .wtgroupcall-group-select{
        background-color: #101061;
        color: #fff;
    }
    #wtgroupcall-update,#wtgroupcall-save{
        float: right;
        margin-left: 15px;
    }
    #wtgroupcall-button{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
    #wtgroupcall-button button{
        width: 10%;
        margin-right: 5px;
    }
    .wtgroupcall-li-active, .wtgroupcall-users-select, .wtgroupcall-group-users-select{
        background-color: #101061 !important;
        color:#fff;
    }
    #wtgroupcall-users-table, #wtgroupcall-group-users-table{
        width: 80%;
        text-align: center;
    }
    #wtgroupcall-users-table td, #wtgroupcall-group-users-table td{
        cursor: pointer;
    }
</style>
@endsection


@section('content')
    <div class="layout-body">
        <div class="layout-header">
            <h4>组呼</h4>
        </div>
        <div class="layout-content">
            <div class="wtgroupcall-main">
                <div id="wtgroupcall-table-box">
                    <table class="table table-hover table-striped" id="wtgroupcall-table">
                        <thead>
                        <tr>
                            <th width="200px">组呼列表</th>
                        </tr>
                        </thead>
                        <tbody id="wtgroupcall-tbody">

                        </tbody>
                    </table>
                </div>
                <div class="wtgroupcall-item">
                    <div id="wtgroupcall-group">
                        <span>组呼列表别名</span>
                        <input type="text" id="wtgroupcall-group-name" value="">
                    </div>
                    <div id="wtgroupcall-option">
                        <div id="wtgroupcall-users">
                            <table class="table table-hover table-striped" id="wtgroupcall-users-table">
                                <thead>
                                <tr>
                                    <th width="200px" style="text-align: center;">可用到联系人</th>
                                </tr>
                                </thead>
                                <tbody id="wtgroupcall-users-tbody">
                                    <!-- <tr class="wtgroupcall-users-list">
                                        <td>联系人2</td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                        <div id="wtgroupcall-option-button">
                            <button id="wtgroupcall-option-add">添加》》</button>
                            <button id="wtgroupcall-option-remove">《《删除</button>
                        </div>
                        <div id="wtgroupcall-group-users">
                            <table class="table table-hover table-striped" id="wtgroupcall-group-users-table">
                                <thead>
                                <tr>
                                    <th width="200px" style="text-align: center;">联系人成员</th>
                                </tr>
                                </thead>
                                <tbody id="wtgroupcall-group-users-tbody">
                                    <!-- <tr class="wtgroupcall-group-users-list">
                                        <td>成员2</td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="wtgroupcall-button">
                        <button>|<-</button>
                        <button><<-</button>
                        <button>->></button>
                        <button>->|</button>
                        <button id="wtgroupcall-button-add">增加</button>
                        <button id="wtgroupcall-button-delete">删除</button>
                    </div>
                </div>
            </div>
            <button id="wtgroupcall-update" class="btn btn-success">提交</button>
            <button id="wtgroupcall-save" class="btn btn-primary">保存</button>
        </div>
    </div>
@endsection


@section('js')
    <script>
        $(function () {
            $('#nav-item-4').addClass('active');
            let contact_list = [];
            let receive_group_list = [];
            let group_users_list = [];
            let group_list_html = "";
            let group_last_index = 0;
            let remove_index = [];//删除的数据下标
            const getChannelList = (channel_type) => {
                $.post('/firmware/api/cc/getChannelList', {channel_type:channel_type, freq_id:freqID}, function (res) {
                    decodeURI(res)
                    if (res.status == 0) {
                        receive_group_list = res.data.receive_group_list;
                        receive_group_list.forEach(function (v, k) {
                            group_last_index = k;
                            receive_group_list[k].GroupName = decodeURI(v.GroupName).replace('+', ' ')
                            group_list_html += '<tr class="wtgroupcall-list" data-groupindex='+ k +'>';
                            group_list_html += '<td>'+v.GroupName+'</td>';
                            group_list_html += '</tr>';
                        });
                        $('#wtgroupcall-tbody').empty().append(group_list_html);

                        contact_list = res.data.contac_list;
                        $('.wtgroupcall-list').first().trigger("click");
                        // setGroupUsersList();
                    } else {
                        swal('提示', res.mesg, 'error')
                    }
                })
            }
            function setGroupUsersList(){
                let contac_html = "";
                let group_users_html = "";
                contact_list.forEach(function (v, k) {
                    contact_list[k].ContactName = decodeURI(v.ContactName).replace('+', ' ')
                    if($.inArray(parseInt(v.CallNum),group_users_list) !== -1){
                        group_users_html += '<tr class="wtgroupcall-group-users-list" data-num="'+ v.CallNum +'">';
                        group_users_html += '<td>'+v.ContactName+'</td>';
                        group_users_html += '</tr>';
                    }else{
                        contac_html += '<tr class="wtgroupcall-users-list" data-num="'+ v.CallNum +'">';
                        contac_html += '<td>'+v.ContactName+'</td>';
                        contac_html += '</tr>';
                    }
                });
                $('#wtgroupcall-users-tbody').empty().append(contac_html);
                $('#wtgroupcall-group-users-tbody').empty().append(group_users_html);
            }
            //选择列表
            $(document).off('click', '.wtgroupcall-list').on('click', '.wtgroupcall-list', function () {
                $(".wtgroupcall-li-active").removeClass("wtgroupcall-li-active");
                $(this).addClass("wtgroupcall-li-active");
                $("#wtgroupcall-group-name").val($(this).find("td").html());
                let group_index = $(this).data("groupindex");
                group_users_list = receive_group_list[group_index].GroupList;

                setGroupUsersList();
            });
            //提交按钮
            $(document).off('click', '#wtgroupcall-update').on('click', '#wtgroupcall-update', function () {
                remove_index.forEach(function(v,k){
                    receive_group_list.splice(v,1);
                })
                remove_index = [];
                console.log(receive_group_list);
            });
            //保存按钮
            $(document).off('click', '#wtgroupcall-save').on('click', '#wtgroupcall-save', function () {
                let group_users = $("#wtgroupcall-group-users-tbody tr");
                let users_array = [];
                let index = $(".wtgroupcall-li-active").data("groupindex");
                group_users.each(function(index,item){
                    users_array.push($(item).find("td").html());
                })
                if (receive_group_list[index] === undefined) {
                    receive_group_list[index] = {}
                }
                receive_group_list[index]["GroupName"] = $("#wtgroupcall-group-name").val();
                receive_group_list[index]["GroupList"] = users_array;
            });
            //增加组呼
            $(document).off('click', '#wtgroupcall-button-add').on('click', '#wtgroupcall-button-add', function () {
                group_last_index++;
                let list_html = '<tr class="wtgroupcall-list" data-groupindex="'+ group_last_index +'">'+
                                    '<td>新增组列表'+group_last_index+'</td>'+
                                '</tr>';
                $("#wtgroupcall-tbody").append(list_html); 
                receive_group_list[group_last_index] = {};
                receive_group_list[group_last_index]["GroupName"] = '新增组列表'+group_last_index;
                receive_group_list[group_last_index]["GroupList"] = [];
            });
            //删除组呼
            $(document).off('click', '#wtgroupcall-button-delete').on('click', '#wtgroupcall-button-delete', function () {
                if($(".wtgroupcall-li-active").length > 0){
                    let index = $(".wtgroupcall-li-active").data("groupindex");
                    $(".wtgroupcall-li-active").remove();
                    remove_index.push(index);
                }
            });
            //获取信道列表
            getChannelList(0);
        })
        $(document).off('click', '#wtgroupcall-users-tbody tr').on('click', '#wtgroupcall-users-tbody tr', function () {
            if($(this).hasClass("wtgroupcall-users-select")){
                $(this).removeClass("wtgroupcall-users-select");
            }else{
                $(this).addClass("wtgroupcall-users-select");
            }
        });

        $(document).off('click', '#wtgroupcall-group-users-tbody tr').on('click', '#wtgroupcall-group-users-tbody tr', function () {
            if($(this).hasClass("wtgroupcall-group-users-select")){
                $(this).removeClass("wtgroupcall-group-users-select");
            }else{
                $(this).addClass("wtgroupcall-group-users-select");
            }
        });
        
        $(document).off('click', '#wtgroupcall-option-add').on('click', '#wtgroupcall-option-add', function () {
            $("#wtgroupcall-group-users-tbody").append($(".wtgroupcall-users-select"));
            removeUsersSelect();
        });
        $(document).off('click', '#wtgroupcall-option-remove').on('click', '#wtgroupcall-option-remove', function () {
            $("#wtgroupcall-users-tbody").append($(".wtgroupcall-group-users-select"));
            removeUsersSelect();
        });
        function removeUsersSelect(){
            $(".wtgroupcall-users-select").removeClass("wtgroupcall-users-select");
            $(".wtgroupcall-group-users-select").removeClass("wtgroupcall-group-users-select");
        }
    </script>
@endsection