@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;
    }
    .layui-laydate-content > .layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }

    .layui-laydate-content > .layui-laydate-list > li {
        width: 50%
    }

    .merge-box .scrollbox .merge-list {
        padding-bottom: 5px;
    }
</style>

<div class="x-body">
    <form class="layui-form" action="" lay-filter="formTest">
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>会议名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="MeetingName" id="MeetingName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="width:300px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>会议类型：</label>
            <div class="layui-input-inline">
                <select name="MeetingType" id="MeetingType" lay-verify="required" lay-filter="select_meetingType">
                    <option value="1">线上会议</option>
                    <option value="2">线下会议</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>参训事业部 (可多选)：</label>
            <div class="layui-input-inline">
                <div id="selectChannel" style="width: 400px"></div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>开始时间：</label>
            <div class="layui-input-inline">
                <input class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd HH:mm" name="BeginTime" id="BeginTime" style="width:300px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>会议时长：</label>
            <div class="layui-input-inline">
                <select name="ContinueHour" id="ContinueHour">
                    <option value="0">0小时</option>
                    <option value="1" selected>1小时</option>
                    <option value="2">2小时</option>
                    <option value="3">3小时</option>
                    <option value="4">4小时</option>
                    <option value="5">5小时</option>
                    <option value="6">6小时</option>
                    <option value="7">7小时</option>
                    <option value="8">8小时</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="ContinueMinute" id="ContinueMinute" style="width:60px;">
                    <option value="0">00分</option>
                    <option value="15">15分</option>
                    <option value="30">30分</option>
                    <option value="45">45分</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>会议地点：</label>
            <div class="layui-input-inline">
                <div class="layui-input-block" id="MeetingSite" style="width: 400px"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label"><span style="color: red">*</span>主讲人(可多选)：</label>
            <div class="layui-input-inline">
                <div id="Compere" style="width: 400px"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">参与人(可多选)：</label>
            <div class="layui-input-inline">
                <div id="Participant" style="width: 400px"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <textarea class="layui-textarea" name="Remark" id="Remark" style="width:300px;"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>培训文件：</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="uploadAtt">
                    <i class="layui-icon layui-icon-upload-drag layui-font-12"></i> 上传附件
                </button>
                <div class="layui-upload-list" style="max-width: 1000px;">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col width="100">
                            <col width="200">
                            <col width="50">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>上传进度</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
           @*     <button type="button" class="layui-btn layui-btn-sm" id="testListAction">保存附件</button>*@
                <input type="hidden" name="Accessories" id="Accessories" lay-verify="required" lay-reqtext="请上传培训文件！" />
                <br /><span>备注：上传文件支持扩展名：rar .zip .doc .docx .pdf .jpg .png.excel.mp3...</span>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="float: right">
                <input type="hidden" name="Id" id="Id" />
                <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" lay-submit="" id="save" lay-filter="save" onclick="return false;">保存</button>
            </div>
        </div>
    </form>
