@using ContractService.Authorization
@using ContractService.Configuration
@using ContractService.LegalContract
@using ContractService.Views.Shared.Modals
@using ContractService.Views.Shared.Query

@{
    ViewBag.Title = "法律服务合同详情";
    string activeMenu = PermissionNames.PagesCaseContractMgCaseMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string contractNo = ViewBag.ContractNo, contractState = ViewBag.ContractState, kpLevel = ViewBag.KeyPointLevel, kpState = ViewBag.KeyPointState;

    int noteType = AbpSession.AccountType == AccountTypeDefinition.Lawyer ? NoteTypeDefinition.LawyerNote : NoteTypeDefinition.Note;
    var inputs = new List<Input>()
{
        new InputHide("id"),
        new InputHide("contractNo"),
        new Input("code", "补充合同编号"),
        new Input("name", "补充合同名称"),
        new InputWangEditor("contentInfo", "补充合同信息").SetNotRequired(),
    };
    var modalBody = new ModalBodyViewModel(null, "form-sup")
    .AddTab("base", "补充合同信息", inputs)
    .AddTab("attach", "补充合同附件", "<div id=\"attach-box\" class=\"iwb-dynamic-box\"><button class=\"btn btn-sm btn-iwb\" type=\"button\"  style=\"position: absolute; top: 8px;right:20px\" onclick=\"AddAttach($('#attach-box'))\">添加附件</button><div class=\"box-attaches\" style=\"display:none;width:100%;flex-wrap: wrap;\"></div><div class=\"row box-label\"><div class=\"col-md-11\"><label>附件名称</label></div><div class=\"col-md-1\"><label>操作</label></div></div><div class=\"box-body\"></div></div>");
    var modal = new ModalViewModel("添加补充合同", "", modalBody, "modal-sup");
    var kp_sup_inputs = new List<Input>()
{
        new InputHide("id"),
        new InputHide("contractNo"),
        new InputHide("keyPointNo"),
        new Input("code", "变更材料编号"),
        new Input("name", "变更材料名称"),
        new InputWangEditor("contentInfo", "变更材料信息").SetNotRequired(),
    };
    var kp_sup_modalBody = new ModalBodyViewModel(null, "form-sup-kp")
    .AddTab("base-kp", "变更材料信息", kp_sup_inputs)
    .AddTab("attach-kp", "变更材料附件", "<div id=\"kp-attach-box\" class=\"iwb-dynamic-box\"><button class=\"btn btn-sm btn-iwb\" type=\"button\"  style=\"position: absolute; top: 8px;right:20px\" onclick=\"AddAttach($('#kp-attach-box'))\">添加附件</button><div class=\"box-attaches\" style=\"display:none;width:100%;flex-wrap: wrap;\"></div><div class=\"row box-label\"><div class=\"col-md-11\"><label>附件名称</label></div><div class=\"col-md-1\"><label>操作</label></div></div><div class=\"box-body\"></div></div>");
    var kp_sup_modal = new ModalViewModel("变更材料(证据)", "", kp_sup_modalBody, "modal-sup-kp");

    var modal_note = new ModalViewModel("添加备注", "", new ModalBodyViewModel(new List<Input>()
{
        new InputHide("id"),
        new InputHide("contractNo"),
        new InputHide("noteType"),
        new InputHide("keyPointNo"),
        new InputTextarea("noteContent","备注内容")
    }, "form-note"), "modal-note");

    var modal_attach = new ModalViewModel("添加附件", "", new ModalBodyViewModel(new List<Input>()
    {
        new Input("name", "附件名称"),
        new InputFile("attach", "合同附件").SetFileOption("a-info", "a-name", "a-ext")
    }, "form-attach"), "modal-attach", 0, "");

    var modal_kp = new ModalViewModel("关键点", new ModalBodyViewModel(new List<Input>()
    {
        new InputHide("id"),
        new InputHide("contractNo"),
        new InputHide("parentNo"),
        new Input("parentName", "父关键点").SetDisabled(),
        new Input("name", "关键点名称"),
        new Input("keyPointLevel", "紧急级别").SetSelectOptions(kpLevel),
        new Input("kpType", "关键点日期").SetSelectOptions("<option value=\"1\">自定义日期</option><option value=\"2\">根据父关键点履行日期</option>"),
        new InputDate("alarmDate", "提醒日期", @class: "t1"),
        new InputDate("expireDate", "过期日期", @class: "t1"),
        new InputNumber("expireDay", "提醒天数", 1, @class: "t2").SetMin(1).SetHelp("距父关键点履行后的天数"),
        new InputNumber("alarmDay", "过期天数", 1, @class: "t2").SetMin(0).SetHelp("距提醒后的天数"),
        new InputTextarea("description", "关键点描述")
    }, "form-kp"), "modal-kp");
    var modal_org = new ModalViewModel("分配关键点", "", new ModalBodyViewModel(new List<Input>()
    {
        new InputHide("id"),
        new AjaxSelect("staffNo", "关联员工", "Staff", contractNo, "query_staff").SetSearchClear("staffNo,staffOrgName"),
        new Input("staffOrgName", "员工部门").SetDisabled(),
    }, "form-org"), "modal-org");

}
@section css{
    <style>
        .iwb-bootstrap-table .table-box-content {
            padding: 10px .5rem 0;
        }

        p {
            margin-top: 0;
            margin-bottom: 0.25rem;
        }

        .timeline-item .timeline-header {
            cursor: pointer;
        }

        .timeline-item.active {
            border: 2px solid var(--mc);
            transition: all 0.3s;
        }
        .card .card-header {
            position: relative;
        }
        .card .card-tools .date-tool {
            position: absolute;
            
        }
    </style>
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5 pt-2">
            <div class="card card-widget">
                <div class="card-header">
                    <div class="card-title"><h4 id="contract-name" class="mb-0 text-iwb"></h4></div>
                    <div class="card-tools">
                        <div class="btn-group btn-group-sm" id="note-btn-tool">

                            @if (AbpSession.AccountType != AccountTypeDefinition.System)
                            {
                                if (IsGranted(PermissionNames.PagesCaseContractMgContractMgNote))
                                {
                                    <button type="button" class="btn btn-iwb fixed" onclick="AddNote(0)">合同备注</button>
                                }
                                if (IsGranted(PermissionNames.PagesCaseContractMgContractMgLawNote))
                                {
                                    <button type="button" class="btn btn-iwb fixed" onclick="AddNote(1)">律师提示</button>
                                }
                            }
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card card-widget collapsed-card mb-3">
                        <div class="card-header">
                            <div class="card-title"><h5 class="mb-0">合同内容</h5></div>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse" id="contract-tool">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body card-comments">
                            <div id="contract-desc"></div>
                            <div id="contract-attach" style="display: none">
                                <span style="font-size: 0.75rem; font-weight: 600;">附件：</span>
                                <div></div>
                            </div>
                        </div>
                    </div>

                    <div class="card card-widget collapsed-card mb-0">
                        <div class="card-header">
                            <div class="card-title"><h5 class="mb-0">补充合同</h5></div>
                            <div class="card-tools">
                                <div class="btn-group btn-group-sm">
                                    @if (AbpSession.AccountType == AccountTypeDefinition.Client && IsGranted(PermissionNames.PagesCaseContractMgContractMgSupplement))
                                    {
                                        <button type="button" class="btn btn-iwb fixed" onclick="AddSupplement()">补充合同</button>
                                    }
                                </div>
                                <button type="button" class="btn btn-tool" data-card-widget="collapse" id="supplement-tool">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div id="contract-sup" class="card-body card-comments"></div>
                    </div>
                </div>

                <div class="card-footer card-comments" id="contract-note">
                    <div id="contract-note-tool">
                        <label class="iwb-checkbox checkbox-solid"><input name="note-tool" type="checkbox" value="@(NoteTypeDefinition.LawyerTip)"><span>律师提示</span></label>
                        <label class="iwb-checkbox checkbox-solid"><input name="note-tool" type="checkbox" value="@(AbpSession.AccountType == AccountTypeDefinition.System?NoteTypeDefinition.LawyerNote+","+NoteTypeDefinition.Note:noteType+"")"><span>备注</span></label>
                        <label class="iwb-checkbox checkbox-solid"><input name="note-tool" type="checkbox" value="@(NoteTypeDefinition.StateChange)"><span>状态变更</span></label>
                        <label class="iwb-checkbox checkbox-solid"><input name="note-tool" type="checkbox" value="@(NoteTypeDefinition.ContentChange)"><span>内容变更</span></label>
                        @*<label class="iwb-checkbox checkbox-solid"><input name="note-tool" type="checkbox" value="@(NoteTypeDefinition.EvidenceChange)"><span>材料变更</span></label>*@
                    </div>
                    <div id="contract-note-content"></div>
                </div>
            </div>
        </div>
        <div class="col-md-7 pt-2">
            <div class="card card-widget">
                <div class="card-header">
                    <div class="card-title">
                        <h4 class="mb-0 text-iwb">
                            合同关键点
                            <span class="btn btn-outline-iwb circle btn-sm mr-3 ml-3">律师负责人：@ViewBag.MasterLawyer</span>
                            <span class="btn btn-outline-iwb circle btn-sm mr-3">法务负责人：@ViewBag.MasterStaff</span>
                        </h4>
                    </div>
                    <div class="card-tools">
                        <div class="btn-group btn-group-sm">
                            @if (AbpSession.AccountType != AccountTypeDefinition.System && IsGranted(PermissionNames.PagesCaseContractMgContractMgNote))
                            {
                                <button type="button" class="btn btn-iwb fixed" onclick="AddKp()">添加关键点</button>
                            }
                        </div>
                        <div class="date-tool">

                        </div>
                    </div>
                </div>
                <div id="kp-body" class="card-body pr-0" style="min-height: 80px;"></div>
            </div>
        </div>
    </div>
</div>

@section modal{
    <!--Modal Start-->
    @Html.Partial("Modals/_Modal", modal)
    @Html.Partial("Modals/_Modal", kp_sup_modal)
    @Html.Partial("Modals/_Modal", modal_note)

    @Html.Partial("Modals/_Modal", modal_attach)
    @Html.Partial("Modals/_Modal", modal_kp)
    @Html.Partial("Modals/_Modal", modal_org)

    @Html.Partial("Query/_Lawyer", new QuerySearchModel("query_lawyer", "lawyerNo|lawyer_no").SetOriginField("id").SetSearchFun("SetLawFirmQueryFun()").SetAjaxSelectName("name"))
    @Html.Partial("Query/_Staff", new QuerySearchModel("query_staff", "staffNo,name,staffOrgName").SetOriginField("id,name,staffOrgName").SetSearchFun("SetContractQueryFun()").SetAjaxSelectName("name"))
    <!--Modal End-->
}

@section scripts
{
    <script type="text/javascript">
        var $table;
        $(function() {
            GetContract();
            GetNote();
            GetKp(document.location.hash);
            $('#supplement-tool').on('expanded.lte.cardwidget.sup', function() { GetSupplement(); });
            $('#modal-kp #expireDate,#modal-kp #alarmDate').on('change.compare',
                function() {
                    var aD = $('#modal-kp #alarmDate').val(), eD = $('#modal-kp #expireDate').val(), $this = $(this);
                    if (aD && eD && aD > eD) {
                        abp.message.warn('提醒日期不能晚于过期日期!').done(function() {
                            $this.val('').trigger('focus');
                        });
                    }
                });
            $('#modal-kp #kpType').on("change.kp",
                function() {
                    var t = $(this).val();
                    $('#modal-kp .t1,#modal-kp .t2').removeClass('required').closest('.form-group')
                        .css("display", "none");
                    if (t == 1) {
                        $('#modal-kp .t1').addClass('required').closest('.form-group').css("display", "flex");
                        $('#modal-kp .t2').val('');
                    } else {
                        $('#modal-kp .t2').addClass('required').closest('.form-group').css("display", "flex");
                        $('#modal-kp .t1').val('');
                    }
                });
            $('#contract-note-tool input[type="checkbox"]').on('change', function() { GetNote(); });
            $('#modal-org #staffNo').on('change',
                function() {
                    var no = $('#modal-org #staffNo').val();
                    if (no) {
                        $.iwbAjax41({
                            url: abp.appUrl + "Query/QueryStaff?no=" + no,
                            success: function(res) {
                                if (res.organizationName) {
                                    $('#modal-org #staffOrgName').val(res.organizationName);
                                }
                            }
                        });
                    }

                });
        });

        function SetOrg(id) {
            var $that = $('#' + id);
            OpenModal({
                url: abp.appUrl + "LegalContractKeyPoint/SetKeyPointOrg",
                modal: "modal-org",
                data: { id: id, staffNo: $that.data('staff-no'), staffOrgName: $that.data('staff-org') },
                success: function() {
                    GetKp(id);
                }
            });
        }

        function SetContractQueryFun() {
            return { "KeyField": "contractall", "KeyWords": '@(contractNo)' }
        }
    </script>

    <script id="Note-Contract-Script">
        function GetContract() {
            $.iwbAjax4({
                url: abp.appUrl + 'LegalContract/GetDtoById?id=@(contractNo)',
                success: function(res) {
                    if (res) {
                        var name = '<span>{0}</span><small class="text-sm">({1})</small>'.format(res.name,
                            ContractStateFormatter(res.contractState));
                        $('#contract-name').html(name);
                        $('#contract-desc').html(res.contentInfo);
                        GetContractAttach();
                        @if (IsGranted(PermissionNames.PagesCaseContractMgContractMgChangeState) && AbpSession.AccountType == AccountTypeDefinition.Client)
                        {
                            <text>
                                var btnS =
                                        '<button type="button" class="btn btn-iwb" onclick="MsgConfirm(\'确认要启动合同吗？\',\'开启合同\',function() {ChangeContractState(@(LegalContractStateDefinition.Running),\'开启合同\')});">开启合同</button>',
                                    btnH =
                                        '<button type="button" class="btn btn-iwb" onclick="ChangeContractStateWithModal(@LegalContractStateDefinition.Hang ,\'挂起合同\')">挂起合同</button>',
                                    btnR =
                                        '<button type="button" class="btn btn-iwb" onclick="ChangeContractStateWithModal(@LegalContractStateDefinition.Running,\'恢复合同\')">恢复合同</button>',
                                    btnRs =
                                        '<button type="button" class="btn btn-iwb" onclick="ChangeContractStateWithModal(@LegalContractStateDefinition.Running,\'重启合同\')">重启合同</button>',
                                    btnE =
                                        '<button type="button" class="btn btn-iwb" onclick="ChangeContractStateWithModal(@LegalContractStateDefinition.End ,\'关闭合同\')">关闭合同</button>';
                                var str = '';
                                switch (res.contractState) {
                                case @(LegalContractStateDefinition.New):
                                    str += btnS;
                                    break;
                                case @(LegalContractStateDefinition.Running):
                                    str += btnH;
                                    str += btnE;
                                    break;
                                case @(LegalContractStateDefinition.Hang):
                                    str += btnR;
                                    str += btnE;
                                    break;
                                case @(LegalContractStateDefinition.End):
                                default:
                                    str = '';
                                    break;
                                }
                            </text>
                            if (IsGranted(PermissionNames.PagesCaseContractMgContractMgRestart))
                            {
                                <text>
                                    if (res.contractState == @(LegalContractStateDefinition.End)) {
                                        str += btnRs;
                                    }
                                </text>
                            }
                            <text>
                                $('#note-btn-tool button:not(.fixed)').remove();
                                if (str) {
                                    $('#note-btn-tool').prepend(str);
                                }
                            </text>
                        }
                    }
                    $('#contract-tool').CardWidget("expand");
                }
            });

        }

        function GetNote(count, id) {
            var $that = id ? $('#kp-note_' + id) : $('#contract-note');
            $that.find('.tool-more').remove();
            count = count || 0;
            id = id || "";
            var skip = count == 0 ? 0 : $that.find('.card-comment').length, take = (count + 1) * 5;
            var keyword = "";
            $that.find('input[type="checkbox"]:checked').each(function() {
                keyword += "," + $(this).val();
            });
            if (keyword) {
                keyword = keyword.substr(1);
            }
            keyword = id + "|" + keyword;
            $.iwbAjax4({
                url: abp.appUrl + 'LegalContract/QueryNote',
                data: {
                    no: '@(contractNo)',
                    skip: skip,
                    take: take > 30 ? 30 : take,
                    keyword: keyword
                },
                success: function(res) {
                    NotesFormatter(res.items, count, res.totalCount > skip + res.items.length, id);
                }
            });
        }

        function NotesFormatter(data, count, hasMore, id) {
            var $that = id ? $('#kp-note-content_' + id) : $('#contract-note-content');
            var str = '';
            $that.find('.non-note').remove();
            if (data && data.length) {
                data.forEach(function(v) {
                    str += NoteFormatter(v, id);
                });
                if (count == 0) {
                    $that.empty();
                }
                $that.append(str);
                if (hasMore) {
                    var more =
                        '<div class="tool-more" style="position: absolute;bottom: 0;left: 0;width:100%;height:120px;display:flex;justify-content: center;align-items: center;background: linear-gradient(rgba(255,255,255,.2),rgb(255,255,255))"><button class="btn btn-iwb" style="width: 120px;" onclick="GetNote({0},\'{1}\')">查看更多...</button></div>'
                            .format(count + 1, id || "");
                    $that.append(more);
                } else {
                    $that.find('.tool-more').remove();
                }
                if (id) {
                    /*  $('#kp-note-tool_' + id).show();*/
                    $('#kp-note_' + id).data('init', true);

                }
            } else if (count == 0) {
                $that.html(
                    '<div class="non-note"><span style="text-align: center;width: 100%;display: block;font-size: 1rem;font-weight: 400;color: var(--mc);">暂无内容</span></div>');
                $that.find('.tool-more').remove();
                //if (id) {
                //    $('#kp-note_' + id).data('init', false);
                //}
            } else {
                $that.find('.tool-more').remove();
            }
        }

        function NoteFormatter(data, id) {
            var str = '';
            if (data) {
                var kp = !id && data.keyPointName
                    ? '<span class="text-iwb"><strong>关键点</strong>：{0}</span><br />'.format(data.keyPointName)
                    : "";
                var isLawyer = data.noteType == @NoteTypeDefinition.LawyerTip
                    ? '<div style="width: 100%;height: 100%;top: 0;left: 0;position: absolute;display: flex;justify-content: center;align-items: center;"><span style="font-family:fangsong;font-size: 1.25rem;padding: 0 0.5rem;border: 2px solid;color: red;border-radius: 0.5rem;opacity: 0.7;transform: rotate(-25deg);">律师提示</span></div>'
                    : "";
                var style = data.noteType == @NoteTypeDefinition.LawyerTip ? "position: relative;min-height:80px;" : "";
                str +=
                    '<div class="card-comment" style="{6}">{4}<img class="img-circle img-sm" src="{1}"><div class="comment-text"><span class="username">{0}<span class="text-muted" style="float:right">{2}</span></span><span class="text-content">{5}{3}</span></div></div>'
                    .format(data.userRealName,
                        data.userImage ? data.userImage : '/Content/Image/user.png',
                        new Date(data.creationTime).format("yyyy-MM-dd hh:mm:ss"),
                        data.noteContent,
                        isLawyer,
                        kp,
                        style);
            }
            return str;
        }

        function AddNote(type, id) {
            id = id || "";
            var mt = type == 0 ? "添加备注" : type == 2 ? "添加关键点备注" : "添加律师提示";
            $('#modal-note .modal-title span').html(mt);
            var noteType = '@noteType';
            if (type == 0 || type == 2) {
                $('#modal-note #noteContent').closest('.form-group').find('.iwb-label').html("备注内容");
            } else {
                noteType = '@NoteTypeDefinition.LawyerTip';
                $('#modal-note #noteContent').closest('.form-group').find('.iwb-label').html("律师提示");
            }
            OpenModal({
                url: abp.appUrl + "LegalContract/CreateNote",
                modal: "modal-note",
                data: {
                    id: "0",
                    noteType: noteType,
                    contractNo: '@contractNo',
                    keyPointNo: id
                },
                success: function() {
                    GetNote();
                    if (id) {
                        GetNote(0, id);
                    }
                }
            });
        }

        function AddKpNote(id) {
            OpenModal({
                url: abp.appUrl + "LegalContract/CreateNote",
                modal: "modal-note",
                data: {
                    id: "0",
                    contractNo: '@contractNo',
                    keyPointNo: id
                },
                success: function () {
                    GetNote();
                    if (id) {
                        GetNote(0, id);
                    }
                }
            });
        }
    </script>

    <script id="Supplement-Script">
        function AddSupplement() {
            $('#modal-sup #attach-box .box-body').empty();
            $('#modal-sup #id_base').tab('show');
            OpenModal({
                url: abp.appUrl + "LegalContract/CreateSupplement",
                modal: "modal-sup",
                data: {
                    contractNo: '@contractNo'
                },
                dataFun: GetSupSaveData,
                success: function() {
                    $('#supplement-tool').CardWidget("collapse");
                    $('#contract-sup').empty();
                    $('#supplement-tool').CardWidget("expand");
                }
            });
        }

        function GetSupSaveData() {
            var data = $.formSerialize($('#modal-sup form'));
            data.AttachFiles = [];
            $('#modal-sup .attach-row').each(function() {
                var $this = $(this);
                var v = $this.find('input[name="attach-info"]').val();
                if (v) {
                    data.AttachFiles.push({
                        FileInfo: v,
                        FileTitle: $this.find('input[name="attach-title"]').val(),
                        FileName: $this.find('input[name="attach-name"]').val(),
                        FileExt: $this.find('input[name="attach-ext"]').val()
                    });
                }
            });
            return data;
        }

        function ChangeEvidenceKp(id) {
            $('#modal-sup-kp #kp-attach-box .box-body').empty();
            $('#modal-sup-kp #id_base-kp').tab('show');
            OpenModal({
                url: abp.appUrl + "LegalContractKeyPoint/CreateSupplement",
                modal: "modal-sup-kp",
                data: {
                    contractNo: '@contractNo',
                    keyPointNo: id
                },
                dataFun: GetKpSupSaveData,
                success: function() {
                    GetSupplement(0, id);
                }
            });
        }

        function GetKpSupSaveData() {
            var data = $.formSerialize($('#modal-sup-kp form'));
            data.AttachFiles = [];
            $('#modal-sup-kp .attach-row').each(function() {
                var $this = $(this);
                var v = $this.find('input[name="attach-info"]').val();
                if (v) {
                    data.AttachFiles.push({
                        FileInfo: v,
                        FileTitle: $this.find('input[name="attach-title"]').val(),
                        FileName: $this.find('input[name="attach-name"]').val(),
                        FileExt: $this.find('input[name="attach-ext"]').val()
                    });
                }
            });
            return data;
        }

        function GetSupplement(count, id) {
            var $that = id ? $('#kp-sup_' + id) : $('#contract-sup');
            if (count == undefined) {
                if ($that.find('.card-comment').length) {
                    return;
                } else {
                    $that
                        .html(
                            '<div class="non-sup"><span style="text-align: center;width: 100%;display: block;font-size: 1rem;color: var(--mc);">暂无内容</span></div>');
                }
            }

            $that.find('.tool-more').remove();
            count = count == undefined ? 0 : count;
            var skip = count == 0 ? 0 : $that.find('.card-comment').length, take = 3;
            $.iwbAjax4({
                url: abp.appUrl + 'LegalContract/QuerySupplement',
                data: {
                    no: '@(contractNo)',
                    skip: skip,
                    take: take,
                    keyword: id
                },
                success: function (res) {
                    SupsFormatter(res.items, count, res.totalCount > skip + res.items.length, id);
                }
            });
        }

        function SupsFormatter(data, count, hasMore, id) {
            var $that = id ? $('#kp-sup_' + id) : $('#contract-sup');
            $that.find('.non-sup').remove();
            if (data && data.length) {
                if (count == 0) {
                    $that.empty();
                }
                data.forEach(function(v) {
                    var str = SupFormatter(v, id);
                    $that.append(str);
                    GetSupAttach(v.id, id);
                });
                if (hasMore) {
                    var more =
                        '<div class="tool-more" style="position: absolute;bottom: 0;left: 0;width:100%;height:120px;display:flex;justify-content: center;align-items: center;background: linear-gradient(rgba(255,255,255,.2),rgb(255,255,255))"><button class="btn btn-iwb" style="width: 120px;" onclick="GetSupplement({0},\'{1}\')">查看更多...</button></div>'
                            .format(count + 1, id);
                    $that.append(more);
                } else {
                    $that.find('.tool-more').remove();
                }
                if (id) {
                    $('#kp-sup_' + id).data('init', true);
                }
            } else if (count == 0) {
                $that
                    .html(
                        '<div class="non-sup"><span style="text-align: center;width: 100%;display: block;font-size: 1rem;font-weight: 400;color: var(--mc);">暂无内容</span></div>');
                $that.find('.tool-more').remove();
            } else {
                $that.find('.tool-more').remove();
            }
        }

        function SupFormatter(data, id) {
            var str = '';
            if (data) {
                str +=
                    '<div class="card-comment"><div class="comment-text ml-0"><span class="username">{2}<span class="text-muted" style="float:right">{3}</span></span> <span class="text-content">{0}</span></div><div id="{1}" class="sup-attach"><span style="font-size: 0.75rem; font-weight: 600;">附件：</span><div></div></div></div>'
                    .format(data.contentInfo,
                        id ? 'kp-sup-attach_' + data.id : 'sup-attach_' + data.id,
                        data.name,
                        new Date(data.creationTime).format("yyyy-MM-dd hh:mm:ss"));
            }
            return str;
        }
    </script>

    <script id="Attach-Script">
        function GetContractAttach() {
            $.iwbAjax4({
                url: abp.appUrl + 'AttachFiles/QueryAttaches',
                data: {
                    TableName: "Contract",
                    ColName: "Contract",
                    Key: '@contractNo'
                },
                success: function(res) {
                    var str = '';
                    if (res) {
                        res.forEach(function(v) {
                            str += QueryAttachFormatter(v);
                        });
                    }
                    if (str) {
                        $('#contract-attach').css("display", "block").find('div').html(str);
                    } else {
                        $('#contract-attach').css("display", "none");
                    }
                }
            });
        }

        function GetSupAttach(id, kpNo) {
            $.iwbAjax4({
                url: abp.appUrl + 'AttachFiles/QueryAttaches',
                data: {
                    TableName: kpNo ? "KeyPoint" : "Contract",
                    ColName: "Supplement",
                    Key: id
                },
                success: function(res) {
                    var str = '';
                    if (res) {
                        res.forEach(function(v) {
                            str += QueryAttachFormatter(v);
                        });
                    }
                    var $that = kpNo ? $('#kp-sup-attach_' + id) : $('#sup-attach_' + id);
                    if (str) {
                        $that.css("display", "block").find('div').html(str);
                    } else {
                        $that.css("display", "none");
                    }
                }
            });
        }

        function QueryAttachFormatter(data, isDelete) {
            var str = "";
            if (data) {
                str = isDelete
                    ? '<span class="attach-file ml-3 mb-2"  title="点击查看(下载)附件"  style="border: 1px solid #1e90ff; color: #1e90ff; background: #eee; border-radius:.25rem; padding: 3px 0px 3px 5px; display: block;"><a href="{1}" target="_blank">{2}</a><span class="pl-2 pr-2" title="删除附件" onclick="DeleteAttach(this,\'{0}\',\'{2}\')" style="cursor: pointer;">X</span></span>'
                    .format(data.id, data.filePath, data.fileTitle)
                    : '<span class="attach-file ml-3"  title="点击查看(下载)附件"  style=" color: #1e90ff; display: block;width:100%;"><a href="{0}" target="_blank">{1}</a></span>'
                    .format(data.filePath, data.fileTitle);
            }
            return str;
        }

        function DeleteAttach(that, id, name) {
            MsgConfirm("您确定要删除附件[" + name + "]吗？",
                "删除附件",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + "AttachFiles/DeleteAttach",
                        data: {
                            id: id
                        },
                        success: function() {
                            $(that).parent().fadeOut(500,
                                function() {
                                    $(this).remove();
                                });
                        }
                    });
                });
        }

        //添加附件
        function AddAttach($target) {
            OpenModal({
                modal: "modal-attach",
                save: function() {
                    if ($.formValidate($('#modal-attach form'))) {
                        var v = $('#modal-attach #a-info').val(),
                            t = $('#modal-attach #name').val(),
                            n = $('#modal-attach #a-name').val(),
                            e = $('#modal-attach #a-ext').val();
                        if (!v) {
                            abp.message.warn("请选择一个文件！");
                            return;
                        }
                        AttachFormatter(v, t, n, e, $target);
                        $('#modal-attach').modal('hide');
                    }
                }
            });
        }

        function AttachFormatter(v, t, n, e, $target) {
            var str =
                '<div class="row attach-row"><input name="attach-info" type="hidden" value="{0}" /><input name="attach-title" type="hidden" value="{1}" /><input name="attach-name" type="hidden" value="{2}" /><input name="attach-ext" type="hidden" value="{3}" /><div class="col-md-11"><input type="text" class="form-control form-control-sm disabled" value="{1}({2})" disabled="" /></div><div class="col-md-1"><button class="btn btn-sm btn-danger" onclick="$(this).closest(\'.attach-row\').fadeOut(500,function(){$(this).remove()});">删除</button></div></div>'
                    .format(v, t, n, e);
            $target.find('.box-body').append(str);
        }
    </script>

    <script id="ChangeContractState-Script">
        function ChangeContractState(state, reason) {
            $.iwbAjax1({
                url: abp.appUrl + 'LegalContract/ChangeState',
                table: $table,
                data: {
                    Id: '@(contractNo)',
                    State: state,
                    Reason: reason
                },
                success: function() {
                    GetContract();
                    GetNote();
                }
            });
        }

        function ChangeContractStateWithModal(state, title) {
            $(document).iwbModal('create',
                {
                    modal: 'change-state-modal',
                    modaltitle: title,
                    modalBody:
                        '<div class="modal-body"><form class="form-horizontal iwb-form"><div class="form-group row"><label class="col-sm-3 col-md-2 iwb-label iwb-label-sm " for="reason">变更原因</label><div class="col-sm-9 col-md-10"><div class="input-group input-group-sm  " style="position: relative"><textarea rows="5" class="form-control" id="reason" name="description" placeholder="请输入变更原因..." value="" style="width:100%"></textarea></div></div></div></form></div>',
                    save: function() {
                        var v = $('#change-state-modal #reason').val();
                        if (v) {
                            ChangeContractState(state, v);
                            $('#change-state-modal').modal('hide');
                        } else {
                            abp.message.warn("请输入变更原因后再提交");
                        }
                    }
                });
        }
    </script>

    <script id="kp-script">
        function AddKp() {
            OpenModal({
                modal: "modal-kp",
                modaltitle: "添加",
                url: abp.appUrl + "LegalContractKeyPoint/CreateKp",
                data: {
                    id: "",
                    parentNo: "",
                    kpType: 1,
                    parentName: "根节点",
                    contractNo: '@contractNo'
                },
                disabled: "kpType",
                success: function(res) {
                    GetKp(res.id);
                }
            });
        }

        function AddChildKp(id, name) {
            var data = kpData.find(function(v) {
                return v.id == id;
            });
            if (!data) {
                abp.message.warn("未能查询到父关键点！");
                return;
            }
            var disabled = "", kpType = 1;
            if (data.expireDate == null || data.expireDay > 0) {
                disabled = "kpType";
                kpType = 2;
            }
            OpenModal({
                modal: "modal-kp",
                modaltitle: "添加",
                url: abp.appUrl + "LegalContractKeyPoint/CreateKp",
                data: {
                    id: "",
                    parentNo: id,
                    kpType: kpType,
                    parentName: name,
                    contractNo: '@contractNo'
                },
                disabled: disabled,
                success: function(res) {
                    GetKp(res.id);
                }
            });
        }

        function UpdateKp(id) {
            var data = kpData.find(function(v) {
                return v.id == id;
            });
            console.log("KP-Update", data);
            if (!data) {
                abp.message.warn("未能查询到关键点！");
                return;
            }
            var parent = kpData.find(function(v) {
                return v.id == data.parentNo;
            });
            var disabled = "";
            data.parentName = parent ? parent.name : "根节点";
            data.kpType = 2;
            if (data.expireDate) {
                data.expireDate = new Date(data.expireDate).format("yyyy-MM-dd");
                data.alarmDate = new Date(data.alarmDate).format("yyyy-MM-dd");
                data.kpType = 1;
            }
            if (data.keyPointState != @LegalKeyPointStateDefinition.New ||
                (parent != null && (parent.expireDate == null || parent.expireDay > 0))) {
                disabled = "kpType";
            } else {
                var child = kpData.find(function(v) {
                    return data.id == v.parentNo;
                });
                if (child != null) {
                    disabled = "kpType";
                }
            }
            OpenModal({
                modal: "modal-kp",
                modaltitle: "变更",
                url: abp.appUrl + "LegalContractKeyPoint/Update",
                data: data,
                disabled: disabled,
                success: function() {
                    GetKp(id);
                    if (data.keyPointState != @LegalKeyPointStateDefinition.New) {
                        GetNote();
                        GetNote(0,id);
                    }
                }
            });
        }

        function DeleteKp(id) {
            var data = kpData.find(function(v) {
                return v.id == id;
            });
            if (!data) {
                abp.message.warn("未能查询到关键点！");
                return;
            }
            MsgConfirm("确认删除关键点[{0}]吗？".format(data.name),
                "删除关键点",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + "LegalContractKeyPoint/Delete",
                        data: { id: id },
                        success: GetKp
                    });
                });
        }

        function GetKp(id) {
            $.iwbAjax4({
                url: abp.appUrl + "LegalContractKeyPoint/GetKeyPoints?contractNo=@contractNo",
                success: function(res) {
                    KpsFormatter(res, id);

                }
            });
        }

        var kpData = [], predate = "";

        function KpsFormatter(data, id) {
            var str = "";
            predate = "";
            if (data && data.length) {
                kpData = data;
                var pData = kpData.filter(function(v) {
                    return !v.parentNo;
                });
                if (pData && pData.length) {
                    pData = pData.sort(function(a, b) {
                        return new Date(a.expireDate) - new Date(b.expireDate);
                    });
                    str += '<div class="timeline">';
                    pData.forEach(function(v) {
                        str += KpFormatter(v);
                    });

                    str += '<div><i class="fa fa-clock-o bg-gray"></i></div></div>';
                }
                str += '';
            } else {
                str =
                    '<div class="non-note"><span style="text-align: center;width: 100%;display: block;font-size: 1.25rem;font-weight: 600;color: var(--mc);">暂无关键点</span></div>';
            }
            $('#kp-body').html(str);

            if (id) {
                var idStr = id.indexOf('#') == 0 ? id : '#' + id;
                ActiveKp(idStr);
                $('html,body').animate({ scrollTop: $(idStr).offset().top - 200 }, 800);
            }
            var t = 0;

            $('.timeline-item .timeline-header').on('click',
                function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    $('.timeline-item').removeClass('active');
                    $(this).closest('.timeline-item').addClass('active');
                });
            $('.timeline-item .timeline-footer .tool[data-toggle=collapse]').on('mouseover.collapse.iwb',
                function(e) {
                    var $this = $(this);
                    t = setTimeout(function() {
                            var href,
                                target = $this.attr('data-target') ||
                                    e.preventDefault() ||
                                    (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''),
                                option = $this.data(); // $(target).data('collapse') ? 'show' : $this.data();
                            if (!$(target).hasClass('show')) {
                                $(target).collapse('show', option);
                            }
                        },
                        400);

                }).on('mouseout.collapse.iwb', function() { clearTimeout(t); });
            $('.timeline-item .timeline-footer .note[data-toggle=collapse]').on("click.collapse.iwb",
                function() {
                    var id = $(this).data('id');
                    $('#kp-note-tool_' + id).hide();
                    if (!$('#kp-note_' + id).data("init")) {
                        GetNote(0, id);
                    }
                });
            $('.timeline-item .timeline-footer .kp-sup[data-toggle=collapse]').on("click.collapse.iwb",
                function() {
                    var id = $(this).data('id');
                    if (!$('#kp-sup_' + id).data("init")) {
                        GetSupplement(undefined, id);
                    }
                });
            $('.timeline-item .timeline-footer input[type="checkbox"]').on('change',
                function() {
                    var id = $(this).closest('.kp-note').data('id');
                    GetNote(0, id);
                });
        }

        function KpFormatter(data, withChild) {
            var str = '';
            if (data) {
                var dateStr, bg = 'bg-teal';
                if (data.expireDate) {
                    var date = new Date(data.expireDate);
                    dateStr = date.format("yyyy-MM-dd");
                    bg = date - new Date() > 0 ? "bg-blue" : "bg-pink";
                } else {
                    dateStr = '履行后 <strong>{0}</strong> 天'.format(data.expireDay + data.alarmDay);
                }
                if (predate != dateStr) {
                    str += '<div class="time-label"><span class="{0} pl-2 pr-2">{1}</span></div>'.format(bg, dateStr);
                }
                predate = dateStr;
                str += '<div>';
                var icon = '';
                switch (data.keyPointState) {
                case @LegalKeyPointStateDefinition.New:
                    icon = 'fa fa-circle bg-blue';
                    break;
                case @LegalKeyPointStateDefinition.Run:
                    icon = 'fa fa-hourglass bg-green';
                    break;
                case @LegalKeyPointStateDefinition.Hang:
                    icon = 'fa fa-exclamation-triangle bg-yellow';
                    break;
                case @LegalKeyPointStateDefinition.Executed:
                    icon = 'fa fa-briefcase bg-purple';
                    break;
                case @LegalKeyPointStateDefinition.End:
                    icon = 'fa fa-square bg-red';
                    break;
                default:
                    break;
                }

                str += '<i class="{0}"></i>'.format(icon);
                str +=
                    '<div class="timeline-item" id="{0}" data-id="{0}" data-staff-no="{1}" data-staff-name="{2}" data-staff-org="{3}">'
                    .format(data.id, data.staffNo, data.staffName, data.staffOrgName);
                var staffOrgName = data.staffNo
                    ? '<span class="label circle sm  label-iwb" style="cursor:default">{0}<span class="mr-1 ml-1">:</span>{1}</span>'.format(
                        data.staffOrgName,
                        data.staffName)
                    : '<span class="btn btn-outline-iwb btn-sm circle" title="点击分配关键点" style="padding:3px 1rem;font-size: 0.875em!important;cursor: pointer;" onclick="SetOrg(\'{0}\')">暂未分配</span>'.format(data.id);
                str +=
                    '<span class="time text-iwb"><span class="mr-3">{0}</span><span class="mr-3">{1}</span><span class="mr-2">{2}</span></span>'
                    .format(staffOrgName, KpLevelFormatter(data.keyPointLevel), KpStateFormatter(data.keyPointState));
                str += '<h3 class="timeline-header"><a href="#" style="line-height: 1.45;">{0}</a></h3>'.format(
                    data.name);
                str += '<div class="timeline-body">{0} {1}</div>'.format(data.description,
                    (!withChild ? KpChildren(data.id, true) : ""));
                str +=
                    '<div class="timeline-footer" style="display: flex;width: 100%;justify-content: space-between;">{0}</div>'
                    .format(KpTool(data));
                str +=
                    '<div class="timeline-footer collapse card-comments kp-note" id="kp-note_{0}" data-id="{0}"  style="border-top:1px solid var(--mc);position: relative;"><div id="kp-note-tool_{0}" style="display:none;">{1}</div><div id="kp-note-content_{0}"></div></div>'
                    .format(data.id, $('#contract-note-tool').html());
                str +=
                    '<div class="timeline-footer collapse card-comments kp-sup" id="kp-sup_{0}" data-id="{0}" style="border-top:1px solid var(--mc);position: relative;"></div>'
                    .format(data.id);
                str += '</div>';
                str += '</div>';
            }
            return str;
        }

        function KpChildren(id, isFirst) {
            var child = kpData.find(function(v) {
                return v.parentNo == id;
            });
            var str = '';
            if (!child) {
                return str;
            }
            if (isFirst) {
                str +=
                    ' <div class="card card-widget card-outline card-{1} collapsed-card mt-2 mb-2 card-kp-child"><div class="card-header"><div class="card-title"><h6 class="mb-0">{0}</h6></div><div class="card-tools"><button type="button" class="btn btn-tool kp-collapse" data-card-widget="collapse" ><i class="fa fa-plus"></i></button></div></div><div class="card-body card-comments p-5 pr-0" style="background:#f5f5f5">'
                    .format(GetRunKpName(child.id),
                        child.keyPointState == @LegalKeyPointStateDefinition.New ? 'primary' : 'purple');
                str += '<div class="timeline">';
            }
            str += KpFormatter(child, true);
            str += KpChildren(child.id);
            if (isFirst) {
                str += '<div><i class="fa fa-clock-o bg-gray"></i></div></div>';
                str += '</div></div>';
            }
            return str;
        }

        function GetRunKpName(id) {
            var run = kpData.find(function(v) {
                return v.keyPointPath.indexOf(id) >= 0 && v.keyPointState == @LegalKeyPointStateDefinition.Run;
            });
            var str = run
                ? (run.staffNo
                    ? '<span class="label circle sm  label-warning mr-3">{0}<span class="mr-1 ml-1">:</span>{1}</span>'
                    .format(run.staffOrgName,
                        run.staffName)
                    : '') +
                '待履行：<span class="text-iwb" style="cursor: pointer" onclick="ActiveKp(\'#{0}\')">{1}</span>'.format(
                    run.id,
                    run.name)
                : '<span  onclick="ActiveKp(this)" style="cursor: pointer">暂无待履行的关键点</span>';
            return str;
        }

        function ActiveKp(idStr) {
            if (typeof idStr == 'string') {
                $('.timeline-item').removeClass('active');
                $(idStr).addClass('active');
            }
            var $cardTool = $(idStr).closest('.card-kp-child').find('.btn-tool.kp-collapse');
            if ($cardTool && $cardTool.length) {
                $cardTool.trigger('click');
            }
        }

        function KpTool(data) {
            var str = '',
                str1 = '',
                str2 = '',
                strA = '',
                strU = '',
                strD = '',
                strS = '',
                strH = '',
                strE = '',
                strR = '',
                strRs = '',
                strCe = '',
                strExecute = '',
                strSo = '',
                strN = '',
                strLn = '';
            @{
                if (AbpSession.AccountType != AccountTypeDefinition.System)
                {
                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgCreate))
                    {
                        <text>
                            strA =
                                '<button type="button" class="btn btn-iwb btn-sm mr-1" onclick="AddChildKp(\'{0}\',\'{1}\')">添加子关键点</button>'
                                .format(data.id, data.name);
                        </text>
                    }
                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgUpdate))
                    {
                        <text>
                            strU =
                                '<button type="button" class="btn btn-iwb btn-sm mr-1" onclick="UpdateKp(\'{0}\')">变更</button>'
                                .format(data.id);
                        </text>
                    }
                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgDelete))
                    {
                        <text>
                            strD =
                                '<button type="button" class="btn btn-danger btn-sm mr-1" onclick="DeleteKp(\'{0}\')">删除</button>'
                                .format(data.id);
                        </text>
                    }

                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgChangeEvidence))
                    {
                        <text>
                            strCe =
                                '<button type="button" class="btn btn-iwb btn-sm mr-1" onclick="ChangeEvidenceKp(\'{0}\')">材料(证据)</button>'
                                .format(data.id);
                        </text>
                    }
                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgChangeState))
                    {

                        <text>
                            strS =
                                '<button type="button" class="btn btn-iwb btn-sm mr-1" onclick="MsgConfirm(\'确认要启动关键点吗？\',\'开启关键点\',function() {ChangeState(\'{0}\',@(LegalKeyPointStateDefinition.Run),\'开启关键点\')});">启动</button>'
                                .format(data.id);
                            strH =
                                '<button type="button" class="btn btn-warning btn-sm mr-1" onclick="ChangeStateWithModal(\'{0}\',@LegalKeyPointStateDefinition.Hang ,\'挂起关键点\')">挂起</button>'
                                .format(data.id);
                            strE =
                                '<button type="button" class="btn btn-danger btn-sm mr-1" onclick="ChangeStateWithModal(\'{0}\',@LegalKeyPointStateDefinition.End ,\'关闭关键点\')">关闭</button>'
                                .format(data.id);
                            strR =
                                '<button type="button" class="btn btn-success btn-sm mr-1" onclick="ChangeStateWithModal(\'{0}\',@LegalKeyPointStateDefinition.Run ,\'恢复关键点\')">恢复</button>';
                        </text>
                    }
                    if (AbpSession.AccountType == AccountTypeDefinition.Client)
                    {
                        if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgChangeState))
                        {
                            <text>
                                strExecute =
                                    '<button type="button" class="btn btn-danger btn-sm mr-1" onclick="ChangeStateWithModal(\'{0}\',@LegalKeyPointStateDefinition.Executed ,\'履行关键点\')">确认履行</button>'
                                    .format(data.id);
                            </text>
                        }
                        if ((bool) ViewBag.IsContractMaster || IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgSetOrg))
                        {

                            <text>
                                var btnStyle = data.staffNo ? "iwb" : "warning";
                                strSo = '<button type="button" class="btn btn-{1} btn-sm mr-1" onclick="SetOrg(\'{0}\')">分配关键点</button>'
                                    .format(data.id, btnStyle);
                            </text>
                        }
                    }

                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgNote))
                    {
                        <text>
                            strN =
                                '<button type="button" class="btn btn-iwb btn-sm mr-1" onclick="AddNote(2,\'{0}\')">备注</button>'
                                .format(data.id);
                        </text>
                    }
                    if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgRestart))
                    {
                        <text>
                            strRs =
                                '<button type="button" class="btn btn-success btn-sm mr-1" onclick="ChangeStateWithModal(\'{0}\',@LegalKeyPointStateDefinition.Run ,\'重启关键点\')">重启</button>'
                                .format(data.id);
                        </text>
                    }
                    if (AbpSession.AccountType == AccountTypeDefinition.Lawyer && IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgLawNote))
                    {
                        <text>
                            strLn =
                                '<button type="button" class="btn btn-success btn-sm mr-1" onclick="AddNote(3,\'{0}\')">律师提示</button>'
                                .format(data.id);
                        </text>
                    }
                }
            }
            var child = kpData.find(function(v) {
                return v.parentNo == data.id;
            });
            if (!child) {
                str1 += strA;
            }
            str1 += strN;
            str1 += strLn;

            switch (data.keyPointState) {
            case @LegalKeyPointStateDefinition.New:
                str2 += strU;
                if (!child) {
                    str2 += strD;
                }
                var parent = kpData.find(function(v) {
                    return v.id == data.parentNo;
                });
                if (!parent) {
                    str2 += strS;
                }
                str2 += strSo;
                break;
            case @LegalKeyPointStateDefinition.Run:
                str2 += strU;
                str2 += strCe;
                str2 += strSo;
                str2 += strH;
                str2 += strE;
                str1 += strExecute;
                break;
            case @LegalKeyPointStateDefinition.Hang:
                str2 += strU;
                str2 += strR;
                str2 += strE;
                str2 += strSo;
                break;
            case @LegalKeyPointStateDefinition.End:
                //str2 += strU;
                str2 += strRs;
                //str2 += strSo;
                break;
            default:
                break;
            }
            str = '<div style="display: flex;justify-content: flex-start;">';
            str +=
                '<button type="button" title="查看关键点记录" class="note btn btn-iwb circle btn-sm mr-1" data-id="{0}" data-toggle="collapse" data-target="#kp-note_{0}"><i class="fa fa-file-text-o"></i></button>'
                .format(data.id);
            str +=
                '<button type="button" title="查看变更材料" class="kp-sup btn btn-iwb circle btn-sm mr-1" data-id="{0}" data-toggle="collapse" data-target="#kp-sup_{0}"><i class="fa fa-folder-open-o"></i></button>'
                .format(data.id);
            if (str2) {
                str +=
                    '<button  title="更多操作" type="button" class="tool btn btn-iwb circle btn-sm" data-toggle="collapse" data-target="#tool-box_{0}"><i class="fa fa-bars"></i></button>'
                    .format(data.id);
                str +=
                    '<div id="tool-box_{0}" class="collapse" style="justify-content: flex-start;padding:0 10px;">{1}</div>'
                    .format(data.id, str2);
            }
            str += '</div>';
            str += '<div style="display: flex;justify-content: flex-end;">{0}</div>'.format(str1);
            return str;
        }
    </script>

    <script id="ChangeKpState-Script">
        function ChangeState(id, state, reason) {
            $.iwbAjax1({
                url: abp.appUrl + 'LegalContractKeyPoint/ChangeState',
                table: $table,
                data: {
                    Id: id,
                    State: state,
                    Reason: reason
                },
                success: function() {
                    GetKp(id);
                    GetNote();
                    GetNote(0,id);
                }
            });
        }

        function ChangeStateWithModal(id, state, title) {
            $(document).iwbModal('create',
                {
                    modal: 'change-state-modal',
                    modaltitle: title,
                    modalBody:
                        '<div class="modal-body"><form class="form-horizontal iwb-form"><div class="form-group row"><label class="col-sm-3 col-md-2 iwb-label iwb-label-sm " for="reason">变更原因</label><div class="col-sm-9 col-md-10"><div class="input-group input-group-sm  " style="position: relative"><textarea rows="5" class="form-control" id="reason" name="description" placeholder="请输入变更原因..." value="" style="width:100%"></textarea></div></div></div></form></div>',
                    save: function() {
                        var v = $('#change-state-modal #reason').val();
                        if (v) {
                            ChangeState(id, state, v);
                            $('#change-state-modal').modal('hide');
                        } else {
                            abp.message.warn("请输入变更原因后再提交");
                        }
                    }
                });
        }

        @*function GoDetail(id) {
            window.location.href = '@Url.Action("ContractDetail")' + '/' + id;
        }*@
    </script>
    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
            case 0:
                return '<span class="label sm label-danger">' + name + '</span>';
            default:
                return '<span class="label sm label-info">' + name + '</span>';
            }
        }

        function ContractStateFormatter(v) {
            var name = $('#hid-contract-state option[value="' + v + '"]').text();
            return name;
        }

        function KpStateFormatter(v) {
            var name = $('#hid-kp-state option[value="' + v + '"]').text();
            //return name;
            switch (v) {
            case @(LegalKeyPointStateDefinition.New):
                return '<span class="label sm label-iwb">' + name + '</span>';
            case @(LegalKeyPointStateDefinition.Run):
                return '<span class="label sm label-success">' + name + '</span>';
            case @(LegalKeyPointStateDefinition.Hang):
                return '<span class="label sm label-warning">' + name + '</span>';
            case @(LegalKeyPointStateDefinition.End):
                return '<span class="label sm label-danger">' + name + '</span>';
            case @(LegalKeyPointStateDefinition.Executed):
                return '<span class="label sm label-purple">' + name + '</span>';
            default:
                return '<span class="label sm label-info">' + name + '</span>';
            }
        }

        function KpLevelFormatter(v) {
            var name = $('#hid-kp-level option[value="' + v + '"]').text();
            switch (v) {
            case @(LegalKeyPointLevelDefinition.Common):
                return '<span class="label circle sm  label-success">' + name + '</span>';
            case @(LegalKeyPointLevelDefinition.Important):
                return '<span class="label circle sm label-warning">' + name + '</span>';
            case @(LegalKeyPointLevelDefinition.Urgent):
                return '<span class="label circle sm label-danger">' + name + '</span>';
            default:
                return '<span class="label circle sm label-info">' + name + '</span>';
            }
        }

        function ActionsFormatter(v, r) {
            var str = '', state = r.contractState, id = r.id;
            @if (IsGranted(PermissionNames.PagesCaseContractMgContractMgKeyPointMgChangeState))
            {
                <text>
                    var strS =
                            '<span class="table-action" onclick="MsgConfirm(\'确认要启动关键点[{2}]吗？\',\'开启关键点\',function() {ChangeState(\'{1}\',@(LegalKeyPointStateDefinition.Run),\'开启关键点\')});">{0} 开启关键点</span>'
                                .format(tableActionIcon, id, r.name),
                        strH =
                            '<span class="table-action" onclick="ChangeStateWithModal(\'{1}\',@(LegalKeyPointStateDefinition.Hang),\'挂起关键点\')">{0} 挂起关键点</span>'
                                .format(tableActionIcon, id),
                        strR =
                            '<span class="table-action" onclick="ChangeStateWithModal(\'{1}\',@(LegalKeyPointStateDefinition.Run),\'恢复关键点\')">{0} 恢复关键点</span>'
                                .format(tableActionIcon, id),
                        @*strRs =
                            '<span class="table-action" onclick="ChangeStateWithModal(\'{1}\',@(LegalKeyPointStateDefinition.Run),\'重启关键点\')">{0} 重启关键点</span>'
                                .format(tableActionIcon, id),*@
                        strE =
                            '<span class="table-action" onclick="ChangeStateWithModal(\'{1}\',@(LegalKeyPointStateDefinition.End),\'关闭关键点\')">{0} 关闭关键点</span>'
                                .format(tableActionIcon, id);
                    if (state == @(LegalKeyPointStateDefinition.New)) {
                        str += strS;
                    } else if (state == @(LegalKeyPointStateDefinition.Run)) {
                        str += strH;
                        str += strE;
                    } else if (state == @(LegalKeyPointStateDefinition.Hang)) {
                        str += strR;
                        str += strE;
                    }
                </text>

            }
            str += '<span class="table-action" onclick="GoDetail(\'{1}\')">{0} 合同详情</span>'.format(tableActionIcon, id);

            return str;
        }
    </script>
}

<section style="display: none">
    <select id="hid-contract-state">
        @Html.Raw(contractState)
    </select>
    <select id="hid-kp-state">
        @Html.Raw(kpState)
    </select>
    <select id="hid-kp-level">
        @Html.Raw(kpLevel)
    </select>
    @*@Html.DropDownList("hid-type", type)*@
</section>