@using CRM.Core.Model.Entity
@using Core.Web.WebHelper
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .layui-form-label {
        width: 150px
    }

    .layui-input-block {
        margin-left: 0;
    }

    .dialogName {
        width: 31%;
        display: inline-block;
        text-align: center;
    }
    .layui-table-cell {
        height: auto;
        line-height: 28px;
    }
</style>
<div class="x-body">
    <div class="layui-btn-group" style="padding-bottom:10px;">
        @Html.Action("ToolBar", "Home",
            new
                 {
                area = "",
                rightcode = (ViewBag.rightCode as string),
                otherToolBars = new ToolBar[]
                {
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Add, "新增", " " ,"",true),
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Edit, "修改", " " ,"",true),
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Export, "导出", "" ,"",true),
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Delete, "删除", "layui-btn-danger" ,"",true),
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Other1, "编辑附件", "layui-btn-danger" ,"",true),
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Other2, "查看附件", "layui-btn-danger" ,"",true),
                    new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Other3, "查看参与人", "layui-btn-danger" ,"",true),
                }
            })
    </div>
    <form id="mytoolbar">
        会议名称：
        <div class="layui-inline">
            <input type="text" name="txt_meetingName" class="layui-input">
        </div>
        会议类型：
        <div class="layui-inline">
            <select name="txt_meetingType" style="height:35px;">
                <option value="" selected="selected">全部</option>
                <option value="1">线上会议</option>
                <option value="2">线下会议</option>
            </select>
        </div>
        参训事业部：
        <div class="layui-inline">
            <div id="selectChannel" style="width: 400px"></div>
        </div>
        主讲人：
        <div class="layui-inline">
            <input type="text" name="txt_compere" class="layui-input">
        </div>
        参与人：
        <div class="layui-inline">
            <input type="text" name="txt_paricipant" class="layui-input">
        </div>
        创建人：
        <div class="layui-inline">
            <input type="text" name="txt_createUser" class="layui-input">
        </div>
        会议日期：
        <div class="layui-inline">
            <input class="layui-input" placeholder="" name="txt_meetingDateForm" id="meetingDateForm" style="width:120px;">
        </div>
        <div class="layui-inline">
            <input class="layui-input" placeholder="" name="txt_meetingDateTo" id="meetingDateTo" style="width:120px;">
        </div>
        创建日期：
        <div class="layui-inline">
            <input class="layui-input" placeholder="" name="txt_createTimeForm" id="createTimeForm" style="width:120px;">
        </div>
        <div class="layui-inline">
            <input class="layui-input" placeholder="" name="txt_createTimeTo" id="createTimeTo" style="width:120px;">
        </div>
        <input type="hidden" name="txt_employeeId" class="layui-input" value="@ViewBag.eid">
        <input type="hidden" name="txt_employeeName" class="layui-input" value="@ViewBag.userName">
        <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
        <button class="layui-btn layui-btn-reset" id="reset" type="reset">清空</button>
    </form>

    <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
    <iframe id="BillOpen" width="0" height="0" scrolling="no" frameborder="0" style="display:none;"></iframe>
</div>
<div id="ParticipantDialog" class="layui-form" style="display:none;">
    <table class="layui-hide" id="tabl2" lay-filter="tabl2"></table>
</div>
<div id="AccessoryDialog" class="layui-form" style="display:none;">
    <div style="margin: 50px;">
        <div class="dialogName">会议名称：<span id="dialog-meetingName"></span></div>
        <div class="dialogName">会议类型：<span id="dialog-meetingType"></span></div>
        <div class="dialogName">主讲人：<span id="dialog-compere"></span></div>
    </div>
    <table class="layui-hide" id="tabl3" lay-filter="tabl3"></table>
