<%@ 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>PQS9300技术监督管理系统</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/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        body {
            overflow: hidden;
        }
        .form-control{
            height: 22px;
            padding: 1px 5px;
        }

        #transactionList {
            min-width: 100%;
        }
        .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;
        }

        .pagination > li > a, .pagination > li > span {
            padding: 6px 12px;
        }
    </style>
</head>
<body class="container-fluid">
<div class="row">
    <%--页面头--%>
    <div class="col-md-12 mt10">
        <div class="form-inline">
            <div class="form-group" style="margin-top: 2px">
                <label>策略等级：</label>
                <select class="form-control" id="grade" style="width: 100px">
                    <option value="">全部</option>
                    <option value="0">一级</option>
                    <option value="1">二级</option>
                    <option value="2">三级</option>
                </select>
            </div>
            <button style="margin-left: 15px" type="button" class="btn btn-primary " id="query">
                <i class="glyphicon glyphicon-search"></i>查询
            </button>

            <div class="form-group fr mr10" id="fliteData">
                <button style="margin-right: 30px" type="button" class="btn btn-primary " id="addEarly">
                    <i class="glyphicon glyphicon-plus"></i>新增
                </button>
                <label>筛选数据：</label>
                <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
            </div>
        </div>
    </div>
    <%--页面表格--%>
    <div class="col-md-12 mt10">
        <table id="transactionList" 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>


<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}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script>
    var grade = ''
    $(function () {
        refresh();


    });
    //点击查询按钮
    $("#query").on("click",function () {
        grade = $('#grade').val()
        refresh();
    });
    //点击查询按钮
    $("#addEarly").on("click",function () {
        layer.open({
            type: 2,
            title: '新增预警策略',
            maxmin : false,
            area : ['250px', '290px'],
            content: ['earlyup?type=1', 'no'],
            scrollbar: false
        })
    });
    /**
     * 初始化获取后台数据
     */
    function refresh() {
        /*获取各项条件 */
        var grade=$("#grade").val();
        var indexi ;
        $.ajax({
            type:"post",
            url:"/pqs9300/strategy/getEarlyWarnList",
            dataType:"json",
            data:{
                grade:grade
            },
            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() - 135;
        var length = Math.floor(height / 32);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#transactionList").DataTable();
        dataTable.clear().draw();
        dataTable = $('#transactionList').DataTable({
            order: [[1,'desc']],
            columns: [
                {width: "14%",data:"wfName"},
                {width: "14%",data:"grade",render:function (data, type, full, meta) {
                        if(data==0){
                            return '一级'
                        }else if(data==1){
                            return '二级'
                        }else {
                            return '三级'
                        }
                    }},
                {width: "14%",data:"userName"},
                {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: "8%",data:null,render:function (data) {
                    if(data.state==0){
                        return '<input value="'+data.wfIndex+'" type="checkbox" class="checkbox"/>'
                    }else {
                        return '<input value="'+data.wfIndex+'" type="checkbox" checked class="checkbox"/>'
                    }

                    }},
                {width: "18%",data:"wfIndex", render:function (data, type, full, meta) {
                        var button="",


                            button="<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='excuteNextStep(\""+data+"\",\"" + 1 + "\")' >绑定</button>" +
                                "<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='excuteNextStep(\""+data+"\",\"" + 2 + "\")' >编辑</button>";

                        return button+"<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='excuteNextStep(\""+data+"\",\"" + 3 + "\")' >删除</button>";
                    }
                }
            ],
            destroy: true,
            data: tableData,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            // scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9300/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                //初始化按钮开关
                $(".checkbox").bootstrapSwitch({
                    onText: "启用",      // 设置ON文本
                    offText: "关闭",    // 设置OFF文本
                    onColor: "primary",// 设置ON文本颜色     (info/success/warning/danger/primary)
                    offColor: "primary",  // 设置OFF文本颜色        (info/success/warning/danger/primary)
                    size: "mini",    // 设置控件大小,从小到大  (mini/small/normal/large)
                    handleWidth: "30",//设置控件宽度
                    // 当开关状态改变时触发
                    onSwitchChange: function (event, state) {
                        let tid = $(this).val()
                        $.ajax({
                            type: 'POST',
                            dataType: "json",
                            url: '/pqs9300/strategy/statusController',
                            data: {wfIndex: tid, state: state?1:0},
                            success: function (data) {
                                if (data.code == 200) {
                                    refresh()
                                    layer.msg(data.message, {icon: 1,time:2000})
                                }else {
                                    refresh()
                                    layer.msg(data.message, {icon: 2,time:2000})
                                }
                            },
                            error: function () {
                                layer.msg('未知错误', {icon: 2})
                            }
                        });
                    }
                });
                $("#transactionList_info").addClass("fl");
                $("#transactionList_paginate").addClass("fr");
                $("#transactionList_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 = $("#transactionList").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) {
        dataTable.search(value).draw();
    }


    function excuteNextStep(wfIndex,type) {
        if(type == 1){
            //绑定
            layer.open({
                type: 2,
                title: '预警策略绑定',
                maxmin : false,
                area: ['350px', '445px'],
                content: 'earlybind?wfIndex=' + wfIndex,
                scrollbar: false
            })
        }else if(type == 2){
            //编辑
            layer.open({
                type: 2,
                title: '修改预警策略',
                maxmin : false,
                area : ['250px', '290px'],
                content: ['earlyup?type=2&wfIndex=' + wfIndex, 'no'],
                scrollbar: false
            })

        }else {
            $.ajax({
                type: 'GET',
                dataType: "json",
                url: '/pqs9300/strategy/isExitBindEvent',
                contentType: 'application/json;charset=UTF-8',
                data: {wfIndex: wfIndex},
                success: function (data) {
                    let mess = ''
                    if (data.code == 200) {
                        mess = '存在绑定事件,确认删除吗?'
                    } else {
                        mess = '确认删除吗?'
                    }
                    //删除
                    layer.confirm(mess, function (index) {
                        $.ajax({
                            type: 'GET',
                            dataType: "json",
                            url: '/pqs9300/strategy/delEarlyWarn',
                            contentType: 'application/json;charset=UTF-8',
                            data: {wfIndex: wfIndex},
                            success: function (data) {
                                if (data.code == 200) {
                                    refresh()
                                    layer.msg(data.message, {icon: 1})
                                } else {
                                    layer.msg(data.message, {icon: 2})
                                }
                            },
                            error: function () {
                                layer.msg('未知错误', {icon: 2})
                            }
                        });
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                },
                error: function () {
                    layer.msg('未知错误', {icon: 2})
                }
            });

        }

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