<%@ 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;
        }

        #deviceTable {
            min-width: 100%;
        }

        .btn {
            padding: 2px 10px;
            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="padding: 10px 2px;text-align: right">
    <div class="col-md-12">
        <label class="radio-inline">
            终端状态:
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadiosinline" id="yes" value="0" checked>投运
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadiosinline" id="stop" value="2">退运
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadiosinline" id="wait" value="1">检修
        </label>
    </div>
</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>
                </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">保存</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}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.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>
    var arr = []
$(function () {
    arr = parent.window.paramSend()
    //初始化设备
    refresh()

    //确认按钮
    $('#save').click(function () {
        let username = $('#username').val()
        let resetName = ''
       // passwordIndentity(username, resetName, function () {
        layer.open({
            title:'终端状态操作原因',
            btnAlign: 'c',
            content: '<div><textarea style="width: 100%;height: 100px" id="desc" placeholder="请输入操作原因"></textarea></div>',
            btn: ['确认提交'],
            yes: function(index, layero){
                if($("#desc").val() == null || $("#desc").val() == ''|| $("#desc").val().trim() == ''){
                    layer.msg("请输入操作原因",{type:1})
                    return false;
                }

                let map = {
                    list: arr,
                    devFlag: $("[name='optionsRadiosinline']:checked").val(),
                    describe:$("#desc").val()
                }
                $.ajax({
                    type: 'post',
                    dataType: "json",
                    url: '/pqs9900/terminalmanger/updateDevFlag',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(map),
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg(data.message, {icon: 1,time:2000}, function () {
                                //获取选中的值
                                refresh()
                            })
                        }else {
                            layer.msg(data.message,{icon:2})
                        }
                    },
                    error: function () {
                        layer.msg('未知错误', {icon: 2})
                    }
                });

            }
        });

            })

    //})
})
/**
 * 初始化获取后台数据
 */
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: "devFlag",render:function (data) {
                  return  getWarnInfo(data)
                }},
        ],
        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 getWarnInfo(data) {
       var da = Number(data);
        console.log(da)
        if (da == 0) {
            info = '<font style="color:#20B2AA">投运</font>'
        }else if(da == 1){
            info = '<font style="color:#F4A460">检修</font>'
        }else {
            info = '<font style="color:#A52a2a">退运</font>'
        }
        return info;
    }
</script>
</body>
</html>
