@extends('firmware.layout.layout')

@section('title', '紧急报警系统')
@section('keywords', '紧急报警系统')
@section('description', '紧急报警系统')

@section('css')
<style>
    #sossysem-main{
        width: 40%;
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        margin-top: 200px;
    }
    #sossysem-name-box, #sossysem-type-box{
        width: 100%;
        margin-bottom: 30px;
        font-size: 20px;
        text-align: center;
        display: flex;
    }
    #sossysem-update{
        margin-right: 20px;
        width: 60px;
        height: 40px;
        background: #367FA9;
        color: #fff;
        border: none;
        position: relative;
        right: 30%;
        float: right;
    }
</style>
@endsection


@section('content')

    <div class="layout-body">
        <div class="layout-header">
            <h4>紧急报警系统</h4>
        </div>
        <div class="layout-content">
            <div id="sossysem-main">
                <div id="sossysem-name-box">
                    <span style="width: 30%;">系统别名</span>
                    <input type="text" id="sossysem-name" value="DigSys1" disabled>
                </div>
                <div id="sossysem-type-box">
                    <span style="width: 30%;">报警类型</span>
                    <select id="sossysem-type">
                        <option value="0">无</option>
                        <option value="1">仅鸣笛</option>
                        <option value="2">常规并接收语音</option>
                    </select>
                </div>
            </div>
            <button id="sossysem-update">提交</button>
        </div>
    </div>
@endsection


@section('js')
    <script>
        $(function () {
            $('#nav-item-6').addClass('active');
        })
        $(document).off('click', '#sossysem-update').on('click', '#sossysem-update', function () {
            let type = $("#sossysem-type").val();
            let name = $("#sossysem-name").val();
            console.log(type+","+name);
        });
    </script>
@endsection