@using ContractService.Authorization
@using ContractService.Helpers
@using ContractService.LegalCase
@using ContractService.LegalContract
@{
    ViewBag.Title = L("HomePage");
    ViewBag.CurrentPageName = PermissionNames.Pages;
    string kpLevel = ViewBag.KeyPointLevel, kpState = ViewBag.KeyPointState;
}
<style>
    .card-body {
        padding: 0.8rem;
    }

        .card-body .box {
            height: 100%;
        }

    .table-box {
        padding: .25rem;
        width: 100%;
    }

    .box .box-header {
        width: 100%;
        text-align: center;
    }

        .box .box-header .box-title {
            background: var(--mc);
            color: #fff;
            padding: 0.5rem 0;
        }

    .table td, .table th {
        padding: .5rem;
        vertical-align: middle;
        /*border-top: 1px solid #dee2e6;*/
    }

    .box .box-body {
        height: calc(100% - 35px);
    }

        .box .box-body .body-content {
            width: 100%;
            /*background: #dda0dd;
                min-height: 100px;*/
        }

    .table thead tr {
        cursor: default;
        width: 100%;
    }

    .table tbody tr {
        cursor: pointer;
    }

        .table tbody tr:nth-of-type(2n) {
            background-image: linear-gradient(rgba(0,0,0,.02),rgba(0,0,0,.02))
        }

        .table tbody tr:not(.non):hover {
            background-image: linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05))
        }

        .table tbody tr:not(.non).active {
            background: var(--mc);
            color: #fff;
            transition: all 0.8s;
        }

            .table tbody tr:not(.non).active a {
                color: #fff;
            }

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

    .timeline-item.active {
        border: 2px solid var(--mc);
        transition: all 0.3s;
    }
</style>
<div class="container-fluid" style="padding:15px 15px 0">
    <div class="row">
        <div class="col-md-9">
            <div class="card card-widget card-outline card-pink">
                <div class="card-header">
                    <div class="card-title">
                        <h4 class="mb-0">项目合同总览</h4>
                    </div>
                    <div class="card-tools" style="display: flex">
                        <div class="input-group input-group-sm">
                            <span class="input-group-prepend">
                                <span class="input-group-text">项目关键字</span>
                            </span>
                            <input type="text" id="case-search" class="form-control" value="" placeholder="请输入项目查询关键字" />

                            <span class="input-group-prepend">
                                <span class="input-group-text">合同关键字</span>
                            </span>
                            <input type="text" id="contract-search" class="form-control" value="" placeholder="请输入合同查询关键字" />
                            <select type="text" id="search-date" class="form-control" style="width: 150px" onchange="Change2Query()">
                                <option value="1">最近7天</option>
                                <option value="2" selected="selected">最近1个月</option>
                                <option value="3">最近3个月</option>
                                <option value="4">最近6个月</option>
                                <option value="5">最近1年</option>
                                <option value="6">全部</option>
                            </select>
                            <span class="input-group-append" onclick="Change2Query()">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                            </span>
                        </div>
                        @*<button type="button" class="btn btn-tool text-primary">
                                <i class="fa fa-search"></i>
                            </button>*@
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body" style="height: calc(100vh - 183px)">
                    <div class="row" style="height: 100%;">
                        @*<div class="col-md-3" style="height: 100%">
                            <div class="box">
                                <div class="box-header">
                                    <h6 class="box-title">项目信息</h6>
                                </div>
                                <div class="box-body">
                                    <table class="body-content table">
                                        <thead>
                                            <tr>
                                                <th>项目</th>
                                                <th class="text-center" style="width: 90px;">详情</th>
                                            </tr>
                                        </thead>
                                        <tbody id="case-box">
                                            <tr class="non"><td colspan="2" class="text-danger text-center text-bold">暂无信息</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>*@
                        <div class="col-md-6" style="height: 100%">
                            <div class="box">
                                <div class="box-header"> <h6 class="box-title">项目合同信息</h6></div>
                                <div class="box-body">
                                    <table class="table body-content">
                                        <thead>
                                            <tr>
                                                <th style="width: calc((100% - 90px)/2);min-width: 100px;">项目</th>
                                                <th style="width: calc((100% - 90px)/2);min-width: 100px;">合同</th>
                                                <th class="text-center" style="width: 90px;">详情</th>
                                            </tr>
                                        </thead>
                                        <tbody id="contract-box">
                                            <tr class="non"><td colspan="2" class="text-danger text-center text-bold">暂无信息</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6" style="height: 100%">
                            <div class="box">
                                <div class="box-header"> <h6 class="box-title">关键点信息</h6></div>
                                <div class="box-body">
                                    <div id="kp-body" class="body-content">
                                        <div class="text-danger text-bold"><span style="text-align: center;width: 100%;display: block">暂无信息</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-widget card-outline card-purple">
                        <div class="card-header">
                            <div class="card-title">
                                <h4 class="mb-0">今天任务</h4>
                            </div>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="height: calc(50vh - 130px)">
                            <div id="today-box" class="body-content"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card card-widget card-outline card-primary">
                        <div class="card-header">
                            <div class="card-title">
                                <h4 class="mb-0">近期任务</h4>
                            </div>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="height: calc(50vh - 125px)">
                            <div id="near-box" class="body-content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

