@{
    ViewBag.Title = "邮件群发";
    Layout = "~/Views/Shared/Master.cshtml";
}
@model sbcLabSystem.Models.Backstage.EmileMassViewModel
@section scripts{
    <script src="@Url.Content("~/Scripts/ueditor.config.js")"></script>
    <script src="@Url.Content("~/Scripts/ueditor.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/ueditor.parse.min.js")"></script>
}
<script>
    var viewModel;
    $(function () {
        viewModel = new myViewModel_User(@Html.Raw(Json.Encode(Model)));
        ko.applyBindings(viewModel, $(".container")[0]);
    });
    function myViewModel_User(data)
    {
        console.log(data);
        var self = this;
        self.changePage = function (index) {
            location.href = "@Url.Action("EmileMass", "Backstage")" + "?Page=" + index ;
        }
        self.Select = function (data) {      
            //var x = $('#test option:selected').val();
            //alert(self.QCId() + self.ProjectId() + self.LabName() + self.Province1())
            location.href = "@Url.Action("EmileMass", "Backstage")" + "?QCId=" + self.QCId() + "&ProjectId=" + self.ProjectId() + "&LabName=" + self.LabName() + "&Province1=" + self.Province1();   
        }
        self.seve = function (data) {
           
            self.Menus.Url(self.Menus.Campus().join(","));
            self.Menus.Contents(_ueditor.getContent());
            if (self.UserRequestInfoList().length > 0 && self.Menus.Contents() != "" && self.Menus.Url != "") {
                $.bootstrapLoading.start();
                $.ajax({
                    type: "post",
                    url: '@Url.Action("SeveEmileMass", "Backstage")',
                    dataType: 'json',
                    cache: false,
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(ko.toJS(self)),
                    success: function (json) { 
                        $.bootstrapLoading.end();
                        $.messager.popup("发送成功!");
                    },
                    error: function (err) {
                    }
                });
            }
            else {
                alert("发送内容为空，或者发送者为空")
            }

        };
        ko.mapping.fromJS(data, mapping, self);
     
         
    }
    var mapping = {
        'UserRequestInfoList': {
            create: function (options) {
                return new UserRequestInfoList(options.data);
            }
        },
        'Menus': {
            create: function (options) {
                return new Menus(options.data);
            }
        },
     
    }
   
    function Menus(data)
    {
        var self = this;
        self.Campus = ko.computed(function () {
            if (self.Url != "") {
                return self.Url().split(",")
            }
        }, self)
        ko.mapping.fromJS(data, {},self)
    }
    function UserRequestInfoList(data)
    {
        var self = this;
        ko.mapping.fromJS(data, {}, self)
    }

</script>

<div class="container">
    <div class="row" style="background:#5bc0de">
     <span>
     质评号：
         <select class=""
                 data-bind="options:QCDistributionList,value:QCId,
　　　　　　　　　　　　　　 optionsText:'DistNo',
                             optionsValue:'Id',
                             optionsCaption: '--全部--'"></select>
          
    质评类别：
         <select id="test" data-bind="value:ProjectId">
             <option value="0">--全部--</option>
             <option value="1">一类项目</option>
             <option value="2">二类项目</option>
             <option value="3">三类项目</option>
             <option value="4">四类项目</option>
         </select>
    搜索实验室：
         <input type="text" id="" data-bind="value:LabName" />
    所在地：
         <input type="text" id="" data-bind="value:Province1" />

    <button style="" type="button" class="btn  btn-info" data-bind="click:Select">
        <span class="glyphicon glyphicon-search"></span> 查询
    </button>
    </span>
    </div>
    <div class="row" >
        <div class="table-responsive">
            
            <table class="table table-bordered">
                <caption>邮件发送列表</caption>
                <thead >
                    <tr>  
                        <th>实验室编号</th>
                        <th>单位名称</th>
                        <th>实验室名称</th>                     
                        <th>所在</th>
                             
                    </tr>
                </thead>
                <tbody data-bind="foreach:UserRequestInfoList">
                    <tr> 
                        <td data-bind="text:LabCode"></td>   
                        <td data-bind="text:CompanyName"></td>
                        <td data-bind="text:LabName"></td> 
                        <td data-bind="text:Province"></td> 
                    </tr>
                </tbody>
                <tfoot>

                </tfoot>
            </table>
            <nav style="margin-top:-30px;">
                <ul class="pagination" data-bind="foreach:Pages">
                    <li data-bind="if:$data==0" style="background:##ff0000">
                        <a href="javascript:void(0);" aria-label="Previous" data-bind="click: function() { $root.changePage(0) }">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li data-bind="if:$data!=0 && $data!=999,css:{active:$data==$root.CurrentPageIndex()}">
                        <a href="javascript:void(0);" data-bind="text:$data,click: function() { $root.changePage($data) }"></a>
                    </li>
                    <li data-bind="if:$data==999">
                        <a href="javascript:void(0);" aria-label="Next" data-bind="click: function() { $root.changePage(999) }">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
    </div>
  
    <div class="row" >
        <table class="table table-bordered" data-bind="with:Menus">
            <tr>
                <td align="right" style="width:100px;">标题：</td>
                <td>
                    <input name="" type="text" id="" style="width:70%;" data-bind="value:Name" />

                </td>
            </tr>
            <tr>
                <td align="right" style="width:100px;">发送对象：</td>
                <td>
                    <label style="margin-left:20px;">
                        <input type="checkbox" value="管理员" data-bind="checked:Campus"> 管理员
                    </label>
                    <label style="margin-left:20px;">
                        <input type="checkbox" value="负责人" data-bind="checked:Campus">实验室负责人
                    </label>
                    <label style="margin-left:20px;">
                        <input type="checkbox" value="操作人" data-bind="checked:Campus">实验室操作人
                    </label>
                </td>
            </tr>

            <tr>
                <td style="width:100px;" valign="top" align="right">邮件内容：</td>
                <td>
                    <div style="width: 1000px;">
                        <script type="text/javascript">

                            //实例化编辑器
                            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
                            var _ueditor = UE.getEditor('editor');
                            _ueditor.ready(function () {

                            });
                            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文

                        </script>
                        <script id="editor" type="text/plain" style="width: auto;" data-bind="text:Contents">

                        </script>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="right" style="width:100px;">备注：</td>
                <td>
                    <input name="" type="text" id="" style="width:70%;" data-bind="value:Title" />

                </td>
            </tr>
        </table>
        <button class="btn btn-block btn-lg" data-bind="click:seve">发送</button>
    </div>
   
</div>