<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>终端状态管理</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-select.css"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .form-control, .control-label{
            height: 22px;
            line-height: 22px;
            padding: 0px 12px; !important;
        }

        #deviceTable {
            min-width: 100%;
        }

        .btn {
            padding: 1px 6px;
            font-size: 12px;
        }

        .tr {
            text-align: center;
        }

        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }

        .table > tbody > tr > td {
            padding: 5px;
            line-height: 1.42857143;
            vertical-align: middle;
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body class="container-fluid">
<div class="row" style="margin-top: 10px;text-align: right">
    <form class="form-horizontal"  role="form">
    <div class="col-md-6 col-lg-6">
        <div class="form-group" style="margin-bottom: 0px">
            <label class="col-md-2 control-label" style="padding-top: 0px">基础套餐:</label>
            <div class="col-md-3">
                <select class="form-control" id="basePack">

                </select>
            </div>
            <div class="col-md-1" style="padding-left: 0px;text-align: left">
                <button class="btn btn-primary" id="infomeal" type="button"><i class="glyphicon glyphicon-question-sign"></i></button>
            </div>



            <label class="col-md-2 control-label" style="padding-top: 0px">扩展套餐:</label>
            <div class="col-md-3">
                <select class="form-control" id="extendPack">
                </select>
            </div>
            <div class="col-md-1" style="padding-left: 0px;text-align: left">
                <button class="btn btn-primary" id="infomeal2" type="button"><i class="glyphicon glyphicon-question-sign"></i></button>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-6">
    </div>
    </form>
</div>
<div class="row" style="padding-top: 0px">
    <%--页面表格--%>
    <div class="col-md-12">
        <div class="width100 halfHeight">
            <table id="deviceTable" class="table table-striped table-bordered dataTable no-footer width100">
                <thead>
                <tr>
                    <th>终端名</th>
                    <th>网络参数</th>
                    <th>供电公司</th>
                    <th>变电站</th>
                    <th>基础流量</th>
                    <th>扩展流量</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <footer class="navbar-fixed-bottom">
        <div class="container" style="text-align: center">
                <div class="form-group">
                    <button id="save" class="btn btn-primary" style="margin-right: 15px">保存</button>
                </div>
        </div>
    </footer>
</div>
<input type="hidden" id="username" value="${username}">
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/xss/aes.js"></script>
<script src="${ctx}/jspJS/sm2.js"></script>
<script src="${ctx}/jspJS/sm3.js"></script>
<script src="${ctx}/jspJS/confirmIndentity.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>
<script>
    var arr = []
    var type = getQueryString("type")
    $(function () {
        if(type == 1){
            //
            arr = parent.window.paramSend()
        }else {
            arr = []
            let devIndex = getQueryString("devIndex")
            arr.push(devIndex)
        }

        //初始化设备
        getBaseFlowList()
        refresh()


       //确认按钮
        $('#save').click(function () {
            let username = $('#username').val()
            let resetName = ''
            passwordIndentity(username, resetName, function () {
                layer.confirm('是否确认提交?', function () {
                    let fmBaseIndex = $('#basePack').val()
                    let extendPack = $('#extendPack').val()
                    let map = {
                        list: arr,
                        fmBaseIndex: fmBaseIndex,
                        fmReamIndex: extendPack
                    }
                    console.log(map)
                    $.ajax({
                        type: 'post',
                        dataType: "json",
                        url: '/pqs9900/terminalmanger/addDevMealAss',
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify(map),
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg(data.message, {icon: 1}, function () {
                                    //获取选中的值
                                    var arr = $("select[name='event']").val()
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                    parent.flashResh()
                                })
                            }
                        },
                        error: function () {
                            layer.msg('未知错误', {icon: 2})
                        }
                    });
                })
            })
        })

        var tile;
        //套餐详情页面弹窗
        $('#infomeal').click(function () {
            tile='基础套餐详情'
            let base = $('#basePack').val()
            if(base == null || base == ''){
                return
            }
            layer.open({
                type: 2,
                title: tile,
                maxmin: false,
                area: ['280px', '280px'],
                content: ['flowcommainopen?types=3&fmIndex='+base, 'no'],
                scrollbar: false
            })

        })

        $('#infomeal2').click(function () {
            tile='扩展套餐详情'
            let extend = $('#extendPack').val()
            if(extend == null || extend == ''){
                return
            }
            layer.open({
                type: 2,
                title: tile,
                maxmin: false,
                area: ['280px', '280px'],
                content: ['flowcommainopen?types=3&fmIndex='+extend, 'no'],
                scrollbar: false
            })
        })
    })
    /**
     * 初始化获取后台数据
     */
    function refresh() {
        /*获取各项条件 */
        var indexi;
        $.ajax({
            type: "post",
            url: "/pqs9900/terminalmanger/getTerminalList2",
            contentType: 'application/json;charset=UTF-8',
            dataType: "json",
            data: JSON.stringify(arr),
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 200) {
                    //初始化表格
                    initTransactionTable(data.body);
                } else {
                    layer.msg(data.message, {icon: 2, time: 2000})
                    initTransactionTable(null);
                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }


    var dataTable;

    //初始化表格数据
    function initTransactionTable(tableData) {
        var height = $(window).height()-70
        let tableLen = height-70
        var length = Math.floor(tableLen / 32);
        if (length < 1) {
            length = 1;
        }
        var tableCellHeight = 32 * length;
        dataTable = $("#deviceTable").DataTable();
        dataTable.clear().draw();
        dataTable = $('#deviceTable').DataTable({
            columns: [
                {width: "12%", data: "name"},
                {width: "7%", data: "ip"},
                {width: "12%", data: "gdName"},
                {width: "12%", data: "bdName"},
                {width: "7%", data: "baseFlow"},
                {width: "7%", data: "extendFlow"},
            ],
            paging:false,
            info:false,
            destroy: true,
            data: tableData,
            lengthChange: true,
            searching: true,
            dom: 'rtip',
            scrollY: tableCellHeight,
            // scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9900/json/chine.json'
            },
        });
    }

    //获取流量基础套餐列表
    function getBaseFlowList() {
        $.ajax({
            type: "get",
            url: "/pqs9900/flow/getFlowMealList",
            dataType: "json",
            success: function (data) {
                if (data.code === 200) {
                    let da = data.body
                    if(da!=null && da.length!=0){
                        let html = ''
                        let html2 = ''
                        let first = '<option value="">空</option>'
                        for(let i =0;i<da.length;i++){
                            let str = '<option value="'+da[i].fmIndex+'">'+da[i].fmName+'</option>'
                            if(da[i].type == 0){
                                //基础套餐
                                html+=str;
                            }else {
                                //扩展套餐
                                html2+=str
                            }
                        }
                        $('#basePack').html(html)
                        $('#extendPack').html(first+html2)
                    }

                } else {

                }

            }
        })
    }
</script>
</body>
</html>
