@extends('firmware.layout.layout')

@section('title', '扫描信息')
@section('keywords', '扫描信息')
@section('description', '扫描信息')

@section('css')
<style>
    .scaninfo-main{
        display: flex;
        font-size: 15px;
    }
    .scaninfo-item{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-left: 2%;
    }
    #scaninfo-list{
        width: 15%;
        display: flex;
        height: 800px;
        overflow-y: auto;
        border: 1px solid;
    }
    #scaninfo-channel{
        width: 100%;
        display: flex;
        justify-content: center;
        height: 120px;
        align-items: center;
    }
    #scaninfo-channel input{
        height: 40px;
        margin-left: 20px;
    }
    #scaninfo-option{
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 400px;
    }
    #scaninfo-users, #scaninfo-channel-users{
        flex: 2;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        overflow: auto;
    }
    #scaninfo-users>span, #scaninfo-channel-users>span{
        width: 100%;
        font-size: 20px;
    }
    #scaninfo-option-button{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    #scaninfo-option-remove{
        height: 40px;
        background: red;
        color: #fff;
        border: none;
    }
    #scaninfo-option-add{
        height: 40px;
        background: #50ab50;
        color: #fff;
        border: none;
    }
    #scaninfo-update ,#scaninfo-save{
        float: right;
        margin-left: 15px;
    }
    #scaninfo-setting{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #scaninfo-channel-setting, #scaninfo-all-setting{
        width: 40%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 15px;
    }
    #scaninfo-channel-type-box, #scaninfo-channel-appoint-box, #scaninfo-callback-box,
    #scaninfo-all-number-box, #scaninfo-all-imitate-box, #scaninfo-all-box{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        line-height: 40px;
        margin-top: 10px;
    }
    #scaninfo-setting select{
        height: 40px;
        flex: 1;
        border-radius: 5px;
    }
    #scaninfo-callback, #scaninfo-light{
        width: 20px;
    }
    #scaninfo-setting span{
        width: 30%;
        text-align: -webkit-center;
    }
    #scaninfo-all-number, #scaninfo-all-imitate{
        width: 60%;
        border-radius: 5px;
        height: 40px;
    }
    #scaninfo-button{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #scaninfo-button button{
        width: 10%;
        margin-right: 5px;
    }
    #scaninfo-list-ul li{
        list-style-type:none;
        font-size: 18px ;
        cursor: pointer;
    }
    .scaninfo-li-active, .scaninfo-channel-select, .scaninfo-channel-users-select{
        background-color: #101061 !important;
        color:#fff;
    }
    #scaninfo-channel-table, #scaninfo-channel-users-table{
        width: 80%;
        text-align: center;
        height: 400px;
    }
    #scaninfo-table-box{
        width: 15%;
        height: 800px;
        overflow-y: auto;
    }
    #scaninfo-channel-table td, #scaninfo-channel-users-table td, #scaninfo-table-box td{
        cursor: pointer;
    }
</style>
@endsection


