@{
    ViewBag.Title = "GolbalInte";
    Layout = "~/Views/Shared/_MainLayoutPage.cshtml";
}
<div id="toolbar">
    <a href="#" id="btn-add" class="easyui-linkbutton" onclick="add_interface" data-options="iconCls:'fa fa-plus color_blue',plain:true">新建</a>
    <a href="#" id="btn-edit" class="easyui-linkbutton" data-options="iconCls:'fa fa-edit color_blue',plain:true">修改</a>
    <a href="#" id="btn-del" class="easyui-linkbutton" data-options="iconCls:'fa fa-remove color_blue',plain:true">删除</a>
    <a href="#" id="btn-ref" class="easyui-linkbutton" data-options="iconCls:'fa fa-refresh color_blue',plain:true">变更</a>
    <a href="#" id="btn-excel" class="easyui-linkbutton" data-options="iconCls:'fa fa-cogs color_blue',plain:true">导出Excel</a>
    <input id="mc" class="easyui-searchbox" style="width:200px;margin-left:20px"
           data-options="searcher:search,prompt:'请输入关键字'" />
    <button type="button" id="btn-more" class="layui-btn layui-btn-normal layui-btn-sm">更多条件</button>
    <button type="button" id="btn-refresh" class="layui-btn layui-btn-normal layui-btn-sm" style="background-color:#5FB878">刷新</button>
    @*<button type="button" id="btn-reset" class="layui-btn layui-btn-normal layui-btn-sm" style="background-color:#009688">重置</button>*@
</div>
<hr>

<div id="cc" class="easyui-layout" fit="true" border="false">
    @*时间轴*@
    <div data-options="region:'east',split:true" title="过程" style="width:400px;">
        <ul class="layui-timeline" id="timeline">
        </ul>
    </div>
    @*Table表格*@
    <div data-options="region:'center'">
        <table class="easyui-datagrid" id="globalinte" data-options="fitColumns:true,singleSelect:true"></table>
    </div>
</div>

@*更多条件*@
<form id="inteform" method="post" class="layui-form" style="margin-top:20px">
    <input type="hidden" id="TYPE" value="1" />
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block" lay-filter="LX">
                <input type="checkbox" name="LX" value="1" title="医保接口" lay-skin="primary">
                <input type="checkbox" name="LX" value="2" title="农合接口" lay-skin="primary">
                <input type="checkbox" name="LX" value="3" title="LIS接口" lay-skin="primary">
                <input type="checkbox" name="LX" value="4" title="三方接口接口" lay-skin="primary">
                <input type="checkbox" name="LX" value="5" title="其它接口接口" lay-skin="primary">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">渠道</label>
            <div class="layui-input-inline">
                <input id="QDID" name="QDID" panelheight="200px" class="easyui-combobox xmid" data-options="labelAlign:'right',prompt:'请选择渠道',limitToList:true,tipPosition:'top'" style="height:38px;border-radius:4px;width:200px" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">项目</label>
            <div class="layui-input-inline">
                <input id="XMID" name="XMID" panelheight="200px" class="easyui-combobox xmid" data-options="labelAlign:'right',prompt:'请选择项目',limitToList:true,tipPosition:'top'" style="height:38px;border-radius:4px;width:200px" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-inline">
                <input type="text" id="CJR" name="CJR" class="easyui-combobox" autocomplete="off" style="height:38px;border-radius:4px;width:200px" />
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-inline">
                <input type="text" id="JKDFMC" name="JKDFMC" class="easyui-combobox" autocomplete="off" style="height:38px;border-radius:4px;width:200px" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">维护人</label>
            <div class="layui-input-inline">
                <input type="text" id="ZRR" name="ZRR" class="easyui-combobox" autocomplete="off" style="height:38px;border-radius:4px;width:200px" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block" id="condition_zt">
        </div>
    </div>
</form>

