@using WX.CRM.WebHelper
@using WX.CRM.Model.DTO;
@{
    /**/

    /**/

    ViewBag.Title = "达量通知";
    Layout = "~/Views/Shared/_content.cshtml";
}
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>
<style>
    #StatusDialog {
        padding: 15px;
        text-align: center;
        height: 150px;
    }
        #StatusDialog .title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
</style>
<div class="layui-card" id="topcard" style="width:100%;">
    <div class="layui-card-body " id="contentBody">
        <form class="layui-form selftopwhere" id="myform">
            <div class="layui-form-item">
                <input type="hidden" name="sgin" value="@ViewBag.Sgin" />
                达量日期：
                <div class="layui-inline">
                    <input class="layui-input" name="AttainTimeFrom" id="AttainTimeFrom" style="width:120px;">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" name="AttainTimeTo" id="AttainTimeTo" style="width:120px;">
                </div>
                工号：
                <div class="layui-inline">
                    <input class="layui-input" name="Eid" id="Eid" style="width:120px;" />
                </div>
                姓名：
                <div class="layui-inline">
                    <input class="layui-input" name="Name" style="width:120px;" />
                </div>
                状态：
                <div class="layui-inline">
                    <select name="Status" style="height:35px;">
                        <option value="">全部</option>
                        <option value="1">未处理</option>
                        <option value="2">已处理</option>
                        <option value="4">暂不处理</option>
                    </select>
                </div>
                <div class="layui-inline" style="width:350px">
                    <input class="layui-btn layui-btn-sm layui-btn-ok" data-method="search" id="search" type="button" value="查询" />
                    <input class="layui-btn layui-btn-sm layui-btn-reset" type="reset" value="清空" />
                </div>
            </div>
        </form>
        <table class="layui-hide" id="list" lay-filter="list"></table>
    </div>
    <div id="StatusDialog" class="layui-form" style="display:none;">
        <select id="Status" style="height:35px;">
            <option value="1">未处理</option>
            <option value="2">已处理</option>
            <option value="4">暂不处理</option>
        </select>
    </div>
</div>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#AttainTimeFrom', //指定元素
            value: '@ViewBag.CreateTime'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#AttainTimeTo', //指定元素
            value: '@ViewBag.CreateTime'
        });
    });
    var selectRows = [];
    var winindex;
    var layer;
    var rowid;
    var data;
    var table;
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['laypage', 'layer', 'table', 'laydate', 'form'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        layer = layui.layer;
        table = layui.table;
        document.getElementById('Eid').value = '@ViewBag.Eid';
        var param = $("#myform").serializeFormJSON();
        param.AttainTimeFrom = '@ViewBag.CreateTime';
        param.AttainTimeTo = '@ViewBag.CreateTime';
        table.render({
            id: 'list'//列表别名ID
            , elem: '#list'
            , url: '/MessageCenter/EarlyWarningPage'
            //, url: '@Html.Raw(ViewBag.webapi)' + '/Api/EarlyWarning/log/page'
            , method: 'get'
            , dataType: 'json'
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'message' //规定状态信息的字段名称，默认：msg
            },
            parseData: function (res) { //res 即为原始返回的数据
                if (res.code != 0) {
                    layer.msg(res.message, { icon: 2 });
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": 0, //解析数据长度
                        "data": [] //解析数据列表
                    };
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 10
            , size: "sm"
            , cols: [[
                { checkbox: true }
                , { field: 'eid', title: '工号', width: 150 }
                , { field: 'name', title: '姓名', width: 150 }
                , { field: 'period', title: '接粉周期' }
                , { field: 'createTime', title: '达量通知时间', width: 150 }
                , { field: 'maxCount', title: '预警值', width: 150 }
                , { field: 'distinct', title: '去重加微数', width: 150 }
                , { field: 'maxResource', title: '最大资源量', width: 150 }
                , { field: 'status', title: '状态', width: 150, templet: '#statusTpl' }
                , { field: 'operation', title: '操作', width: 150, templet: '#operationTpl' }
            ]], where: param
        });
        //监听行单击事件
        table.on('checkbox(list)', function (obj) {
            if (obj.type == 'all') {
                if (obj.checked) {
                    selectRows = data
                } else {
                    selectRows = []
                }
            } else {
                if (obj.checked) {
                    selectRows.push(obj.data)
                } else {
                    selectRows.splice(selectRows.indexOf(obj.data), 1)
                }
            }
        });
        var active = {
            search: function () {
                var param = $("#myform").serializeFormJSON();
                table.reload('list', {
                    where: param,
                    page: {
                        curr: 1
                    }
                });
            }
        };
        $('#search').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });

    function Closed() {
        layer.close(winindex);
    }
    function TableReload() {
        table.reload('list', {

        });
    }
    function OpenStatus(id) {
        winindex = layer.open({
            title: '变更状态',
            type: 1,
            content: $('#StatusDialog'),
            area: ['300px', '280px']
            , btn: ['确定']
            , yes: function (index, layero) {
                var status = document.getElementById("Status").value;
                console.log(status);
                var data = {
                    id: id,
                    status: Number.parseInt(status)
                };
                $.ajax({
                    type: "POST",
                    url: '@Html.Raw(ViewBag.webapi)' + '/Api/EarlyWarning/log/status',
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (da) {
                        if (da.code == 0) {
                            layer.msg('操作成功！', { icon: 1 });
                            TableReload();
                        } else {
                            layer.msg(da.message, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('操作失败！', { icon: 2 });
                    }
                });
                layer.close(winindex);
            }
        });
    }
</script>
<script type="text/html" id="statusTpl">
    {{# if(d.status == "未处理"){ }}
    <span style="color: rgb(113 182 30) ">{{ d.status }}</span>
    {{# } else if(d.status == "已处理"){ }}
    <span style="color: rgb(215 0 35)">{{ d.status }}</span>
    {{# } else { }}
    <span style="color: rgb(27 168 238)">{{ d.status }}</span>
    {{# } }}
</script>

<script type="text/html" id="operationTpl">
    <a href="javascript:;" onclick="OpenStatus({{ d.id }})" >变更状态</a>
</script>