@model sbcLabSystem.Models.Backstage.ApprovalDetailsPageViewModel
@{
    ViewBag.Title = "罚分表";
    Layout = "~/Views/Shared/Master.cshtml";
}

<script>
    var viewModel;
    $(function () {
        viewModel = new myViewModel_ApprovalDetails(@Html.Raw(Json.Encode(Model)));
        ko.applyBindings(viewModel, $(".container")[0]);

        //排序
        viewModel.Approvals = viewModel.Approvals.sort(function (left, right) {
            if (left.FieldName() == right.FieldName())
                return left.FieldPatient() == right.FieldPatient() ? 0 : (left.FieldPatient() < right.FieldPatient() ? -1 : 1)
            else
                return (left.FieldName() < right.FieldName() ? -1 : 1)
        })
    });
    function myViewModel_ApprovalDetails(data) {
        var self = this;
        self.isShowModel = ko.observable(false);
        self.ImportFromOtherApproval = function () {
            $.messager.confirm("确认", "导入答案后会清空当前答案列表, 是否确认?", function () {
                self.isShowModel(true);
                $("#dialog_import").dialog(
                {
                    title: "导入",
                    backdrop: "static",
                    onClose: function () {
                        // your handler
                        $(this).dialog("destroy");
                        self.isShowModel(false);
                    }
                });
            });
        }
        self.confirmImport = function () {
            DoAjaxPost("@Url.Action("ImportApprovals", "Backstage")",
                '{"qcTargetDistId":{0},"qcSourceDistId":{1}}'.format(self.qcDistributionId(), self.ImportQCDistributionId()),
                function (json) {
                    $("#dialog_import").dialog("destroy");
                    self.isShowModel(false);
                    $.messager.popup("导入成功");
                    ko.mapping.fromJS(json, myViewModel_ApprovalDetails.mapping,viewModel);
            });
        }
        self.addNewApproval = function () {
            self.Approvals.push(
                new ApprovalDetailInfo(
                JSON.parse('{"Id":0,"FieldDescription":"{0}","FieldName":"11","Score":0,"FieldValue":"{0}","FieldPatient":"1","IsComplex":false,"ElementNameInHtml":""}'.format(""))));
        }
        self.saveApprovals = function () {
            $.bootstrapLoading.start();
            DoAjaxPost("@Url.Action("SaveApprovalDetail", "Backstage")",
                JSON.stringify(ko.mapping.toJS(self)), function () {
                    $.bootstrapLoading.end();
                    $.messager.popup("保存成功!");
                },
                function () {
                    $.bootstrapLoading.end();
                })
        }
        ko.mapping.fromJS(data, myViewModel_ApprovalDetails.mapping, self);
    }
    myViewModel_ApprovalDetails.mapping = {
        'Approvals': {
            create: function (options) {
                return new ApprovalDetailInfo(options.data);
            }
        }
    };
    function ApprovalDetailInfo(data) {
        var self = this;
        self.FieldTypes = ko.observableArray(
             [
                { "Text": "ABO/Rh定型:ABO", "Value": "11" },
                { "Text": "ABO/Rh定型:RhD", "Value": "12" },
                { "Text": "ABO/Rh定型:直抗", "Value": "13" },
                { "Text": "抗体筛选与鉴定:抗体筛选", "Value": "21" },
                { "Text": "抗体筛选与鉴定:抗体鉴定", "Value": "22" },
                { "Text": "交叉配型结果:献血者1", "Value": "31" },
                { "Text": "交叉配型结果:献血者2", "Value": "32" },
                { "Text": "交叉配型结果:献血者3", "Value": "33" },
             ]);
        self.FieldPatients = ko.observableArray(
             [
                { "Text": "患者1", "Value": "1" },
                { "Text": "患者2", "Value": "2" },
                { "Text": "患者3", "Value": "3" },
             ]);
        self.Id = ko.observable(data.Id);
        self.FieldDescription = ko.observable(data.FieldDescription);
        self.FieldName = ko.observable(data.FieldName);
        self.Score = ko.observable(data.Score);
        self.FieldValue = ko.observable(data.FieldValue);
        self.ElementNameInHtml = ko.observable();
        self.deleteApproval = function (dataInfo) {
            $.messager.confirm("是否删除", "确认要删除吗?", function () {
                if (self.Id() != 0) {
                    DoAjaxPost("@Url.Action("DeleteApprovalDetail", "Backstage")",
                        JSON.stringify(ko.mapping.toJS(self)), function () {
                            $.bootstrapLoading.end();
                            $.messager.popup("删除成功!");
                            viewModel.Approvals.remove(self);
                        },
                    function () {
                        $.bootstrapLoading.end();
                    });
                }
                else {
                    viewModel.Approvals.remove(self);
                }
            });
        }
        ko.mapping.fromJS(data, {}, self);
    }
