<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="../css/jgsbgl.css">
    <title>机构设备管理</title>
</head>
<body>
<div id="page-sy">
    <div class="left-nav">
        <input type="text" class="form-control input-pub" placeholder="请输入点位 回车搜索" v-model="searchText"
               @keyup.enter="fastSearch">
        <div class="div-xzml-div">
            <img src="../img/sjcx/xzml.png">
            <span>行政目录</span>
        </div>
        <div id="tree-xzxq"></div>
    </div>
    <div class="right-nav">
        <div class="center-nav">
            <div class="div-right-top">
                <span class="pub-span">监控名称：</span>
                <input type="text" class="form-control input-pub" id="ryxm">
                <button type="button" class="btn btn-sm pub-btn" @click="queryRY(1,true)">查询</button>
                <!--<button type="button" class="btn btn-sm pub-btn" @click="add">新增</button>-->
            </div>
            <div style="height:calc(100% - 130px);margin-top: 20px;text-align: center" class="tables">
                <table class="table table-td">
                    <thead>
                    <tr style="background-color: rgb(228, 228, 228);">
                        <td width="28%">通道名称</td>
                        <td>监控ID</td>
                        <td width="45%">RTSP</td>
                        <td>所属辖区</td>
                        <!--<td>负责人</td>-->
                        <!--<td>负责人联系方式</td>-->
                        <td width="8%">操作</td>
                    </tr>
                    </thead>
                    <tbody class="div-pub-gt">
                    <tr v-for="(item,index) in data_table_monitor">
                        <td v-text="item.tdmc" width="28%"></td>
                        <td v-text="`${item.sbbh}_${item.tdbh}`" ></td>
                        <td v-text="item.squrllj " width="45%"></td>
                        <td v-text="item.qymc"></td>
                        <!--<td v-text="item.chargeman"></td>-->
                        <!--<td v-text="item.chargemanlxdh"></td>-->
                        <!--<td v-text="item.type==0?'球机':item.type==1?'枪机':'半球'"></td>-->
                        <!--<td v-text="">-->
                            <!--<span class="glyphicon glyphicon-record" :style="{'color':(item.state==0?'green':'red')}"></span>-->
                        <!--</td>-->
                        <td width="8%">
                            <button type="button" class="btn btn-sm" style="background-color: #368ff3;color: white;padding: 2px 6px;" @click="edit(item)">编辑</button>
                            <button type="button" class="btn btn-sm btn-danger" style="padding: 2px 6px;" @click="del(item)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <div style="line-height: 64px;float: left;font-weight: 900;">
                    <span>共</span><span style="color: red;" v-text="count"></span><span>条</span>
                </div>
                <ul id="fy4" style="float: right;"></ul>
                <div style="float: right;margin-top: 21px;margin-right: 30px;width: 110px;line-height: 36px;font-weight: 900;">
                    <span style="float: left;width: 34px;">每页</span>
                    <select class="form-control" v-model="fy_select" style="width: 50px;padding: 0px 3px;float: left;" v-on:change="getChange()">
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                        <option>40</option>
                        <option>50</option>
                    </select>
                    <span style="float: left;margin-left: 8px;">条</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myjgModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form onsubmit="return false;" class="form-horizontal" role="form">
        <div class="modal-dialog" role="document" style="width: 460px;">
            <div class="modal-content" style="color: #e6eaef;width: 460px;">
                <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" style="color: white;">&times;</span></button>
                    <h6 class="modal-title">新增监控</h6>
                </div>
                <div class="modal-body" style="height:330px;">
                    <table class="table table-td">
                        <tbody>
                        <tr>
                            <td>监控名称:</td>
                            <td><input type="text" name="name" style="width:280px;" class="form-control" v-model="data_s.tdmc"
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>监控ID:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="`${data_s.sbbh}_${data_s.tdbh}`"
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>RTSP:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.squrllj"
                                       autocomplete="off" required></td>
                        </tr>
                        <!--<tr>-->
                            <!--<td>所属辖区:</td>-->
                            <!--<td><input class="easyui-combotree form-control" name="city1" v-model="data_s.qymc"-->
                                       <!--style="width:280px;" disabled/>-->
                            <!--</td>-->
                        <!--</tr>-->
                        <tr><td>
                            部门:</td>
                            <td>
                                <div class="layui-input-block">
                                    <ul id="deptTree" class="dtree" data-id="0" data-value="请选择部门"></ul>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                    <button type="button submit" class="btn btn-sm btn-info" style="background-color: #368ff3" @click="define">确定
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal fade" id="myjgModal1_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form onsubmit="return false;" class="form-horizontal" role="form">
        <div class="modal-dialog" role="document" style="width: 460px;">
            <div class="modal-content" style="color: #e6eaef;width: 460px;">
                <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" style="color: white;">&times;</span></button>
                    <h6 class="modal-title">编辑监控</h6>
                </div>
                <div class="modal-body" style="height:330px;">
                    <table class="table table-td">
                        <tbody>
                        <tr>
                            <td>监控名称:</td>
                            <td><input type="text" name="name" style="width:280px;" class="form-control" v-model="data_s.tdmc"
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>设备编号:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.sbbh"
                                       autocomplete="off" required></td>
                        </tr>

                        <tr>
                            <td>通道编号:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.tdbh"
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>RTSP:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.squrllj "
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>所属辖区:</td>
                            <td><input class="easyui-combotree form-control" id="department2" name="city1" v-model="data_s.qymc"
                                       style="width:280px;" disabled/>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                    <button type="button submit" class="btn btn-sm btn-info" style="background-color: #368ff3" @click="define">确定
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-paginator.js"></script>
<script src="../js/util/httputil.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/jgsbgl/jgsbgl.js"></script>
<script>
        layui.config({
            base: '/lib/layui/extend/'
        }).extend({
            formSelects: 'formSelects-v4'
        }).use(['form', 'layer', 'formSelects', 'dtree'], function () {
            $ = layui.jquery;
            var form = layui.form
                , layer = layui.layer
                , formSelects = layui.formSelects
                , dtree = layui.dtree;

            dtree.renderSelect({
                elem: "#deptTree",
                url: "/depttree/tree",
                dataStyle: "layuiStyle",
                width: "100%",
                method: "GET",
                dot: false,
                accordion: true,
                menubar: true,
                response: {
                    statusCode: 0,
                    message: "msg",
                    treeId: "id",
                    parentId: "parentId",
                    title: "name"
                },
                done: function() {
                    var deptId = [[${user?.deptId + ''}]] ;
                    dtree.dataInit("deptTree", deptId);
                    dtree.setSelectValue("deptTree");
                }
            });

            dtree.on("node('deptTree')" ,function(obj){
                $("#deptId").val(obj.param.nodeId);
            });

            form.on('submit(add)', function (form) {
                form.field.role = formSelects.value('role-select', 'val');
                $.post('/user', form.field, function (result) {
                    handlerResult(result, addDone);
                });
                return false;
            });

            //监听提交
            form.on('submit(edit)', function (form) {
                form.field._method = 'PUT';
                form.field.role = formSelects.value('role-select', 'val');
                $.post('/user', form.field, function (result) {
                    handlerResult(result, editDone);
                });
                return false;
            });

            function addDone(data) {
                layer.msg("添加成功", {icon: 6});
                setTimeout(function(){ window.parent.location.reload(true); }, 1500);
            }

            function editDone(data) {
                layer.msg("修改成功", {icon: 6});
                setTimeout(function(){ window.parent.location.reload(true); }, 1500);
            }
        });
    </script>
</html>