<%@ 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/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .form-control {
            height: 22px;
            padding: 1px 5px;
        }

        .nav > li > a {
            padding: 6px 15px;
        }

        #deviceTable {
            min-width: 100%;
        }

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


        .table > tbody > tr > td {
            padding: 5px;
            line-height: 1.42857143;
            vertical-align: middle;
            border-top: 1px solid #ddd;
        }

        .pagination > li > a, .pagination > li > span {
            padding: 6px 12px;
        }
    </style>
</head>
<body class="container-fluid">
<div class="row">
    <%--页面头--%>
    <div class="col-md-12 mt10">
        <!-- 导航 -->
        <ul class="nav nav-tabs" role="tablist" style="margin-top: 8px">
            <li role="presentation" class="active clearValue"><a href="#home" aria-controls="home" role="tab"
                                                                 data-toggle="tab">基础套餐</a></li>
            <li role="presentation" class="clearValue"><a href="#profile" aria-controls="profile" role="tab"
                                                          data-toggle="tab">扩展套餐</a></li>
            <li id="title_top" style="float: right;color: red"></li>

            <li id="read" style="float: right;">
                <button id="addopen" class="btn btn-primary">新增</button>
            </li>
            <li id="chaxun" style="width: 300px;float: right;">
                <div class="form-inline">
                    <label>筛选数据：</label>
                    <input type="text" id="query" class="form-control" onkeyup="searchResult(this.value)"
                           placeholder="空格分开多条件筛选数据">
                </div>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="home">
                <%--页面表格--%>
                <div class="col-md-12 mt10">
                    <div class="width100 div_1">
                        <table id="deviceTable1"
                               class="table table-striped table-bordered dataTable no-footer width100">
                            <thead>
                            <tr>
                                <th>套餐名</th>
                                <th>套餐流量(MB)</th>
                                <th>修改人</th>
                                <th>修改时间</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="profile">
                <%--页面表格--%>
                <div class="col-md-12 mt10">
                    <div class="width100 div_2">
                        <table id="deviceTable2"
                               class="table table-striped table-bordered dataTable no-footer width100">
                            <thead>
                            <tr>
                                <th>套餐名</th>
                                <th>套餐流量(MB)</th>
                                <th>修改人</th>
                                <th>修改时间</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</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}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/confirmIndentity.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>
    var username = $('#username').val()
    var resetName = '一次'
    var dataTable1;
    var dataTable2;
    var height = $(window).height() - 70;


    $(function () {
        $(".div_1").css("height", height);
        $(".div_2").css("height", height);
        refresh()


        $(".clearValue").on("click", function () {
            $('#query').val('')
            $('#query').trigger('onkeyup')
        });

    })

    $('#addopen').click(function () {
        passwordLocalIndentity(username,resetName,function () {
            layer.open({
                type: 2,
                title: '新增流量套餐',
                maxmin: false,
                area: ['280px', '300px'],
                content: ['flowcommainopen?types=1', 'no'],
                scrollbar: false,
                end: function () {
                    //  refresh();
                }
            })
        })
    })

    /**
     * 初始化获取后台数据
     */
    function refresh() {
        /*获取各项条件 */
        var indexi;
        $.ajax({
            type: "get",
            url: "/pqs9900/flow/getFlowMealList",
            dataType: "json",
            data: {},
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 200) {
                    //初始化表格
                    var base = []
                    var extend = []
                    data.body.map(function (item) {
                        if (item.type == 0) {
                            base.push(item)
                        } else {
                            extend.push(item)
                        }
                    })
                    initTransactionTable1(base);
                    initTransactionTable2(extend);
                } else {
                    layer.msg(data.message, {icon: 2, time: 2000})
                    initTransactionTable1(null);
                    initTransactionTable2(null);
                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }

    function initTransactionTable1(tableData) {
        var tableHeight = height - 75;
        var length = Math.floor(tableHeight / 32);
        if (length < 1) {
            length = 1;
        }
        var tableCellHeight = 32 * length;
        dataTable1 = $("#deviceTable1").DataTable();
        dataTable1.clear().draw();
        dataTable1 = $('#deviceTable1').DataTable({
            columnDefs: [
                {
                    orderable: false,
                    targets: [5]
                }
            ],
            columns: [
                {width: "14%", data: "fmName"},
                {width: "14%", data: "fmNumber"},
                {width: "14%", data: "updateUser"},
                {
                    width: "14%", data: "updateTime", render: function (data) {
                        if (data == null) {
                            return '';
                        } else {
                            var date = new Date(data);
                            var y = date.getFullYear();// 年
                            var MM = date.getMonth() + 1;// 月
                            MM = MM < 10 ? ('0' + MM) : MM;
                            var c = date.getDate();// 日
                            c = c < 10 ? ('0' + c) : c;
                            var h = date.getHours();// 时
                            h = h < 10 ? ('0' + h) : h;
                            var m = date.getMinutes();// 分
                            m = m < 10 ? ('0' + m) : m;
                            var s = date.getSeconds();// 秒
                            s = s < 10 ? ('0' + s) : s;
                            return y + '-' + MM + '-' + c + ' ' + h + ':' + m + ':' + s;
                        }
                    }
                },
                {
                    width: "14%", render: function (data, type, full) {
                        if (full.secondType == 0) {
                            return '默认套餐'
                        } else {
                            return '其他'
                        }
                    }
                },
                {
                    data: "fmIndex", render: function (data, type, full, meta) {
                        return "<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='dealEvent(\"" + data + "\",2)' >修改</button>" +
                            "<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='dealEvent(\"" + data + "\",1)' >删除</button>"

                    }
                }
            ],
            destroy: true,
            data: tableData,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: tableCellHeight,
            // scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9900/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                $("#deviceTable1_info").addClass("fl");
                $("#deviceTable1_paginate").addClass("fr");
                $("#deviceTable1_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#deviceTable").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
    }

    function initTransactionTable2(tableData) {
        let tableHeight = height - 75;
        let length = Math.floor(tableHeight / 32);
        if (length < 1) {
            length = 1;
        }
        let tableCellHeight = 32 * length;
        dataTable2 = $("#deviceTable2").DataTable();
        dataTable2.clear().draw();
        dataTable2 = $('#deviceTable2').DataTable({
            columnDefs: [
                {
                    orderable: false,
                    targets: [5]
                }
            ],
            columns: [
                {width: "14%", data: "fmName"},
                {width: "14%", data: "fmNumber"},
                {width: "14%", data: "updateUser"},
                {
                    width: "14%", data: "updateTime", render: function (data) {
                        if (data == null) {
                            return '';
                        } else {
                            var date = new Date(data);
                            var y = date.getFullYear();// 年
                            var MM = date.getMonth() + 1;// 月
                            MM = MM < 10 ? ('0' + MM) : MM;
                            var c = date.getDate();// 日
                            c = c < 10 ? ('0' + c) : c;
                            var h = date.getHours();// 时
                            h = h < 10 ? ('0' + h) : h;
                            var m = date.getMinutes();// 分
                            m = m < 10 ? ('0' + m) : m;
                            var s = date.getSeconds();// 秒
                            s = s < 10 ? ('0' + s) : s;
                            return y + '-' + MM + '-' + c + ' ' + h + ':' + m + ':' + s;
                        }
                    }
                },
                {
                    width: "14%", data: "secondType", render: function (data, type, full) {
                        if (full.secondType == 0) {
                            return '当月生效'
                        } else {
                            return '连续生效'
                        }
                    }
                },
                {
                    data: "fmIndex", render: function (data, type, full, meta) {
                        return "<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='dealEvent(\"" + data + "\",2)' >修改</button>" +
                            "<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='dealEvent(\"" + data + "\",1)' >删除</button>"

                    }
                }
            ],
            destroy: true,
            data: tableData,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: tableCellHeight,
            // scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9900/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                $("#deviceTable2_info").addClass("fl");
                $("#deviceTable2_paginate").addClass("fr");
                $("#deviceTable2_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#deviceTable").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
    }

    //搜索表中的数据
    function searchResult(value) {
        if ($('#home').hasClass('active')) {
            dataTable1.search(value).draw();
        } else {
            dataTable2.search(value).draw();
        }

    }

    window.refreshs = function () {
        refresh()
    }

    //操作事件
    function dealEvent(data, type) {
        passwordLocalIndentity(username,resetName,function () {
        if (type == 2) {
            //修改
                layer.open({
                    type: 2,
                    title: '修改流量套餐',
                    maxmin: false,
                    area: ['280px', '300px'],
                    content: ['flowcommainopen?types=2&fmIndex=' + data, 'no'],
                    scrollbar: false,
                    end: function () {
                        //  refresh();
                    }
                })
        } else {
            //删除
            layer.confirm('确认删除?',function () {
                $.ajax({
                    type: "post",
                    url: "/pqs9900/flow/delFlowMeal",
                    data:{fmIndex:data},
                    beforeSend: function () {
                        indexi = ityzl_SHOW_LOAD_LAYER();
                    },
                    success: function (data) {
                        if (data.code === 200) {
                            layer.msg(data.message,{icon:1},function () {
                                refresh()
                            })
                        } else {
                            layer.msg(data.message,{icon:2})
                        }
                        ityzl_CLOSE_LOAD_LAYER(indexi);
                    }
                })

            })

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