@using (Html.BeginScripts())
{
    <script>
        $(function () {
            OverlayScrollbar($('.card-body .body-content').parent());
            //GetCase();
            GetContract();
            GetTodayKp();
            GetNearKp();
            $('.card-tools .form-control').on('keydown',
                function (event) {
                    var e = event || window.event;
                    if (e && e.keyCode == 13) {
                        Change2Query();
                    }
                });
        });
    </script>

    <script>
        function Change2Query() {
            GetContract();
        }

        @*function GetCase() {
            $('#contract-box').slideToggle(800);
            var data = [
                {
                    "KeyField": "KeyWord",
                    "KeyWords": $('#case-search').val(),
                    "FieldType": 0,
                    "ExpType": 0
                },
                {
                    "KeyField": "case_state",
                    "KeyWords": ''
                }
            ];
            data = GetSearchDate(data);
            $.iwbAjax4({
                url: abp.appUrl + "LegalCase/GetAllCase",
                data: data,
                success: CaseFormatter
            });
        }

        function CaseFormatter(data, isContract) {
            var $that = isContract ? $('#contract-box') : $('#case-box');
            if (data && data.length) {
                var str = '';
                data.forEach(function (v) {
                    var stateStr = v.contractState == @LegalContractStateDefinition.Hang ||
                        v.caseState == @LegalCaseStateDefinition.Hang ? '<strong class="text-warning">(挂起)</strong>' : '';
                    str +=
                        '<tr onclick="Query(this,{4})" data-id="{0}" title="编号{2}"><td>{1}{3}</td><td class="text-center"><a href="/LegalCase/{5}/{0}" target="_blank">查看详情</a></td></tr>'
                        .format(v.id, v.name,v.code ,stateStr, isContract ? 0 : 1, isContract ? 'ContractDetail' : 'CaseDetail');
                });
                $that.html(str).css("display", "none").slideToggle(800);
                $that.children(":first").trigger("click");

            } else {
                $that.html('<tr class="non"><td  colspan="2" class="text-danger text-center text-bold non">暂无信息</td></tr>').css("display", "none").slideToggle(300);
                if (!isContract) {
                    //$('#contract-box').html('<tr class="non"><td  colspan="2" class="text-danger text-center text-bold non">暂无信息</td></tr>').css("display", "none").slideToggle(300);
                    GetContract();

                } else {
                    $('#kp-body').html('<div class="text-danger text-bold"><span style="text-align: center;width: 100%;display: block">暂无信息</span></div>').css("display", "none").slideToggle(300);
                }

            }
        }

       *@

        function GetSearchDate(_sList) {
            _sList = _sList || [];
            var type = Number($('#search-date').val()),
                sDate,
                eDate = new Date();

            switch (type) {
                case 1:
                    sDate = eDate.setDate(eDate.getDate() - 7);
                    break;
                case 2:
                    sDate = eDate.setMonth(eDate.getMonth() - 1);
                    break;
                case 3:
                    sDate = eDate.setMonth(eDate.getMonth() - 3);
                    break;
                case 4:
                    sDate = eDate.setMonth(eDate.getMonth() - 6);
                    break;
                case 5:
                    sDate = eDate.setFullYear(eDate.getFullYear() - 1);
                    break;
                default:
                case 6:
                    sDate = false;
                    break;
            }
            if (sDate) {
                sDate = new Date(sDate);
                eDate = new Date();
                _sList.push({
                    "KeyField": "creationTime",
                    "KeyWords": sDate.format('yyyy-MM-dd'),
                    "FieldType": 5,
                    "ExpType": 4
                });
                _sList.push({
                    "KeyField": "creationTime",
                    "KeyWords": eDate.format('yyyy-MM-dd'),
                    "FieldType": 5,
                    "ExpType": 5
                });
            }
            return _sList;
        }

        function GetContract() {
            $('#kp-body').slideToggle(800);

            var data = [
                {
                    "KeyField": "KeyWord",
                    "KeyWords": $('#contract-search').val(),
                    "FieldType": 0,
                    "ExpType": 0
                },
                {
                    "KeyField": "case",
                    "KeyWords": $('#case-search').val(),
                    "FieldType": 0,
                    "ExpType": 0
                },
                {
                    "KeyField": "contract_state",
                    "KeyWords": ''
                }
            ];
            data = GetSearchDate(data);
            $.iwbAjax4({
                url: abp.appUrl + "LegalContract/GetAllContract",
                data: data,
                success: ContractFormatter
            });
        }

        function ContractFormatter(data) {
            //CaseFormatter(data, true);
            var $that = $('#contract-box');
            if (data && data.length) {
                var str = '';
                data.forEach(function (v) {
                    var caseStateStr = v.caseState == @LegalCaseStateDefinition.Hang ? '<strong class="text-warning">(挂起)</strong>' : '';
                    var contractStateStr = v.caseState == @LegalCaseStateDefinition.Hang ? '<strong class="text-warning">(挂起)</strong>' : '';
                    str +=
                        '<tr onclick="Query(this,\'{0}\')" data-id="{0}" title="项目编号:{3}，合同编号:{4}"><td>{1}</td><td>{2}</td><td class="text-center"><a href="/LegalCase/ContractDetail/{0}" target="_blank">查看详情</a></td></tr>'
                        .format(v.id, v.caseName + caseStateStr, v.name + contractStateStr,v.caseCode,v.code );
                });
                $that.html(str).css("display", "none").slideToggle(800);
                $that.children(":first").trigger("click");
            } else {
                $that.html('<tr class="non"><td  colspan="2" class="text-danger text-center text-bold non">暂无信息</td></tr>').css("display", "none").slideToggle(300);
                $('#kp-body').html('<div class="text-danger text-bold"><span style="text-align: center;width: 100%;display: block">暂无信息</span></div>').css("display", "none").slideToggle(300);
            }
        }

        function Query(_this, id) {
            if ($(_this).hasClass('active')) {
                $(_this).removeClass('active');
            } else {
                $(_this).addClass('active').siblings().removeClass('active');
                GetKeyPoint(id);
            }
        }
    </script>

    <script id="kp-script">
        function GetKeyPoint(id) {
            $.iwbAjax4({
                url: abp.appUrl + "LegalContractKeyPoint/GetKeyPoints?contractNo="+id,
                success: KpsFormatter
            });
        }

        var kpData = [], predate;

        function KpsFormatter(data) {
            var str = "";
            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="text-danger text-bold"><span style="text-align: center;width: 100%;display: block">暂无信息</span></div>';
            }
            $('.timeline-item .timeline-header').on('click',
                function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    $('.timeline-item').removeClass('active');
                    $(this).closest('.timeline-item').addClass('active');
                });
            $('#kp-body').html(str).css("display", "none").slideToggle();
        }

        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">{0}<span class="mr-1 ml-1">:</span>{1}</span>'.format(data.staffOrgName,
                        data.staffName)
                    : '';
                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 class="timeline-footer"  style="display: flex;width: 100%;justify-content: flex-end;"><a class="" href="/LegalCase/ContractDetail/{1}#{2}" target="_blank" style="color:var(--mc)"><i class="fa fa-angle-double-right" style="margin-right:5px;"></i>查看详情</a></div>'.format(data.id,data.contractNo,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 pr-0">'
                    .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() {
            var str = '';
            //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);
            //str += '</div>';
            return str;
        }
    </script>

    <script id="kp-s">
        function GetTodayKp() {
            $.iwbAjax4({
                url: abp.appUrl + 'LegalContractKeyPoint/GetKeyPointsByType?type=1',
                success: TodayKpFormatter
            });
        }

        function TodayKpFormatter(data) {
            var str = '';
            if (data && data.length) {
                str += '<div class="box-header text-danger text-center text-bold mb-2" style="width:100%">今天有<strong class="ml-1 mr-1">{0}</strong>项任务需处理</div>'.format(data.length);
                var i = 1;
                data.forEach(function (v) {
                    var day = new Date(v.expireDate).diff('d', new Date());
                    str +=
                        '<div class="text-{5} mb-2" style="display: flex;align-items: center;"><span class="mr-2">{0}. 关键点<strong class="mr-1 ml-1">{1}</strong>{2}</span> {6} <a class="btn btn-xs btn-{5} ml-2" href="/LegalCase/ContractDetail/{3}#{4}" target="_blank">查看详情</a></div>'
                        .format(i,
                            v.name,
                            day ? '已过期<strong class="mr-1 ml-1">{0}天</strong>'.format(day) : '已到确认执行日期',
                            v.contractNo,
                            v.id,
                            day ? 'maroon' : 'indigo',
                            KpLevelFormatter(v.keyPointLevel));
                    i++;
                });
            } else {
                str += '<div class="box-header text-iwb text-center text-bold" style="width:100%">今天没有任务需处理</div>';
            }
            $('#today-box').html(str);
        }

        function GetNearKp() {
            $.iwbAjax4({
                url: abp.appUrl + 'LegalContractKeyPoint/GetKeyPointsByType?type=2',
                success: NearKpFormatter
            });
        }

        function NearKpFormatter(data) {
            var str = '';
            if (data && data.length) {
                str += '<div class="box-header text-danger text-center text-bold mb-2" style="width:100%">近期有<strong class="ml-1 mr-1">{0}</strong>项任务需处理</div>'.format(data.length);
                var i = 1;
                data.forEach(function (v) {
                    var day = new Date().diff('d', v.expireDate);
                    str +=
                        '<div class="text-pink mb-2" style="display: flex;align-items: center;"><span class="mr-2">{0}. 关键点<strong class="mr-1 ml-1">{1}</strong><strong class="mr-1 ml-1">{2}天</strong>后需要确认执行</span> {5} <a class="btn btn-xs btn-pink ml-2" href="/LegalCase/ContractDetail/{3}#{4}" target="_blank">查看详情</a></div>'
                        .format(i, v.name, day, v.contractNo, v.id, KpLevelFormatter(v.keyPointLevel));
                    i++;
                });
            } else {
                str += '<div class="box-header text-iwb text-center text-bold mb-2" style="width:100%">近期没有任务需处理</div>';
            }
            $('#near-box').html(str);
        }
    </script>

    <script>

        function KpStateFormatter(v) {
            var name = $('#hid-kp-state option[value="' + v + '"]').text();
            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>';
            }
        }
    </script>
}