<script src="~/ViewModels/ProjectManager.js?r=12.221"></script>
<script type="text/javascript">
    var id = "";
    var index = 0;
    $(function () {
            //document.getElementsByClassName("easyui-linkbutton").hide("disabled",  ? false :"disabled")
        "@ViewBag.userInfo" != "1"?$(".easyui-linkbutton").hide():$(".easyui-linkbutton").show()

        init()
        layui.use(['form'], function () {
            var form = layui.form
            //类型
            $.post('/Problem/GetBaseCode?type=' + '9FECB49A-397D-4C1B-9BE9-B8A4B73B9CD7', function (data) {
                var html = ""
                var eventlist = new viewModel();
                //1-新增  2-修改
                for (var i = 0; i < data.length; i++) {
                    html += "<input type='checkbox' name='ZT' class='ZT' value='" + data[i].代码 + "' title='" + data[i].显示名 + "' lay-skin='primary'>"
                }
                document.getElementById("condition_zt").innerHTML = html
                form.render()
            })
        })
    })


    function init(type) {
        var params = ZLPMS.FormToObject('inteform');
        params.MC = document.getElementById("mc").value
        params.TYPE = type
        $('#globalinte').datagrid({
            url: '/ProManager/BingInterface',
            method: 'post',
            singleSelect: true,
            rownumbers: true,
            fit: true,
            queryParams: params,
            onLoadSuccess: function (dd) {
                if (dd.rows.length > 0) {
                    $.post("/ProManager/GetInteProcess", { id: dd.rows[0].ID }, function (data) {
                        var html = ""
                        for (var i = 0; i < data.length; i++) {
                            html += "<li class='layui-timeline-item timelineDetail'><i class='layui-icon layui-timeline-axis'>&#xe617;</i><div class='layui-timeline-content layui-text'><h3 class='layui-timeline-title'> <span style='margin-right:15px'>" + data[i].操作人 + "</span><span  style='margin-right:15px;color:#00b8ff'>" + data[i].状态 + "</span><span style='margin-right:15px;color:#a2a2a2'>" + data[i].操作时间 + "</span></h3><p style='font-size:15px;width:350px;word-break: break-word;color:#a2a2a2'><br>" + data[i].备注 + "</p></div></li>"
                        }
                        $("#timeline").html(html)
                    })
                    id = dd.rows[0].ID
                }
                $(".datagrid-body").height($(".datagrid-body").height() - 20)

                //导出excel
                if (type == 2) {
                    var jsonData = dd.rows;
                    //获取标题
                    var name = '<tr>';
                    for (let Title in jsonData[0]) {
                        //增加\t为了不让表格显示科学计数法或者其他格式
                        name += `<td>${Title}</td>`;
                    }
                    name += '</tr>';
                    let str = '';
                    //循环遍历，每行加入tr标签，每个单元格加td标签
                    for (let i = 0; i < jsonData.length; i++) {
                        str += '<tr>';
                        for (let item in jsonData[i]) {
                            //增加\t为了不让表格显示科学计数法或者其他格式
                            str += `<td>${jsonData[i][item] + '\t'}</td>`;
                        }
                        str += '</tr>';
                    }
                    str = name + str;
                    let worksheet = '接口信息'
                    let uri = 'data:application/vnd.ms-excel;base64,';
                    //下载的表格模板数据
                    let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"       xmlns:x="urn:schemas-microsoft-com:office:excel"       xmlns="http://www.w3.org/TR/REC-html40">      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>        <x:Name>${worksheet}</x:Name>        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->        </head><body><table>${str}</table></body></html>`;
                    //下载模板
                    window.location.href = uri + base64(template)
                }
            },
            columns: [[
                { field: '名称', title: '接口名称', align: 'left' },
                {
                    field: '类型', title: '类型', align: 'center', formatter: function (row) {
                        switch (row) {
                            case 1: return "医保接口"; break;
                            case 2: return "农合接口"; break;
                            case 3: return "LIS接口"; break;
                            case 4: return "三方接口"; break;
                            default: return "其它接口"; break;
                        }
                    }
                },
                { field: '项目名称', title: '项目名称' },
                {
                    field: '状态', title: '状态', align: 'center'
                },
                {
                    field: '申请时间', title: '申请时间', align: 'center'
                },
                { field: '完成时间', title: '完成时间', align: 'center' },
                { field: '验收时间', title: '验收时间', align: 'center' },
                { field: '创建人', title: '创建人', align: 'center' },
                { field: '责任人', title: '维护人', align: 'center' },
                { field: '接口对方名称', title: '项目对接人', align: 'center' },
            ]],
            onSelect: function (index, row) {
                $.post("/ProManager/GetInteProcess", { id: row.ID }, function (data) {
                    var html = ""
                    for (var i = 0; i < data.length; i++) {
                        html += "<li class='layui-timeline-item timelineDetail'><i class='layui-icon layui-timeline-axis'>&#xe617;</i><div class='layui-timeline-content layui-text'><h3 class='layui-timeline-title'> <span style='margin-right:15px'>" + data[i].操作人 + "</span><span  style='margin-right:15px;color:#00b8ff'>" + data[i].状态 + "</span><span style='margin-right:15px;color:#a2a2a2'>" + data[i].操作时间 + "</span></h3><p style='font-size:15px;width:350px;word-break: break-word;color:#a2a2a2'><br>" + data[i].备注 + "</p></div></li>"
                    }
                    $("#timeline").html(html)
                })
                id = row.ID
            },
            onDblClickRow: function (rowIndex, rowData) {
                top.ZLPMS.OpenWindow({
                    title: '编辑接口信息',
                    url: '/ProManager/GlobalInteWindow?&type=2&id=' + id + "&state=" + $("#globalinte").datagrid("getSelected").STATE,
                    area: ['750px', '700px'],
                    btn: ['关闭'],
                    yes: function (index, layero) {
                        top.ZLPMS.CloseWindow(index);
                    }
                });
            }
        });
    }

    //excel转base64
    function base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }

    function search(a, b) {
        init(1)
    }
    //刷新
    $("#btn-refresh").bind("click", function () {
        init()
    })

    //新增接口信息
    $("#btn-add").bind("click", function () {
        top.ZLPMS.OpenWindow({
            title: '新建接口信息',
            url: '/ProManager/GlobalInteWindow?&type=1',
            area: ['750px', '700px'],
            yes: function (index, layero) {
                //表单提交
                var iframeWin = top.window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.Forms.Interface_PostData(index, 1, 1, $("#globalinte"));//调用子页面的方法，得到子页面返回的ids
            }
        });
    })

    //编辑接口信息
    $("#btn-edit").bind("click", function () {
        var row = $("#globalinte").datagrid("getSelected")
        if (!row) {
            top.ZLPMS.Msg("请选择一条记录");
        } else {
            top.ZLPMS.OpenWindow({
                title: '编辑接口信息',
                url: '/ProManager/GlobalInteWindow?&type=2&id=' + id + "&state=" + $("#globalinte").datagrid("getSelected").STATE,
                area: ['750px', '700px'],
                yes: function (index, layero) {
                    //表单提交
                    var iframeWin = top.window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                    iframeWin.Forms.Interface_PostData(index, 2, 1, $("#globalinte"));//调用子页面的方法，得到子页面返回的ids
                }
            });
        }

    })

    // 删除接口信息
    $("#btn-del").bind("click", function () {
        var id = $("#globalinte").datagrid("getSelected");
        if (id == null) {
            top.ZLPMS.Msg("请选择一条记录");
            return
        }
        top.ZLPMS.Confirm('您确定要删除选中的记录吗', 5, function () {
            //执行删除
            $.post("/ProManager/Del_Interface?id=" + id["ID"], function (data) {
                if (data) {
                    $('#globalinte').datagrid('reload');
                    top.ZLPMS.Msg("删除成功");
                }
                else {
                    top.ZLPMS.Msg("删除失败");
                }
            })
        });

    })

    // 变更接口状态
    $("#btn-ref").bind("click", function () {
        var obj = $("#globalinte").datagrid("getSelected");
        if (obj == null) {
            top.ZLPMS.Msg("请选择一条记录");
            return
        }
        top.ZLPMS.OpenWindow({
            title: '变更状态',
            url: '/ProManager/DealWindow?&id=' + obj["ID"],
            area: ['800px', '600px'],
            yes: function (index, layero) {
                //表单提交
                var iframeWin = top.window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.Forms.DealInte_PostData(index, $("#globalinte"));//调用子页面的方法，得到子页面返回的ids
            }
        });

    })

    //更多条件
    $("#btn-more").bind("click", function () {
        var that = this;
        //多窗口模式，层叠置顶
        index = layer.open({
            type: 1
            , id: "one"
            , title: '条件'
            , area: ['800px', '360px']
            , shade: 0
            , anim: 1
            , shadeClose: true
            , maxmin: true
            , shade: 0.3
            , offset: '50px'
            , content: $("#inteform")
            , btn: ['确认', '关闭']
            , yes: function () {
                init(1)
                layer.close(index);
            }
            , btn2: function () {
                layer.close(index);
            }

            , zIndex: 1 //重点1
        });
    })

    //导出excel
    $("#btn-excel").bind("click", function () {
        init(2)
    })

    //渠道
    $("#QDID").combobox({
        url: '/Problem/GetChannelByAuth',
        valueField: 'ID',
        textField: '名称',
        limitToList: true,
    })

    //项目
    $("#XMID").combobox({
        url: '/Problem/GetProjectByInfo',
        valueField: 'ID',
        textField: '名称',
        limitToList: true,
    })
    //创建人
    $("#CJR").combobox({
        url: '/ProManager/GetinfoBynature?type=0',
        valueField: 'ID',
        textField: '名称',
        limitToList: true
    })
    //负责人
    $("#ZRR").combobox({
        url: '/ProManager/GetinfoBynature?type=0',
        valueField: 'ID',
        textField: '名称',
        limitToList: true
    })
    //用户名称
    $("#JKDFMC").combobox({
        url: '/ProManager/GetinfoBynature?type=1',
        valueField: 'ID',
        textField: '名称',
        limitToList: true
    })
</script>

<style type="text/css">
    .datagrid-header-row {
        text-align: center;
    }

    .layui-timeline-title {
        margin: 0px
    }

    .timelineDetail:hover {
        background-color: #c5e5ff;
        cursor: pointer;
    }

    .layui-form-item {
        margin: 5px
    }

    p {
        margin-top: -15px
    }
    /*.datagrid-body{height:500px!important;}*/
    .datagrid-body {
        overflow-y: scroll
    }
</style>