@extends('firmware.layout.layout')

@section('title', '区域设置|通信信息')
@section('keywords', '区域设置|通信信息')
@section('description', '区域设置|通信信息')


@section('css')
    <link rel="stylesheet" href="{{asset('/css/multiselect/multi-select.css')}}">
    <style>
        .custom-header {
            text-align: center;
        }
        .layout-body-1 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .mClass {
        }
        .channel-box-list {
            display: flex;
            flex-wrap: wrap;
        }
        .channel-item {
            min-width: 60px;
        }
    </style>
@endsection


@section('content')
    <div class="layout-body">

{{--        <div class="layout-content">--}}
{{--            <div class="layout-body-1">--}}
{{--                <div class="form-group">--}}
{{--                    <label for="regionName">区域列表名</label>--}}
{{--                    <input type="text" class="form-control" id="regionName"  value="区域 1" >--}}
{{--                </div>--}}
{{--                <div>--}}
{{--                    <select multiple="multiple" id="regionSelect" name="regionSelect[]">--}}
{{--                        <option value='1'>模拟信道 1</option>--}}
{{--                        <option value='2'>模拟信道 2</option>--}}
{{--                        <option value='3'>模拟信道 3</option>--}}
{{--                        <option value='4'>模拟信道 4</option>--}}
{{--                        <option value='5'>模拟信道 5</option>--}}
{{--                    </select>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div style="text-align: right;    margin-bottom: 2px;padding-bottom: 50px;">--}}
{{--                <button class="btn btn-success" id="save-button">保存</button>--}}
{{--            </div>--}}
{{--        </div>--}}

        <div class="layout-body">
            <div class="layout-header">
                <h4>区域设置|通信信息</h4>
            </div>
            <div class="layout-content">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th width="80px">#</th>
                        <th width="180px">区域名</th>
                        <th width="180px">区域模式</th>
                        <th >信道</th>
                        <th width="250px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="zone-list-box">

                    </tbody>
                </table>
            </div>

            <div style="text-align: right;padding-bottom: 50px;">
                <button type="button" class="btn btn-primary"  id="add-zone-button">新增</button>
            </div>
        </div>

    </div>

    <div class="modal fade" id="channel-box" tabindex="-2" role="dialog" aria-labelledby="example">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id=>选择信道</h4>
                </div>
                <div class="modal-body">
                    <div class="channel-box-list">

                    </div>
                    <div style="margin-top: 20px;text-align: right">
                        <button class="btn btn-success" id="save-channel-btn">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script src="{{asset('/js/multiselect/jquery.multi-select.js')}}"></script>
    <script>
        $(function () {
            let zone_list = []
            let channel_list = []
            let max_index = 0
            let index = undefined
            const getZoneListInfo = () => {
                $.post('/firmware/api/cc/getZomeInfo', {freq_id:freqID}, function (res) {
                    if (res.status == 0) {
                        zone_list = res.data.zone_list;
                        channel_list = res.data.channel_list;

                        var html = ''
                        zone_list.forEach(function (v, k) {
                            zone_list[k].Name = decodeURI(v.Name).replace('+', ' ')
                            html += '<tr data-index="'+k+'">'
                            html += '<td>'+(k+1)+'</td>'
                            html += '<td><input type="text" id="zoneName_'+k+'" value="'+decodeURI(v.Name).replace('+', ' ')+'"></td>'
                            html += '<td><input type="number" id="zoneMode_'+k+'" value="'+v.ZoneMode+'"></td>'
                            html += '<td><span id="zoneChannelList_'+k+'">'+v.ChannelList.join(',')+'</span></td>'
                            html += '<td>' +
                                '<button class="btn btn-primary zoneSaveBtn" style="margin-right: 5px">保存</button>' +
                                '<button class="btn btn-default zoneChannelSelectBtn" style="margin-right: 5px">选择信道</button>' +
                                '<button class="btn btn-danger zoneDeleteBtn">删除</button></td>'
                            html += '</tr>'
                        })
                        max_index = zone_list.length - 1
                        $('#zone-list-box').empty().append(html)

                        var channelHtml = ''
                        channel_list.forEach(function (v, k) {
                            channelHtml += '<span class="channel-item">' +
                                '<label>' +
                                '<input type="checkbox" name="channelItem" id="channelItem_'+v.ChnID+'" value="'+v.ChnID+'"> ' + v.ChnID +
                                '</label>' +
                                '</span>'
                        })

                        $('.channel-box-list').empty().append(channelHtml)
                    } else {
                        swal('提示', res.mesg, 'error')
                    }

                })
            }

            getZoneListInfo()


            //保存修改
            $(document).on('click','.zoneSaveBtn', function () {
                let zoneItem =  $(this).parent().parent()
                index = zoneItem.attr('data-index');
                let zoneName = $('#zoneName_' + index).val();
                let zoneMode = $('#zoneMode_' + index).val();
                let zoneChannelList = $('#zoneChannelList_' + index).text();

                console.log(index)
                console.log(zoneName)
                console.log(zoneMode)
                console.log(zoneChannelList.split(','))

                if (zone_list[index] == undefined) {
                    zone_list[index] = {}
                }
                zone_list[index]['ChannelList'] = zoneChannelList.split(',')
                zone_list[index]['Name'] = zoneName
                zone_list[index]['ZoneMode'] = zoneMode

                console.log(zone_list[index])
                saveData({ReadZoneInfo: zone_list})
            })
            //选择信道
            $(document).on('click','.zoneChannelSelectBtn', function () {
                $('input[name="channelItem"]').prop('checked', false);
                let zoneItem =  $(this).parent().parent()
                index = zoneItem.attr('data-index');
                let zoneChannelList = $('#zoneChannelList_' + index).text().split(',');

                zoneChannelList.forEach(function (v, k) {
                    $('input[id="channelItem_'+v+'"]').prop('checked', true);
                })

                $('#channel-box').modal('show')
            })
            //保存选中信道
            $(document).on('click', '#save-channel-btn', function () {
                var selecChanelList = []
                var checkItem = $('input[name="channelItem"]:checked')
                $.each(checkItem, function () {
                    selecChanelList.push($(this).val())
                })

                if (zone_list[index] != undefined) {
                    zone_list[index]['ChannelList'] = selecChanelList
                } else {
                    zone_list[index] = {
                        'ChannelList': selecChanelList,
                        'UserType': '0'
                    }
                }

                $('#zoneChannelList_' + index).empty().text(selecChanelList.join(','))

                $('#channel-box').modal('hide')
            })

            //删除
            $(document).on('click','.zoneDeleteBtn', function () {
                console.log(index)
                console.log(zone_list)
            })

            //新增
            $(document).on('click','#add-zone-button', function () {
                max_index++
                var k = max_index
                var html = ''
                html += '<tr data-index="'+k+'">'
                html += '<td>'+(k+1)+'</td>'
                html += '<td><input type="text" id="zoneName_'+k+'" value=""></td>'
                html += '<td><input type="number" id="zoneMode_'+k+'" value=""></td>'
                html += '<td><span id="zoneChannelList_'+k+'"></span></td>'
                html += '<td>' +
                    '<button class="btn btn-primary zoneSaveBtn" style="margin-right: 5px">保存</button>' +
                    '<button class="btn btn-default zoneChannelSelectBtn" style="margin-right: 5px">选择信道</button>' +
                    '<button class="btn btn-danger zoneDeleteBtn">删除</button></td>'
                html += '</tr>'

                $('#zone-list-box').append(html)
            })


            const saveData = (data) => {
                $.post('/firmware/api/saveData', {data: data, freq_id: freqID}, function (res) {
                    console.log(res)
                    if (res.status == 1) {
                        $('#edit-digit').modal('hide')
                    } else {
                        swal('提示', res.mesg, 'error');
                    }
                })
            }

            // $('#regionSelect').multiSelect({
            //     selectableHeader: "<div class='custom-header'>可用信道成员</div>",
            //     selectionHeader: "<div class='custom-header'>区域信道成员</div>",
            //     cssClass: "mClass"
            //     selectableFooter: "<div class='custom-header'>Selectable footer3</div>",
            //     selectionFooter: "<div class='custom-header'>Selection footer4</div>"
            // });
            //
            // $('#save-button').on('click', function () {
            //     $('#public-methods').multiSelect('deselect_all');
            //     $('#regionSelect').multiSelect('addOption', { value: 42, text: 'test 42', index: 0 });
            // })
            //
            // $('#nav-item-2').addClass('active');
        })
    </script>
@endsection