</div>
<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<script>
    var selectRow = {};
    var layer;
    var table;
    var winindex;
    var upload;
    var participantDialog;
    var accessoryDialog;
    var tableCols;
    layui.use(['table', 'laydate', 'upload', 'flow', 'element'], function () {
        layer = layui.layer;
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        table = layui.table
            , laydate = layui.laydate;
        upload = layui.upload;
        tableCols = [[
            { field: 'id', title: '序号', type: 'numbers' }
            , { field: 'meetingName', title: '会议名称' }
            , { field: 'meetingType', title: '会议类型' }
            , { field: 'channelList', title: '参训事业部', templet: '#channelTpl' }
            , { field: 'meetingTime', title: '会议时间', width: 280 }
            , { field: 'meetingSite', title: '会议地点' }
            , { field: 'comperes', title: '主讲人' }
            , { field: 'remark', title: '备注' }
            , { field: 'createUser', title: '创建人', width: 100 }
            , { field: 'createTime', title: '创建时间' }
            , { field: 'updateUser', title: '更新人', width: 100 }
            , { field: 'updateTime', title: '更新时间' }
            , { field: 'show', title: '查看', templet: '#operationTpl', width: 180 }
            , { field: 'operation', title: '操作', templet: '#toolbar' }
        ]];

        var element = layui.element;
        laydate.render({
            elem: '#meetingDateForm'
        });
        laydate.render({
            elem: '#meetingDateTo'
        });
        laydate.render({
            elem: '#createTimeTo'
        });
        laydate.render({
            elem: '#createTimeForm'
        });
        laydate.render({
            elem: '#BigenTime'
        });

        table.render({
            id: 'testReload'//列表别名ID
            , elem: '#tabl1'//表ID
            , url: '@Html.Raw(ViewBag.webapi + "/api/meeting/page")'
            , method: 'get'
            , dataType: 'json'
            , cols: tableCols
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'message' //规定状态信息的字段名称，默认：msg
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , limit: 10
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                , groups: 5 //只显示 1 个连续页码
            }, where: GetParams("mytoolbar")
        });

        $('#mytoolbar #search').on('click', function (data) {
            var param = GetParams("mytoolbar");
            console.log(param)
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: param
            });
        });

        //监听行按钮事件
        table.on('tool(tabl1)', function (obj) {
            var id = obj.data.id;
            var layEvent = obj.event;
            console.log(obj);
            if (layEvent === 'other1') {
                OpenUpload(id);
            } else if (layEvent === 'other2') {
                ShowAccessory(id);
            } else if (layEvent === 'other3') {
                ShowParticipant(id);
            }
        });

        //监听行单击事件
        table.on('row(tabl1)', function (obj) {
            var data = obj.data;
            obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
            selectRow = data;
        });

        var active = {
            add: function () {
                winindex = layer.open({
                    title: '添加培训档案',
                    type: 2,
                    content: '/Meeting/Edit',
                    area: ['850px', '600px']
                });
            },
            edit: function () {
                if (selectRow.id === "undefined" || selectRow.id == null) {
                    layer.alert("请先选中一条记录！", { title: '提示' });
                    return;
                }
                winindex = layer.open({
                    title: '修改培训档案',
                    type: 2,
                    content: '/Meeting/Edit?id=' + selectRow.id,
                    area: ['850px', '600px']
                });
            },
            delete: function () {
                if (selectRow.id === "undefined" || selectRow.id == null) {
                    layer.alert("请先选中一条记录！", { title: '提示' });
                    return;
                }
                Delete(selectRow.id, selectRow.meetingName);
            },
            export: function () {
                var param = GetParams("mytoolbar");
                //if (param.ProductId1 == "" && param.ProductId2 == "" && param.aiCallStatus == "-3" && param.aietime == "" && param.aistime == "" && param.channel == "" && param.cname == "" && param.etime == "" && param.ketime == "" && param.kstime == "" && param.mobile == "" && param.needpay == "" && param.orderId == "" && param.orderStatus == "1" && param.productId == "0" && param.resId == "" && param.riskctrlstatus == "" && param.softusername == "" && param.stime == "" && param.subProductId == "" && param.szzyOrderId == "" && param.xetime == "" && param.xstime == "") {
                //    layer.msg("筛选条件不能全为空");
                //    return;
                //}
                layer.open({
                    title: '<i class="layui-icon layui-icon-export" style="font-size: 20px; color: #1E9FFF;"></i>&nbsp;导出',
                    type: 2,
                    content: "/Control/ExcelExport_cookie?Query=" + encodeURIComponent("/Meeting/ExportData?param=" + JSON.stringify(param)),
                    area: ['850px', '400px']
                });
            }
        }

        $('.layui-btn-group .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        $('#reset').on('click', function () {
            selectChannel.reset();
            allChannel.forEach(function (item) {
                item.selected = false;
            })
            selectChannel = xmSelect.render(optionsChannel);
            selectChannel.update({ data: allChannel });
        })
    })

    function OpenUpload(id) {
        winindex = layer.open({
            title: '编辑附件',
            type: 2,
            content: '/Meeting/Upload?id=' + id,
            area: ['850px', '600px']
        });
    }

    function Closed() {
        layer.close(winindex);
    }
    function TableReload() {
        selectRow = {};
        table.reload('testReload', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    } 
    function Delete(id, name) {
        var eid = '@ViewBag.eid';
        winindex = layer.confirm('是否确认删除会议【' + name +'】?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                type: "DELETE",
                url: '@Html.Raw(ViewBag.webapi + "/api/meeting?meetingId=")' + id + '&eid=' + eid,
                dataType: "json",
                contentType: "application/json",
                success: function (da) {
                    if (da.code == 0) {
                        parent.layer.msg('操作成功！', { icon: 1 });
                        TableReload();
                        Closed();
                    } else {
                        layer.msg(da.message, { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('操作失败！', { icon: 2 });
                }
            });
        })
    }
    function ShowParticipant(id) {
        table.render({
            id: 'testReload2'//列表别名ID
            , elem: '#tabl2'//表ID
            , url: '@Html.Raw(ViewBag.webapi + "/api/meeting/participants?meetingId=")' + id
            , method: 'get'
            , dataType: 'json'
            , cols: [[
                { field: 'id', title: '序号', type: 'numbers' },
                { field: 'participant', title: '会议参与人' }
            ]]
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'message' //规定状态信息的字段名称，默认：msg
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    //"count": res.data.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: false
        });
        participantDialog = layer.open({
            title: '查看会议参与人',
            type: 1,
            content: $('#ParticipantDialog'),
            area: ['300px', '500px']
            , btn: ['确定']
            , yes: function (index, layero) {
                layer.close(participantDialog);
            }
        });
    }
    //获取datagrid头部及字段
    function getDataGridHeader() {
        var newcolumns = [];
        var columns = tableCols[0];
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].field != "checkbox" && columns[i].type != "numbers" && columns[i].field != "show" && columns[i].field != "operation") {
                newcolumns.push(columns[i])
            };
        }
        return newcolumns;
    }

    function ShowAccessory(id) {
        table.render({
            id: 'testReload3'//列表别名ID
            , elem: '#tabl3'//表ID
            , url: '@Html.Raw(ViewBag.webapi + "/api/meeting/accessory?meetingId=")' + id
            , method: 'get'
            , dataType: 'json'
            , cols: [[
                { field: 'id', title: '序号', type: 'numbers', align: "center" }
                , { field: 'fileName', title: '文件名称', align: "center" }
                , { field: 'fileSize', title: '文件大小', align: "center", width: 100 }
                , { field: 'fileUrl', title: '操作', templet: '#fileTpl', width: 100, align: "center" }
                , { field: 'uploader', title: '上传人', align: "center", width: 100 }
                , { field: 'uploadTime', title: '上传时间', align: "center" }

            ]]
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'message' //规定状态信息的字段名称，默认：msg
            }
            , parseData: function (res) { //res 即为原始返回的数据
                document.getElementById("dialog-meetingName").innerHTML = res.data.meetingName;
                document.getElementById("dialog-meetingType").innerHTML = res.data.meetingType;
                document.getElementById("dialog-compere").innerHTML = res.data.comperes;
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    //"count": res.data.total, //解析数据长度
                    "data": res.data.accessories //解析数据列表
                };
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: false
        });
        accessoryDialog = layer.open({
            title: '查看附件',
            type: 1,
            content: $('#AccessoryDialog'),
            area: ['850px', '500px']
            , btn: ['确定']
            , yes: function (index, layero) {
                layer.close(accessoryDialog);
            }
        });
    }
    var allChannel = @Html.Raw(ViewBag.AllChannel);
    var optionsChannel = {
        el: '#selectChannel',
        name: 'txt_channels',//表单的name属性
        layVerify: '',
        tips: '请选择事业部',
        layVerify: 'required',
        toolbar: {//工具条,全选,清空,反选,自定义
            show: true,
            list: [
                'CLEAR'
            ]
        },
        data: allChannel,
    };
    var selectChannel = xmSelect.render(optionsChannel);
