<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>控制策略</title>
    <!-- 引入 layui.css -->
    <link href="../static/layui-v2.8.11/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="../static/layui-v2.8.11/layui.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .body {
            padding: 23.8px;
        }

        .left-title {
            font-size: 22px;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .z-body {
        }

        .z-body .layui-form-label {
            font-size: 14px;
        }

        .z-body .layui-input-inline .layui-btn {
            padding: 0;
            width: 56px;
        }

        .z-search {

        }

        .z-search .layui-form-item {
            margin: 10px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        table th {
            background-color: #fafafa;
            color: #2c2a29;
        }

        .layui-form-onswitch {
            border-color: #1890ff;
            background-color: #1890ff;
        }

        .layui-table-body .layui-table-cell {
            height: 56px;
            line-height: 41px;
        }

        .layui-laypage {
            margin-bottom: 15px !important;
        }

        .layui-table-column {
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="left-title layui-row">
        <div class="layui-col-md6 layui-col-xs6 layui-col-sm6 layui-col-lg6 layui-col-xl6">
            <p>控制策略</p>
        </div>
        <div class="layui-col-md6 layui-col-xs6 layui-col-sm6 layui-col-lg6 layui-col-xl6">
            <button type="button" class="layui-btn" onclick="toAdd()" style="font-size: 16px;float: right;background-color: #41a69a">+新增</button>
        </div>
    </div>
    <div class="z-body">
        <div class="layui-card layui-panel">
            <div class="layui-card-body z-search">
                <form class="layui-form" action="form.html">
                    <div class="layui-form-item">
                        <label class="layui-form-label">策略名称：</label>
                        <div class="layui-input-inline" style="width: 240px">
                            <input type="text" id="name" name="name" lay-verify="required" placeholder="请填写关键字···"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">执行状态：</label>
                        <div class="layui-input-inline" style="width: 240px">
                            <select name="interest" id="status" lay-filter="aihao">
                                <option value="" selected>请选择···</option>
                                <option value="1">启动</option>
                                <option value="0">停用</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" onclick="loadTable()" class="layui-btn layui-btn-normal" style="width: 58px">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary" onclick="resetLoad()">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 内容主体区域 -->
        <div class="layui-card layui-panel">
            <div class="layui-card-body">
                <table class="layui-hide" id="ID-table-demo-data"></table>
                <div id="demo-laypage-all"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="templet-status-switch">
    <!-- 这里的 checked 的状态值判断仅作为演示 -->
    <input type="checkbox" name="status" id="{{=d.celueid}}" value="{{=d.status}}" title="启用|停用" lay-skin="switch"
           lay-filter="demo-templet-status" {{=d.status=='1'?"checked":"" }}>
</script>

<script type="text/html" id="templet-theads-tool">
    <div class="layui-clear-space" style="padding-left: 20px">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-on="detail" id="{{=d.celueid}}"
           style="width: 46px;height: 26px;padding: 1px;background-color: #3cb754;color: white">
            查看
        </a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-on="delete-confirm" id="{{=d.celueid}}"
           style="width: 46px;height: 26px;padding: 1px;border: #f52f64 solid 1px;color: #f52f64">
            删除
        </a>
    </div>
</script>
<script>
var total=0;
var laypage;
var name='';
var status='';
loadTable();
var form;
function loadTable(){
    layui.use('table', function () {
        var table = layui.table;
        var $=layui.$;
        var util = layui.util;
        form = layui.form;
        name=$("#name").val();
        status = $("#status").val();
        laypage = layui.laypage;
        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data'
            , cols: [ [ //标题栏
                {field: 'number', title: '序号', width: 80, sort: false, align: 'center', type: 'numbers'}
                , {field: 'name', title: '策略名称', width: 360}
                , {field: 'xunhuanzhouqi', title: '循环周期', minwidth: 360}
                , {field: 'status', title: '执行状态', width: 160, templet: '#templet-status-switch'}
                , {field: 'description', title: '备注', minwidth: 344}
                , {field: 'experience', title: '操作', width: 220, templet: '#templet-theads-tool', sort: false}
            ]
            ]
            ,url:'/celue/list?name='+name+"&status="+status
            ,method:'get'
            ,async: true
            ,headers: {//携带token
            },/*data: []*/
            parseData: function(res){ //res 即为原始返回的数据
                console.log(res)
                total=res.result.total;
                return {
                    "code": res.code==200?0:res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.result.total, //解析数据长度
                    "data": res.result.records //解析数据列表
                };
            },
            done: function (res, curr, count) {
                if (res.success) {
                    //成功
                    loadpage();
                }else{
                    //异常
                }
            },
            limits: [5,10, 15, 20],
            limit: 10,
            page: true,
            //,skin: 'line' // 表格风格
            //,even: true
            //,page: true // 是否显示分页
            //,limits: [5, 10, 15]
            //,limit: 5 // 每页默认显示的数量
        });

        // 事件
        var util = layui.util;
        // 事件
        util.on('lay-on', {
            "delete-confirm": function(){
                var id = this.id;
                console.log(id)
                layer.confirm('确定删除吗？', {icon: 3}, function(){
                    $.ajax({
                        type: "DELETE",
                        url: "/celue/delete?id="+id,
                        /*data: obj,
                        contentType: 'application/json;charset=utf-8',*/
                        success: function(res){
                            console.log(res)
                            if(res.success){
                                layer.msg('删除成功', {icon: 1});
                                loadTable();
                            }else{
                                layer.msg('删除失败,'+res.message, {icon: 1});

                            }
                        },error:function (res){
                            layer.msg('删除失败,'+res.message, {icon: 1});
                        }
                    });
                }, function(){
                    //layer.msg('点击取消的回调');
                });
            },
            "detail":function (){
                window.location='/celue/'+this.id;
            }
        })
        form.on('switch(demo-templet-status)', function(obj){
            var id = this.id;
            var obj = JSON.stringify({'celueid':id});
            $.ajax({
                type: "PUT",
                url: "/celue/status",
                data: obj,
                contentType: 'application/json;charset=utf-8',
                success: function(res){
                    console.log(res)
                },error:function (res){
                    layer.msg('更改失败,'+res.message, {icon: 1});
                }
            });
            console.log(id)
            /*layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);*/
        });
    });
}
function resetLoad(){
    $("#name").val('')
    $("#status").val('')
    loadTable()
}
function toAdd(){
    window.location.href="/celue/add";
}

</script>


</body>
</html>