@extends('firmware.layout.layout')

@section('title', '联系人|对讲机服务')
@section('keywords', '联系人|对讲机服务')
@section('description', '联系人|对讲机服务')


@section('css')
<style>
#wtcontacts-main
{
    width: 80%;
    margin: 0 auto;
    padding: 30px 0;
}
.wtcontacts-box:nth-child(5n){
    border-right: 1px solid !important;
}
.wtcontacts-box{
    border: 1px solid;
    font-size: 18px;
    padding: 5px 3px;
    height: 40px;
    border-right: none;
}

.wtcontacts-list{
    border-top: none;
}
.wtcontacts-left-first{
    min-height: 40px;
}
.wtcontacts-list-box{
    background: #fff;
}
.wtcontacts-list-box-disbled{
    background: aliceblue;
}
.wtcontacts-option{
    display: flex;
}
.wtcontacts-edit
{
    text-decoration: underline;
    cursor: pointer;
    color: blue;
    margin-left: 5px;
}
.wtcontacts-delete
{
    text-decoration: underline;
    cursor: pointer;
    color: red;
    margin-left: 15px;
}
#wtcontacts-update{
    position: fixed;
    width: 60px;
    height: 40px;
    background: #367FA9;
    color: #fff;
    border: none;
    right: 50px;
    bottom: 50px;
}
.wtcontacts-header{
    position: fixed;
    z-index: 5000;
    width: 80%;
    background-color: chocolate;
}
#wtcontacts-body{
    margin-top: 40px;
    position: absolute;
    width: 80%;
}
#wtcontacts-add
{
    position: fixed;
    width: 60px;
    height: 40px;
    background: #50ab50;
    color: #fff;
    border: none;
    right: 50px;
    bottom: 150px;
}
</style>
@endsection


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

        <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 >呼叫ID</th>
                        <th width="250px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="contact-list-box">

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

            <div style="text-align: right;padding-bottom: 50px;">
                <button type="button" class="btn btn-primary"  id="add-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>
        $(function () {
            let contact_list = []
            let max_index = 0

            const getContactList = () => {
                $.post('/firmware/api/walkie-talkie/getContactList', {freq_id:freqID}, function (res) {
                    contact_list = res.data.contac_list;

                    var html = ''
                    contact_list.forEach(function (v, k) {
                        contact_list[k].ContactName = decodeURI(v.ContactName).replace('+', ' ')
                        var selectHtml = '<select id="contactType_'+k+'">'
                        selectHtml += '<option value="0" '+ (v.Type == 0 ? 'selected' : '') +'>个呼</option>'
                        selectHtml += '<option value="1" '+ (v.Type == 1 ? 'selected' : '')+'>组呼</option>'
                        selectHtml += '</select>'

                        html += '<tr data-index="'+k+'">'
                        html += '<td>'+(k+1)+'</td>'
                        html += '<td><input type="text" id="contactName_'+k+'" value="'+decodeURI(v.ContactName).replace('+', ' ')+'"></td>'
                        // html += '<td><input type="number" id="contactType'+k+'" value="'+v.Type+'"></td>'
                        html += '<td>' + selectHtml + '</td>'
                        html += '<td><input type="number" id="contactNum_'+k+'" value="'+v.CallNum+'"></td>'
                        html += '<td>' +
                            '<button class="btn btn-primary saveBtn" style="margin-right: 5px">保存</button>' +
                            '<button class="btn btn-danger deleteBtn" >删除</button></td>'
                        html += '</tr>'
                    })
                    max_index = contact_list.length - 1
                    $('#contact-list-box').empty().append(html)
                })
            }

            //保存修改
            $(document).on('click','.saveBtn', function () {
                let elItem =  $(this).parent().parent()
                var index = elItem.attr('data-index');

                let contactName = $('#contactName_' + index).val();
                let contactNum = $('#contactNum_' + index).val();
                let contactType = $('#contactType_' + index).val()

                console.log(index)
                console.log(contactName)
                console.log(contactNum)
                console.log(contactType)

                if (contact_list[index] === undefined) {
                    contact_list[index] = {}
                }

                contact_list[index]['CallNum'] = contactNum
                contact_list[index]['ContactName'] = contactName
                contact_list[index]['Type'] = contactType
                //
                console.log(contact_list[index])
            })

            //删除
            $(document).on('click','.deleteBtn', function () {
                var index = $(this).parent().parent().attr('data-index')
                console.log(index)
            })
            //新增
            $(document).on('click', '#add-button', function () {
                max_index++
                var k = max_index
                var html = ''
                var selectHtml = '<select id="contactType_'+k+'">'
                selectHtml += '<option value="0">个呼</option>'
                selectHtml += '<option value="1">组呼</option>'
                selectHtml += '</select>'

                html += '<tr data-index="'+k+'">'
                html += '<td>'+(k+1)+'</td>'
                html += '<td><input type="text" id="contactName_'+k+'" value=""></td>'
                // html += '<td><input type="number" id="contactType'+k+'" value="'+v.Type+'"></td>'
                html += '<td>' + selectHtml + '</td>'
                html += '<td><input type="number" id="contactNum_'+k+'" value=""></td>'
                html += '<td>' +
                    '<button class="btn btn-primary saveBtn" style="margin-right: 5px">保存</button>' +
                    '<button class="btn btn-danger deleteBtn" >删除</button></td>'
                html += '</tr>'

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

            //
            getContactList()

            $('#nav-item-4').addClass('active');
        })
        // var list_id = 1;
        // $(document).off('click', '#wtcontacts-add').on('click', '#wtcontacts-add', function () {
        //     list_id++;
        //     var list_html = '<div class="wtcontacts-item">'+
        //                         '<div class="col-md-1 wtcontacts-box wtcontacts-list" data-id="'+list_id+'">'+list_id+'</div>'+
        //                         '<input class="col-md-3 wtcontacts-box wtcontacts-list wtcontacts-list-box" type="text" value="联系人1">'+
        //                         '<select class="col-md-3 wtcontacts-box wtcontacts-list wtcontacts-list-box" name="call_type" id="call_type">'+
        //                             '<option value="0">个呼</option>'+
        //                             '<option value="1">组呼</option>'+
        //                             '<option value="2">全呼</option>'+
        //                         '</select>'+
        //                         '<input class="col-md-3 wtcontacts-box wtcontacts-list wtcontacts-list-box" type="number">'+
        //                         '<div class="col-md-2 wtcontacts-box wtcontacts-list wtcontacts-option">'+
        //                             '<span class="wtcontacts-edit">修改</span>'+
        //                             '<span class="wtcontacts-delete">删除</span>'+
        //                         '</div>'+
        //                     '</div>';
        //     $("#wtcontacts-body").append(list_html);
        // })
        // $(document).off('click', '.wtcontacts-delete').on('click', '.wtcontacts-delete', function () {
        //     $(this).parent().parent().remove();
        // });
        // $(document).off('click', '.wtcontacts-edit').on('click', '.wtcontacts-edit', function () {
        //     $(this).parent().siblings(".wtcontacts-list-box-disbled").removeClass("wtcontacts-list-box-disbled");
        //     $(this).parent().siblings("select").attr("disabled",false);
        //     $(this).parent().siblings("input").attr("readonly",false);
        // });
        // $(document).off('click', '#wtcontacts-update').on('click', '#wtcontacts-update', function () {
        //     $("select").attr("disabled",false);
        //     let list_item = $(".wtcontacts-item");
        //     let all_call_num = 0;
        //     let data = "";
        //     list_item.each(function(index,item){
        //         $(item).children().each(function(key,val){
        //             if(key > 0 && key < 4){
        //                 data += $(val).val()+",";
        //             }
        //             if(key == 2 && $(val).val() == 2){
        //                 all_call_num ++;
        //             }
        //         })
        //     })
        //     if(all_call_num === 0){
        //         alert("请至少设置一个全呼类型");
        //         return;
        //     }
        //     console.log(data);
        // });
    </script>
@endsection