</script>
<script type="text/html" id="participantCountTpl">
    {{# if(d.participantCount >0) { }}
    <a href="javascript:void(0)" onclick="ShowParticipant({{d.id}})" style="color: #38cb35">查看</a>
    {{# } else {}}
    <span></span>
    {{# } }}
</script>
<script type="text/html" id="accessoryCountTpl">
    {{# if(d.accessoryCount > 0) { }}
    <a href="javascript:void(0)" onclick="ShowAccessory({{d.id}})" style="color: #38cb35">查看</a>
    {{# } else {}}
    <span></span>
    {{# } }}
</script>
<script type="text/html" id="fileTpl">
    {{# if(d.fileUrl != null){ }}
    <a href="{{d.fileUrl}}" target="_blank" class="layui-table-link" download="{{d.fileName}}">下载</a>
    {{# } }}
</script>
<script type="text/html" id="operationTpl">
    {{# if(d.accessoryCount >0) { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="ShowAccessory({{d.id}})">查看附件</a>
    {{# } }}
    {{# if(d.participantCount >0) { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="ShowParticipant({{d.id}})">查看参与人</a>
    {{# } }}
</script>
<script type="text/html" id="channelTpl">
    {{# for(var i=0;i<d.channelList.length;i++) { }}
    <span>{{d.channelList[i]}}</span><br />
    {{# } }}
</script>