@extends('firmware.layout.layout')

@section('title', '语音加密')
@section('keywords', '语音加密')
@section('description', '语音加密')

@section('css')
    <style>
        .modal-body {
            display: flex;
            flex-direction: column;
        }
        .modal-body-1 {
            display: flex;
            flex-wrap: wrap;
        }
        .modal-body-1 div {
            flex: 1;
            margin-right: 5px;
        }
        .tab-label {
            color: #337ab7;
            text-align: center;
            margin-top: 10px;
        }
        .pianyi-button {
            display: flex;
            /*justify-content: center;*/
            align-items: end;
        }
        .form-group {
            width: 250px;
        }
        #voiceEncryption-table{
            height: 700px;
            overflow-y: scroll;
            margin-bottom: 50px;
        }
        .voiceEncryption-edit
        {
            margin-left: 5px;
        }
        .voiceEncryption-delete
        {
            margin-left: 15px;
        }
    </style>
@endsection


@section('content')
    <div class="layout-body">
        <div class="layout-header">
            <h4>语言加密</h4>
        </div>
        <div class="layout-content">
            <div id="voiceEncryption-table">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th width="200px" data-id="1" class="voiceEncryption-id">ID</th>
                        <th width="200px">别名</th>
                        <th width="200px">算法</th>
                        <th width="200px">长度</th>
                        <th width="400px">密钥值</th>
                        <th width="200px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="voiceEncryption-tbody">
                        <tr class="voiceEncryption-list">
                            <td>1</td>
                            <td><input type="text" value="联系人1" class="form-control" readonly></td>
                            <td>
                                <select class="form-control" disabled>
                                    <option value="0">个呼</option>
                                    <option value="1">组呼</option>
                                    <option value="2">全呼</option>
                                </select>
                            </td>
                            <td><input type="text" value="2222" class="form-control" readonly></td>
                            <td><input type="text" value="2222" class="form-control" readonly></td>
                            <td>
                                <button class="voiceEncryption-edit btn btn-info">修改</button>
                                <button class="voiceEncryption-delete btn btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            

            <div style="text-align: right;">
                 <p style="float:left;font-size:18px;">共 <span id="voiceEncryption-num" style="color: #c7170a;">1</span> 条</p>

                <button class="btn btn-primary" id="voiceEncryption-add">新增</button>
                <button class="btn btn-success" id="voiceEncryption-update">保存</button>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function () {
            $('#nav-item-7').addClass('active');
        })
        var list_id = 1;
        var list_length = $("#voiceEncryption-tbody").children().length;
        $(document).off('click', '#voiceEncryption-add').on('click', '#voiceEncryption-add', function () {
            list_id++;
            list_length++;
            var list_html = '<tr class="voiceEncryption-list">'+
                                '<td class="voiceEncryption-id" data-id="'+list_id+'">'+ list_id +'</td>'+
                                '<td><input type="text" value="联系人1" class="form-control"></td>'+
                                '<td>'+
                                    '<select class="form-control">'+
                                        '<option value="0">个呼</option>'+
                                        '<option value="1">组呼</option>'+
                                        '<option value="2">全呼</option>'+
                                    '</select>'+
                                '</td>'+
                                '<td><input type="text" value="2222" class="form-control"></td>'+
                                '<td><input type="text" value="2222" class="form-control"></td>'+
                                '<td>'+
                                    '<button class="btn btn-info voiceEncryption-edit">修改</button>'+
                                    '<button class="btn btn-danger voiceEncryption-delete">删除</button>'+
                                '</td>'+
                            '</tr>';
            $("#voiceEncryption-tbody").append(list_html);
            $("#voiceEncryption-num").html(list_length);
        })
        $(document).off('click', '.voiceEncryption-delete').on('click', '.voiceEncryption-delete', function () {
            if(list_length > 1){
                list_length--;
                $(this).parent().parent().remove();
                $("#voiceEncryption-num").html(list_length);
            }
        });
        $(document).off('click', '.voiceEncryption-edit').on('click', '.voiceEncryption-edit', function () {
            let this_parents = $(this).parent().parent();
            this_parents.find("select").attr("disabled",false);
            this_parents.find("input").attr("readonly",false);
        });
        $(document).off('click', '#voiceEncryption-update').on('click', '#voiceEncryption-update', function () {
            $("select").attr("disabled",false);
            let list_item = $(".voiceEncryption-list");
            let all_call_num = 0;
            var update_data = [];

            if(list_length < 1){
                alert("请至少保留一个");
                return;
            }

            list_item.each(function(index,item){
                let children_val = [];
                $(item).children().each(function(key,val){
                    if(key == 1 || key == 2 || key == 3 || key == 4){
                        children_val.push($(val).children().val());
                    }
                })
                update_data.push(children_val);

            })
            console.log(update_data);
        });
    </script>
@endsection