@section('content')
    <div class="layout-body">
        <div class="layout-header">
            <h4>扫描信息</h4>
        </div>
        <div class="layout-content">
            <div class="scaninfo-main">
                <div id="scaninfo-table-box">
                    <table class="table table-hover table-striped" id="scaninfo-table">
                        <thead>
                        <tr>
                            <th width="200px">扫描列表</th>
                        </tr>
                        </thead>
                        <tbody id="scaninfo-tbody">
                            <!-- <tr class="scaninfo-list">
                                <td>扫描2</td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
                <div class="scaninfo-item">
                    <div id="scaninfo-channel">
                        <span>扫描列表别名</span>
                        <input type="text" id="scaninfo-channel-name" value="">
                    </div>
                    <div id="scaninfo-option">
                        <div id="scaninfo-users">
                            <table class="table table-hover table-striped" id="scaninfo-channel-table">
                                <thead>
                                <tr>
                                    <th width="200px" style="text-align: center;">可用到信道</th>
                                </tr>
                                </thead>
                                <tbody id="scaninfo-channel-tbody">
                                    <!-- <tr class="scaninfo-channel-list">
                                        <td>区域1：模拟信道1</td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                        <div id="scaninfo-option-button">
                            <button id="scaninfo-option-add">添加》》</button>
                            <button id="scaninfo-option-remove">《《删除</button>
                        </div>
                        <div id="scaninfo-channel-users">
                            <table class="table table-hover table-striped" id="scaninfo-channel-users-table">
                                <thead>
                                <tr>
                                    <th width="200px" style="text-align: center;">信道成员</th>
                                </tr>
                                </thead>
                                <tbody id="scaninfo-channel-users-tbody">
                                    <!-- <tr class="scaninfo-channel-users-list">
                                        <td>信道成员区域1：模拟信道1</td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="scaninfo-setting">
                        <div id="scaninfo-channel-setting">
                            <div id="scaninfo-channel-type-box">
                                <span>发射信道模式</span>
                                <select  id="scaninfo-channel-type">
                                    <option value="0">当前信道</option>
                                    <option value="1">最后活动信道</option>
                                    <option value="2">指定信道</option>
                                </select>
                            </div>
                            <div id="scaninfo-channel-appoint-box">
                                <span>指定发射信道</span>
                                <select id="scaninfo-channel-appoint">
                                    <!-- <option value="0">区域1：数字信道1</option> -->
                                </select>
                            </div>
                            <div id="scaninfo-callback-box">
                                <span>回讲</span>
                                <input type="checkbox" id="scaninfo-callback">
                            </div>
                        </div>
                        <div id="scaninfo-all-setting">
                            <div id="scaninfo-all-number-box">
                                <span>数字扫描停留时间[秒]</span>
                                <input type="number" id="scaninfo-all-number" value="5.0">
                            </div>
                            <div id="scaninfo-all-imitate-box">
                                <span>模拟扫描停留时间[秒]</span>
                                <input type="number" id="scaninfo-all-imitate" value="5.0">
                            </div>
                            <div id="scaninfo-all-box">
                                <span>扫描指示灯</span>
                                <input type="checkbox" id="scaninfo-light">
                            </div>
                        </div>
                    </div>
                    <div id="scaninfo-button">
                        <button>|<-</button>
                        <button><<-</button>
                        <button>->></button>
                        <button>->|</button>
                        <button id="scaninfo-button-add">增加</button>
                        <button id="scaninfo-button-delete">删除</button>
                    </div>
                </div>
            </div>
            <button id="scaninfo-update" class="btn btn-success">提交</button>
            <button id="scaninfo-save" class="btn btn-primary">保存</button>
        </div>
    </div>
@endsection