</script>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <ol class="breadcrumb">
                <li><a href="@Url.Action("Approvals","Backstage")">罚分标准表</a></li>
                <li class="active">罚分表</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center"> 
            <h2 data-bind="text:qcDistributionNo"></h2>
        </div>
    </div>
    <form data-bind="submit:saveApprovals">
        <div class="row">
            <div class="col-xs-12">
                <button class="btn btn-default" data-bind="click:ImportFromOtherApproval">
                    <span class="glyphicon glyphicon-plus-sign"></span>
                    <span>导入</span>
                </button>
                <button class="btn btn-default" data-bind="click:addNewApproval">
                    <span class="glyphicon glyphicon-plus"></span>
                    <span>新增</span>
                </button>
                <button class="btn btn-primary" type="submit">
                    <span class="glyphicon glyphicon-floppy-saved"></span>
                    <span>保存</span>
                </button>
            </div>
        </div>
        <table class="table table-bordered table-hover table-responsive" style="margin-top:20px;">
            <thead>
                <tr>
                    <th>计分字段</th>
                    <th>计分患者</th>
                    <th>计分分数</th> 
                    @*<th>是否复杂答案</th>*@
                    @*<th>标准答案</th>
                    <th>计分元素名</th>*@
                    <th>操作</th> 
                </tr>
            </thead>
            <tbody data-bind="foreach:Approvals">
                <tr>
                    <td>
                        <select data-bind="options:FieldTypes,optionsText:'Text',optionsValue:'Value',value:FieldName" required></select>
                    </td>
                    <td>
                        <select data-bind="options:FieldPatients,optionsText:'Text',optionsValue:'Value',value:FieldPatient" required></select>
                    </td>
                    <td>
                        <input type="text" class="form-control" data-bind="textInput:Score" required />
                    </td>
                    @*<td>
                        <input type="checkbox" class="form-control" data-bind="checked:IsComplex" />
                    </td>*@
                    @*<td>
                        <style>
                            .oneBackColor {
                                background-color:#ac28d6;
                            }
                            .Posfieldvalue{
                                color:#ff0000;
                            }
                            .Negfieldvalue{
                                color:#1a4ecf;
                            }
                        </style>
                        <input type="text" class="form-control" data-bind="textInput:FieldValue,css:{'Posfieldvalue':FieldValue()=='阳性','Negfieldvalue':FieldValue()=='阴性'}" />
                    </td>
                    <td>
                        <input type="text" class="form-control" data-bind="textInput:ElementNameInHtml" />
                    </td>*@
                    <td>
                        <button class="btn btn-danger" data-bind="click:deleteApproval">
                            <span class="glyphicon glyphicon-remove"></span>
                            <span>删除</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <div id="dialog_import" data-bind="visible:isShowModel()==true">
        <form class="form-inline" data-bind="submit:confirmImport">
            <div class="form-group">
                <label class="control-label">质控发布列表:</label>
                <select data-bind="options:QCDistributionList,optionsText:'Value',optionsValue:'Id',value:ImportQCDistributionId"></select>
                <button type="submit" class="btn btn-primary">导入</button>
            </div>
        </form>
    </div>
</div>