</div>
<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<script>
    var selectRow = {};
    var layer;
    var table;
    var winindex;
    var upload;
    var inneruserTree;
    var element;
    var form;
    var accessories = [];
    layui.config({
        base: '../Scripts/layui_ext/',
    }).extend({
        selectInput: 'selectInput/selectInput'
    }).use(['table', 'laydate', 'upload', 'flow', 'element', 'form', 'selectInput'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            , form = layui.form
            , selectInput = layui.selectInput;
        element = layui.element;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#BeginTime'
            , type: 'datetime'
            , format: 'yyyy-MM-dd HH:mm',
        });

        var File_Server = '@ViewBag.File_Server';
        var loading;

        var id = '@Html.Raw(ViewBag.id)';
        if (id != '') {
            init();
        } else {
            $.ajax({
                type: "GET",
                url: '@Html.Raw(ViewBag.webapi + "/Inneruser/tree")',
                success: function (da) {
                    //var compereTree = $.extend(true, [], da.data);
                    var participantTree = $.extend(true, [], da.data);
                    //renderselectCompere(compereTree, []);
                    renderSelectParticipant(participantTree, []);
                    renderSelectChannel([]);
                }
            });
            $.ajax({
                type: "GET",
                url: '@Html.Raw(ViewBag.webapi + "/Inneruser/treeKeyName")',
                success: function (da) {
                    var compereTree = $.extend(true, [], da.data);
                    renderselectCompere(compereTree, []);
                }
            });
            InitMeetingSite('');
        }
        $.ajax({
            type: "GET",
            url: File_Server + "/api/Token?key=7AC51A5F0DE9A13D5FC9960AD45CC8D5",
            success: function (da) {
                token = "Bearer " + da;
                var uploadListIns = upload.render({
                    elem: '#uploadAtt'
                    , elemList: $('#demoList') //列表元素对象
                    //, url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    , url: File_Server + '/Streaming/UploadLargeFile'
                    , accept: 'file'
                    , headers: { Authorization: token }
                    , multiple: true
                    , number: 10
                    , auto: true
                    //, bindAction: '#testListAction'
                    , choose: function (obj) {
                        var that = this;
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            if (file.size > 1024 * 1024 * 500) {
                                layer.msg('不能上传超过500M的文件！', { icon: 2 });
                                delete files[index];
                                return;
                            }
                            var fileSize = (file.size / (1024)) > 1024 ? (file.size / (1024 * 1024)).toFixed(2) + 'MB' :
                                (file.size / (1024)).toFixed(1) + 'KB';
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + file.name + '</td>'
                                , '<td>' + fileSize + '</td>'
                                , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                                , '<td>'
                                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide" type="button">重传</button>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" type="button">删除</button>'
                                , '</td>'
                                , '</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                var fileIndex = accessories.findIndex(x => x.fileName == file.name);
                                accessories.splice(fileIndex, 1);
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            that.elemList.append(tr);
                            element.render('progress'); //渲染新加的进度条组件
                        });
                    }
                    , done: function (res, index, upload) { //成功的回调
                        var that = this;
                        //if(res.code == 0){ //上传成功
                        var tr = that.elemList.find('tr#upload-' + index)
                            , tds = tr.children();
                        //tds.eq(3).html(''); //清空操作
                        var file = this.files[index];
                        var fileSize = (file.size / (1024)) > 1024 ? (file.size / (1024 * 1024)).toFixed(2) + 'MB' :
                            (file.size / (1024)).toFixed(1) + 'KB';
                        var data = {
                            fileName: file.name,
                            fileSize: fileSize,
                            fileUrl: res.url
                        }
                        accessories.push(data);
                        delete this.files[index]; //删除文件队列已经上传成功的文件
                        return;
                        //}
                        this.error(index, upload);
                    }
                    , allDone: function (obj) { //多文件上传完毕后的状态回调
                        console.log(obj)
                        var data = JSON.stringify(accessories);
                        console.log(data);
                        document.getElementById("Accessories").value = JSON.stringify(accessories);
                    }
                    , error: function (index, upload) { //错误回调
                        var that = this;
                        var tr = that.elemList.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                    , progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
                        element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
                    }
                });
            }
        })
        form.on('submit(save)', function (data) {
            var eid = '@ViewBag.eid';
            if (accessories.length == 0) {
                layer.msg("请上传培训文件！", { icon: 5 });
                return;
            }
            layer.confirm('是否确认保存?', { icon: 3, title: '提示' }, function (index) {
                $.ajax({
                    type: "POST",
                    url: '@Html.Raw(ViewBag.webapi + "/api/meeting/CreateOrEdit?eid=")' + eid,
                    data: JSON.stringify(data.field),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (da) {
                        if (da.code == 0) {
                            parent.layer.msg('操作成功！', { icon: 1 });
                            parent.TableReload();
                            parent.Closed();
                        } else {
                            layer.msg(da.retmsg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('操作失败！', { icon: 2 });
                    }
                });
            });
        })
        function init() {
            var id = '@Html.Raw(ViewBag.id)';
            $.ajax({
                type: "GET",
                url: '@Html.Raw(ViewBag.webapi + "/api/meeting/detail?meetingId=")' + id,
                success: function (da) {
                    document.getElementById("Id").value = da.data.id;
                    $.ajax({
                        type: "GET",
                        url: '@Html.Raw(ViewBag.webapi + "/Inneruser/tree")',
                        success: function (da1) {
                            //var compereTree = $.extend(true, [], da1.data);
                            var participantTree = $.extend(true, [], da1.data);
                            //renderselectCompere(compereTree, da.data.compereIds);
                            renderSelectParticipant(participantTree, da.data.participantIds);
                            renderSelectChannel(da.data.channelList);
                        }
                    });
                    $.ajax({
                        type: "GET",
                        url: '@Html.Raw(ViewBag.webapi + "/Inneruser/treeKeyName")',
                        success: function (da1) {
                            var compereTree = $.extend(true, [], da1.data);
                            renderselectCompere(compereTree, da.data.compereIds);
                        }
                    });
                    document.getElementById("MeetingType").value = da.data.meetingType;
                    document.getElementById("MeetingName").value = da.data.meetingName;
                    InitMeetingSite(da.data.meetingSite);
                    if (da.data.beginTime != "" && da.data.beginTime.length > 3) {
                        document.getElementById("BeginTime").value = da.data.beginTime.substring(0, da.data.beginTime.length - 3);
                    } else {
                        document.getElementById("BeginTime").value = da.data.beginTime;
                    }
                   var continueHour = document.getElementById("ContinueHour");
                    for (var i = 0; i < continueHour.length; i++) {
                        if (continueHour[i].value == da.data.continueHour.toString())
                            continueHour[i].selected = true;
                    }
                    var continueMinute = document.getElementById("ContinueMinute");
                    for (var i = 0; i < continueMinute.length; i++) {
                        if (continueMinute[i].value == da.data.continueMinute.toString())
                            continueMinute[i].selected = true;
                    }
                    form.render("select");
                    document.getElementById("Remark").value = da.data.remark;
                    accessories = da.data.accessoryList;
                    initAccessory();
                }
            });
        }

        function InitMeetingSite(initValue) {
            $.ajax({
                type: "GET",
                url: '@Html.Raw(ViewBag.webapi + "/api/meeting/select/site")',
                dataType: "json",
                contentType: "application/json",
                success: function (da) {
                    var data = da.data.map(function (d) {
                        return { value: d.key, name: d.value }
                    });
                    var ins = selectInput.render('#MeetingSite', {
                        // 容器id，必传参数
                        name: 'MeetingSite', // 渲染的input的name值
                        hasSelectIcon: true,
                        layFilter: 'MeetingSite', //同layui form参数lay-filter
                        layVerify: 'required', //同layui form参数lay-verify
                        layVerType: '', // 同layui form参数lay-verType
                        layReqText: '请输入会议地点', //同layui form参数lay-ReqText
                        initValue: initValue, // 渲染初始化默认值
                        placeholder: '请输入会议地点', // 渲染的inputplaceholder值
                        // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
                        invisibleMode: true,
                        ignoreCase: true,
                        data: data,
                        hasCut: true, // 是否允许剪贴
                        //url: "http://toys.shop.com/site/test", // 异步加载的url，异步加载联想词的数组值，设置url，data参数赋的值将会无效，url和data参数两者不要同时设置
                        remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
                        parseData: function (res) { // 此参数仅在异步加载data数据下或者远程搜索模式下有效，解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据
                            let data = [];
                            res.map(item => {
                                data.push({ name: item.title, value: item.val })
                            });
                            console.log(data)
                            return data;
                        },
                        error: function (error) { // 异步加载出错的回调 回调参数是错误msg

                        },
                        done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据
                            console.log(data)
                        },
                        remoteMethod: function (value, cb) { // 远程搜索的回调函数
                            // value 是input实施输入的value值
                            // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数

                            //案例
                            //这里如果val为空, 则不触发搜索
                            if (!value) {
                                return cb([]);
                            }
                            //这里的$.ajax去请求后台拿回数据
                            $.ajax({
                                method: 'get',
                                url: 'http://toys.shop.api.com/user/test', // 此处是你服务端的接口
                                data: {
                                    keyword: value,
                                },
                                success: function (data) {
                                    // 此处最好直接返回取你返回的 data属性，如：data.data，这样不限制你后端返回的数据对象格式，如果整体传参，必须满足：{"code":0,"msg":"success","data":[]}
                                    return cb(data)
                                }
                            })
                        }
                    });

                },
                error: function () {
                    layer.msg('统计数据加载失败！', { icon: 2 });
                }
            });
        }
    })

    function initAccessory() {
        layui.use('element', function () {
            document.getElementById("Accessories").value = JSON.stringify(accessories);
            var element = layui.element;
            var $ = layui.jquery;
            $('#demoList').html("");
            for (var i = 0; i < accessories.length; i++) {
                var accessory = accessories[i];
                if (!accessory) return;
                var tr = $(['<tr id="upload-old-' + accessory.id + '">'
                    , '<td>' + accessory.fileName + '</td>'
                    , '<td>' + accessory.fileSize + '</td>'
                    , '<td><div class="layui-progress" lay-filter="progress-old-' + accessory.id + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-xs layui-btn-danger" type="button" onclick="deleteFile(' + accessory.id + ',\'' + accessory.fileName + '\')">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));
                $('#demoList').append(tr);
                element.progress('progress-old-' + accessory.id, '100%');
            }
        });
    }

    function deleteFile(id, fileName) {
        winindex = layer.confirm('是否确认删除【' + fileName + '】?', { icon: 3, title: '提示' }, function (index) {
            @*$.ajax({
                type: "DELETE",
                url: '@Html.Raw(ViewBag.webapi + "/api/meeting/accessory?accessoryId=")' + id,
                dataType: "json",
                contentType: "application/json",
                success: function (da) {
                    if (da.result == true) {
                        parent.layer.msg('操作成功！', { icon: 1 });
                        init();
                    } else {
                        layer.msg(da.retmsg, { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('操作失败！', { icon: 2 });
                }
            });*@
            var index = accessories.findIndex(x => x.id == id);
            accessories.splice(index, 1);
            Closed();
            initAccessory();
        });
        return false;
    }

    function renderselectCompere(compereTree, check) {
        var optionsCompere = {
            el: '#Compere',
            name: 'Compere',//表单的name属性
            //clickClose: true,       //单选完关闭下拉框
            filterable: true,       //搜索
            create: function (val, arr) {
                //返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
                if (arr.length === 0) {
                    return {
                        name: val,
                        value: val
                    }
                }
            },
            direction: 'down',      // 展开方向 下
            //radio: false,            //单选
            //tree: {
            //    show: true,
            //    showFolderIcon: true,
            //    showLine: true,
            //    //非严格模式
            //    strict: false,
            //    expandedKeys: true
            //},
            layVerify: 'required',
            tips: '请选择或输入主讲人',
            toolbar: {//工具条,全选,清空,反选,自定义
                show: true,
                list: [
                    'CLEAR'
                ]
            },
            data: compereTree,
            initValue: check
        };
        var selectCompere = xmSelect.render(optionsCompere);
        return selectCompere;
    }
    function renderSelectParticipant(participantTree, check) {
        var optionsParticipant = {
            el: '#Participant',
            name: 'Participant',//表单的name属性
            //clickClose: true,       //单选完关闭下拉框
            filterable: true,       //搜索
            direction: 'down',      // 展开方向 下
            //radio: false,            //单选
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                expandedKeys: true
            },
            toolbar: {//工具条,全选,清空,反选,自定义
                show: true,
                list: [
                    'CLEAR'
                ]
            },
            data: participantTree,
            initValue: check
        };
        var selectParticipant = xmSelect.render(optionsParticipant);
        return selectParticipant;
    }
    function Closed() {
        layer.close(winindex);
    }
    function renderSelectChannel(check) {
        var allChannel = @Html.Raw(ViewBag.AllChannel);
        var optionsChannel = {
            el: '#selectChannel',
            name: 'channels',//表单的name属性
            tips: '请选择事业部',
            layVerify: 'required',
            toolbar: {//工具条,全选,清空,反选,自定义
                show: true,
                list: [
                    'CLEAR'
                ]
            },
            data: allChannel,
            initValue: check
        };
        var selectChannel = xmSelect.render(optionsChannel);
        return selectChannel;
    }

</script>