@section('js')
    <script>
        $(function () {
            $('#nav-item-5').addClass('active');
            let scanList = [];
            let scaninfo_channel_list = [];
            let scaninfo_channel_users_list = [];
            let scaninfo_html = "";
            let scaninfo_last_index = 0;
            let remove_index = [];//删除的数据下标
            const getChannelList = (channel_type) => {
                $.post('/firmware/api/cc/getChannelList', {channel_type:channel_type, freq_id:freqID}, function (res) {
                    if (res.status == 0) {
                        scanList = res.data.scan_list;
                        scanList.forEach(function (v, k) {
                            scaninfo_last_index = k;
                            scanList[k].ScanListName = decodeURI(v.ScanListName).replace('+', ' ')
                            scaninfo_html += '<tr class="scaninfo-list" data-scaninfoindex="'+k+'">';
                            scaninfo_html += '<td>'+v.ScanListName+'</td>';
                            scaninfo_html += '</tr>';
                        });
                        $('#scaninfo-tbody').empty().append(scaninfo_html);
                        scaninfo_channel_list = res.data.channel_list;
                        $('.scaninfo-list').first().trigger("click");
                        // setchannelList();
                    } else {
                        swal('提示', res.mesg, 'error')
                    }
                })
            }
            //选择扫描
            $(document).off('click', '.scaninfo-list').on('click', '.scaninfo-list', function () {
                $(".scaninfo-li-active").removeClass("scaninfo-li-active");
                $(this).addClass("scaninfo-li-active");
                $("#scaninfo-channel-name").val($(this).find("td").html());
                let scaninfo_index = $(this).data("scaninfoindex");
                scaninfo_channel_users_list = scanList[scaninfo_index].ChList;
                setchannelList();

                $("#scaninfo-all-number").val(scanList[scaninfo_index]["ScanTimeOut"]);//数字扫描
                $("#scaninfo-all-imitate").val(scanList[scaninfo_index]["HoldTime"]);//模拟扫描
                $("#scaninfo-channel-type").val(scanList[scaninfo_index]["BitScanMode"]);//发射信道模式
                $('#scaninfo-channel-appoint').val(scanList[scaninfo_index]["AppointCh"]);
            });


            function setchannelList(){
                let channel_html = "";
                let scaninfo_users_html = "";
                let appoint_html = '<option value="0">无</option>';
                scaninfo_channel_list.forEach(function (v, k) {
                    scaninfo_channel_list[k].ChnName = decodeURI(v.ChnName).replace('+', ' ')

                    if($.inArray(parseInt(v.ChnID),scaninfo_channel_users_list) !== -1){
                        scaninfo_users_html += '<tr class="scaninfo-channel-users-list" data-num="'+ v.ChnID +'">';
                        scaninfo_users_html += '<td>'+v.ChnName+'</td>';
                        scaninfo_users_html += '</tr>';

                        appoint_html += '<option value='+ v.ChnID +'>'+v.ChnName+'</option>';
                    }else{
                        channel_html += '<tr class="scaninfo-channel-list" data-num="'+ v.ChnID +'">';
                        channel_html += '<td>'+v.ChnName+'</td>';
                        channel_html += '</tr>';                
                    }
                });
                $('#scaninfo-channel-tbody').empty().append(channel_html);
                $('#scaninfo-channel-users-tbody').empty().append(scaninfo_users_html);
                $('#scaninfo-channel-appoint').empty().append(appoint_html);
            }
            //提交按钮
            $(document).off('click', '#scaninfo-update').on('click', '#scaninfo-update', function () {
                remove_index.forEach(function(v,k){
                    scanList.splice(v,1);
                })
                remove_index = [];
                console.log(scanList);
            });
            //保存按钮
            $(document).off('click', '#scaninfo-save').on('click', '#scaninfo-save', function () {
                let scaninfo_channel = $("#scaninfo-channel-users-tbody tr");
                let channel_list = [];
                let index = $(".scaninfo-li-active").data("scaninfoindex");
                scaninfo_channel.each(function(key,item){
                    channel_list.push($(item).data("num"));
                })
                if (scanList[index] === undefined) {
                    scanList[index] = {}
                }
                scanList[index]["ScanListName"] = $("#scaninfo-channel-name").val();
                scanList[index]["AppointCh"] = $("#scaninfo-channel-appoint").val();
                scanList[index]["BitScanMode"] = $("#scaninfo-channel-type").val();
                scanList[index]["ChList"] = channel_list;
                scanList[index]["HoldTime"] = $("#scaninfo-all-imitate").val();
                scanList[index]["ScanTimeOut"] = $("#scaninfo-all-number").val();
            });
            //增加扫描
            $(document).off('click', '#scaninfo-button-add').on('click', '#scaninfo-button-add', function () {
                scaninfo_last_index++;
                scanList[scaninfo_last_index] = {};
                scanList[scaninfo_last_index]["ScanListName"] = '新增扫描'+scaninfo_last_index;
                scanList[scaninfo_last_index]["AppointCh"] = 0;
                scanList[scaninfo_last_index]["BitScanMode"] = 0;
                scanList[scaninfo_last_index]["ChList"] = [];
                scanList[scaninfo_last_index]["HoldTime"] = 5;
                scanList[scaninfo_last_index]["ScanTimeOut"] = 5;
                scanList[scaninfo_last_index]["FastVoteRSSI"] = "80";
                scanList[scaninfo_last_index]["PriCh_1"] = "0";
                scanList[scaninfo_last_index]["PriCh_2"] = "0";

                let li_html = '<tr class="scaninfo-list" data-scaninfoindex="'+scaninfo_last_index+'">'+
                                    '<td>新增扫描'+scaninfo_last_index+'</td>'+
                                '</tr>';
                $("#scaninfo-tbody").append(li_html); 
            });
            //删除扫描
            $(document).off('click', '#scaninfo-button-delete').on('click', '#scaninfo-button-delete', function () {
                if($(".scaninfo-li-active").length > 0){
                    let index = $(".scaninfo-li-active").data("scaninfoindex");
                    $(".scaninfo-li-active").remove(); 
                    remove_index.push(index);
                }
            });
            //获取信道列表
            getChannelList(0);
        })
        $(document).off('click', '#scaninfo-channel-tbody tr').on('click', '#scaninfo-channel-tbody tr', function () {
            if($(this).hasClass("scaninfo-channel-select")){
                $(this).removeClass("scaninfo-channel-select");
            }else{
                $(this).addClass("scaninfo-channel-select");
            }
        });

        $(document).off('click', '#scaninfo-channel-users-tbody tr').on('click', '#scaninfo-channel-users-tbody tr', function () {
            if($(this).hasClass("scaninfo-channel-users-select")){
                $(this).removeClass("scaninfo-channel-users-select");
            }else{
                $(this).addClass("scaninfo-channel-users-select");
            }
        });
        
        $(document).off('click', '#scaninfo-option-add').on('click', '#scaninfo-option-add', function () {
            $("#scaninfo-channel-users-tbody").append($(".scaninfo-channel-select"));
            removChannelSelect();
        });
        $(document).off('click', '#scaninfo-option-remove').on('click', '#scaninfo-option-remove', function () {
            $("#scaninfo-channel-tbody").append($(".scaninfo-channel-users-select"));
            removChannelSelect();
        });
        

        function removChannelSelect(){
            $(".scaninfo-channel-select").removeClass("scaninfo-channel-select");
            $(".scaninfo-channel-users-select").removeClass("scaninfo-channel-users-select");
        }
    </script>
@endsection